传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229
在GIS服务平台构建完毕之后,我们就要着手在此平台上提供服务以供客户端请求访问。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> WuHan University : WMS </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="stylesheet" href="./script/OpenLayers/theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="./script/OpenLayers/style.css" type="text/css"> <script type="text/javascript" src="./script/OpenLayers/OpenLayers.js"></script> <script type="text/javascript"> var map, drawControls; var bounds = new OpenLayers.Bounds(114.34795499999998, 30.524327, 114.36603512820511, 30.536327); function init() { map = new OpenLayers.Map({ div: 'map', maxExtent: bounds, projection: "EPSG:4326", units: 'degrees' }); var wmsLayer = new OpenLayers.Layer.WMS( "University WMS", "http://127.0.0.1:8080/geoserver/sample/wms?", { layers: "sample:wuhanuniversity", format: "image/png", singleTile: true } ); var pointLayer = new OpenLayers.Layer.Vector("Point Layer"); var lineLayer = new OpenLayers.Layer.Vector("Line Layer"); var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer"); var boxLayer = new OpenLayers.Layer.Vector("Box Layer"); map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer, boxLayer]); map.addControl(new OpenLayers.Control.PanZoomBar()); map.addControl(new OpenLayers.Control.LayerSwitcher()); /*map.addControl(new OpenLayers.Control.ScaleLine()); map.addControl(new OpenLayers.Control.Permalink('permalink'));*/ map.addControl(new OpenLayers.Control.MousePosition()); /*map.addControl(new OpenLayers.Control.OverviewMap()); map.addControl(new OpenLayers.Control.KeyboardDefaults());*/ drawControls = { point : new OpenLayers.Control.DrawFeature(pointLayer, OpenLayers.Handler.Point), line : new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path), polygon : new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon), box : new OpenLayers.Control.DrawFeature(boxLayer, OpenLayers.Handler.RegularPolygon, { handlerOptions: { sides: 4, irregular: true } } ) }; for(var key in drawControls) { map.addControl(drawControls[key]); } map.zoomToExtent(bounds); document.getElementById('noneToggle').checked = true; } function toggleControl(element) { for(key in drawControls) { var control = drawControls[key]; if(element.value == key && element.checked) { control.activate(); } else { control.deactivate(); } } } function allowPan(element) { var stop = !element.checked; for(var key in drawControls) { drawControls[key].handler.stopDown = stop; drawControls[key].handler.stopUp = stop; } } </script> </head> <body onload="init()"> <div id="map" class="smallmap"></div> <ul id="controlToggle"> <li> <input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked" /> <label for="noneToggle">Navigate</label> </li> <li> <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" /> <label for="pointToggle">Draw Point</label> </li> <li> <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" /> <label for="lineToggle">Draw Line</label> </li> <li> <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" /> <label for="polygonToggle">Draw Polygon</label> </li> <li> <input type="radio" name="type" value="box" id="boxToggle" onclick="toggleControl(this);" /> <label for="boxToggle">Draw Box</label> </li> <li> <input type="checkbox" name="allow-pan" value="allow-pan" id="allowPan" onclick="allowPan(this);" checked=true /> <label for="allowPan">Allow Pan While Drawing</label> </li> </ul> </body> </html>