1. 通过MyEclipse创建一个Web Project (例子:OpenLayersTest),在源码目录WebRoot新建两个目录css和js,在js目录下创建目录OpenLayers,如下图:
2. 到OpenLayers Home下载OpenLayers2.11,找个目录解压
3. 复制OpenLayers-2.11\theme\default\style.css到开发源码目录WebRoot\css
4. 复制OpenLayers-2.11\img 和 OpenLayers-2.11\theme\default\img目录下的所有图片到开发目录WebRoot\js\OpenLayers\img
5. 复制OpenLayers-2.11\lib和OpenLayers-2.11\OpenLayers.js到可发目录WebRoot\js\OpenLayers
6. 刷新工程,新建helloworld.html
<!DOCTYPE html>
<html>
<head>
<title>中国地图</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
height: 100%;
}
.bigmap {
position: absolute;
left: 0;
top: 0px;
padding: 0;
width: 100%;
height: 100%;
border: 1px solid #333;
}
</style>
<script type="text/javascript" src="js/OpenLayers/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer_province;
// 第一次打开地图的中心位置(经度、纬度)
var firstLon = 109.33981;
var firstLat = 33.72419;
function init() {
// 创建MAP DIV框架
map = new OpenLayers.Map("map",
{
maxResolution: 'auto',
maxExtent: new OpenLayers.Bounds(
73.44696044921875, 6.318641185760498,
135.08583068847656, 53.557926177978516)
});
layer_province = new OpenLayers.Layer.WMS(
"China:province", "http://10.0.0.239:8081/geoserver/wms",
{
layers: "China:province",
},
{
singleTile: true, //set single label
isBaseLayer: true,
projection: "EPSG:4326",
maxExtent: new OpenLayers.Bounds(
73.44696044921875, 6.318641185760498,
135.08583068847656, 53.557926177978516)
}
);
map.addLayer(layer_province);
map.zoomToMaxExtent();
map.setCenter(new OpenLayers.LonLat(firstLon, firstLat), 0);
map.addControl(new OpenLayers.Control.Scale());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.LayerSwitcher());
}
</script>
</head>
<body onload="init()">
<div id="map" class="bigmap"></div>
</body>
</html>
maxExtent: 地图最大范围,通过查看GeoServer Layer的Bounding Boxes属性获得
maxResolution: 自动放大地图
参考:
http://openlayers.org/dev/examples/example.html
Creating Your First Map http://docs.openlayers.org/library/introduction.html
- 大小: 6.2 KB
- 大小: 4.2 KB
分享到:
相关推荐
flex开发系列书籍:WebGIS开发实战-Flex篇.pptx
gbd-webgis-client 基于React和OpenLayers的地图查看器。要求最新的node.js和npm 。安装克隆仓库并运行npm install : git clone https://github.com/gbd-consult/gbd-webgis-clientcd gbd-webgis-clientnpm install...
基于Flex的WebGIS框架设计与实现.pdf
用MapXtreme+C#开发的地理信息系统,简单
GIS开发 ArcGIS_Server简介.pdf 中间件在GIS开发中的应用.pdf 移动GIS开发手册.pdf 无线通信-开源框架下WEBGIS的设计与实现.pdf 使用Flex_API开发WebGIS应用.pdf 浅谈软件开发项目中的沟通管理.pdf 开源空间...
一个GIS生的大学四年.doc 网络GIS开发技术手册.doc 数字城市地理信息公共平台软件测评大纲.doc 手机GIS开发平台.doc 跬步科技GIS介绍.doc 基于OGC标准的移动GIS与WEBGIS的集成.doc GWC缓存的生成与失效详细说明.docx...
分享一套WEBGIS开发视频课程,2023年5月完结新课,提供...WEBGIS开发基础到进阶视频教程2023全套课程,包括:GIS基础知识,web基础知识,webgis相关软件,GIS框架,项目实战,SDK相关开发,postgis数据库,geotools等。
基于cesium的三维webgis开发讲解
这是-WebGIS-从-基础到-开发实践-的书上实例,很有用
WebGIS开发-ArcGIS Server与.NET - 源码代码
该文在研究分析J2EE和ArcIMS结构体系和运行机制的基础上,结合具体的项目开发实例,论述了基于二者结合下的多层分布式WebGIS总体架构的设计以及系统的逻辑层次与功能部署,并对系统利用EJB组件实现地理空间信息与非...
WebGIS开发-ArcGIS Server与.NET》源码 各种操作的例子程序 查询,buffer等等23个例子
一般由多主机,多数据库和多个客户端以分布式连接在Internet上而组成,包括以下四个部分: WEB-GIS浏览器(browser),WEB-GIS服务器,WEB-GIS编辑器(Editor),WEB-GIS信息代理(imformation agent)。
WebGlS第四课:地图的组成和操作 WebGlS第五课:地图控件的添加 WebGlS第六课:地图点击事件的引入和点标记 WebGlS第七课:地图覆盖物-矢量图形 WebGls第八课:地图覆盖物-两点拖拽测距 WebGls第九课:智慧校园项目...
gis:webgis管理系统模板
关于《WebGIS原理与实践》(高等教育出版社2008-2009)一书实习代码的编程参考文档。请注意作者最近更新。
适用于GIS开发者,优秀的webGIS开发框架,采用java、tomcat开发
《WebGIS 开发 ArcGIS Server 与.NET》源码-刘光唐大仕编