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