GIS开发记录(四)：WebGIS的HelloWorld--WMS

tessykandy

浏览: 80714 次
性别:
来自: 北京

最近访客更多访客>>

rocky_su

sikewang

spaceandroid

julyflame

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

gis maxResolution maxExtent WMS

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