GIS开发记录(四):WebGIS的HelloWorld--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