openlayer调用geoserver发布的地图实现地图的基本功能
主要实现的功能有放大，缩小，获取地图大小，平移，线路测量，面积测量，拉宽功能，显示标注，移除标注，画多边形获取经纬度坐标。根据经纬度坐标显示多边形。地图切换，图层控制等功能
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>OpenLayers map preview</title> <!-- Import OL CSS, auto import does not work with our minified OL.js build --> <link rel="stylesheet" type="text/css" href="../theme/default/style.css"/> <link rel="stylesheet" href="../theme/default/google.css" type="text/css"> <!-- Basic CSS definitions --> <style type="text/css"> /* General settings */ body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: small; } /* Toolbar styles */ #toolbar { position: relative; padding-bottom: 0.5em; } /* The map and the location bar */ #map { clear: both; position: relative; width: 698px; height: 330px; border: 1px solid black; } #wrapper { width: 698px; } #location { float: right; } /* Styles used by the default GetFeatureInfo output, added to make IE happy */ table.featureInfo, table.featureInfo td, table.featureInfo th { border: 1px solid #ddd; border-collapse: collapse; margin: 0; padding: 0; font-size: 90%; padding: .2em .1em; } table.featureInfo th { padding: .2em .2em; text-transform: uppercase; font-weight: bold; background: #eee; } table.featureInfo td { background: #fff; } table.featureInfo tr.odd td { background: #eee; } table.featureInfo caption { text-align: left; font-size: 100%; font-weight: bold; text-transform: uppercase; padding: .2em .2em; } </style> <!-- Import OpenLayers, reduced, wms read only version --> <script src="../lib/OpenLayers.js" ></script> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script defer="defer" type="text/javascript"> var map, measureControls; var untiled; var tiled; function init(){ format = 'image/png';var bounds = new OpenLayers.Bounds( //地图区域范围 74.137, 6.319, 135.086, 53.558 ); var options = { controls: [], maxExtent: bounds, maxResolution: 0.23808203125,projection: "EPSG:4610",numZoomLevels: 7, units: 'degrees' }; map = new OpenLayers.Map('map', options); /**********************加载图层 开始*******************************/ /* tiled = new OpenLayers.Layer.WMS( //图层组 "基础图层", "http://localhost:8080/geoserver/wms", { height: '330', width: '698', layers: 'sf', styles: '', srs: 'EPSG:4326', format: format, tiled: 'true', tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom }, { buffer: 0, displayOutsideMaxExtent: true } );*/var streams = new OpenLayers.Layer.WMS( //图层组 "中国", "http://localhost:8080/geoserver/wms", { height: '330', width: '698', layers: 'china', styles: '', srs: 'EPSG:4610', format: format, tiled: 'true', tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom }, {buffer: 0,displayOutsideMaxExtent: true} ); untiled = new OpenLayers.Layer.WMS( //单独图层 "省会", "http://127.0.0.1:8080/geoserver/wms", { height: '330', width: '698', layers: 'china:provice', styles: '', srs: 'EPSG:4610',transparent: "true", format: format }, {singleTile: true, ratio: 1} ); untiled.setVisibility(false); //设置为不显示//var gmap = new OpenLayers.Layer.Google("Google Streets", {visibility: false}); /* var dm_wms = new OpenLayers.Layer.WMS( "点图层", "http://127.0.0.1:8080/geoserver/wms", {layers: "sf:bugsites,sf:archsites", transparent: "true", format: "image/png"});*/ map.addLayers([streams,untiled]); /********************END 加载图层*********************************/ /************************加载一般的基础控件********************************/ map.addControl(new OpenLayers.Control.PanZoomBar({ //添加平移缩放工具条 position: new OpenLayers.Pixel(2, 15) })); map.addControl(new OpenLayers.Control.Navigation()); //双击放大,平移 map.addControl(new OpenLayers.Control.Scale($('scale'))); //获取地图比例尺 map.addControl(new OpenLayers.Control.MousePosition({element: $('location')})); //获取鼠标的经纬度map.setCenter(new OpenLayers.LonLat(100.254, 35.25), 1); //添加平移缩放工具条map.addControl(new OpenLayers.Control.OverviewMap()); //添加鹰眼图map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); //图层切换工具 map.addControl(new OpenLayers.Control.Permalink('xxxx')); //添加永久链接//map.addControl(new OpenLayers.Control.MouseToolbar());//map.zoomToMaxExtent();var zb=new OpenLayers.Control.ZoomBox({out:true});var panel = new OpenLayers.Control.Panel({defaultControl: zb});map.addControl(panel); /************END************加载一般的基础控件********************************/ /***********************鼠标点击，获取图层数据*******************************/ map.events.register('click', map, function (e) { document.getElementById('nodelist').innerHTML = "Loading... please wait..."; var params = { REQUEST: "GetFeatureInfo", EXCEPTIONS: "application/vnd.ogc.se_xml", BBOX: map.getExtent().toBBOX(), X: e.xy.x, Y: e.xy.y, INFO_FORMAT: 'text/html', QUERY_LAYERS: map.layers[0].params.LAYERS, FEATURE_COUNT: 50, Layers: 'ok', Styles: '', Srs: 'EPSG:4610', WIDTH: map.size.w, HEIGHT: map.size.h, format: format}; OpenLayers.loadURL("http://localhost:8080/geoserver/wms", params, this, setHTML, setHTML); OpenLayers.Event.stop(e); }); /**************END*********鼠标点击，获取图层数据*******************************/ /**********************************点、线、面测量开始**********************************************/ var sketchSymbolizers = { "Point": { pointRadius: 4, graphicName: "square", fillColor: "white", fillOpacity: 1, strokeWidth: 1, strokeOpacity: 1, strokeColor: "#333333" }, "Line": { strokeWidth: 3, strokeOpacity: 1, strokeColor: "#666666", strokeDashstyle: "dash" }, "Polygon": { strokeWidth: 2, strokeOpacity: 1, strokeColor: "#666666", fillColor: "white", fillOpacity: 0.3 } }; var style = new OpenLayers.Style(); style.addRules([ new OpenLayers.Rule({symbolizer: sketchSymbolizers}) ]); var styleMap = new OpenLayers.StyleMap({"default": style}); measureControls = { line: new OpenLayers.Control.Measure( OpenLayers.Handler.Path, { persist: true, handlerOptions: { layerOptions: {styleMap: styleMap} } } ), polygon: new OpenLayers.Control.Measure( OpenLayers.Handler.Polygon, { persist: true, handlerOptions: { layerOptions: {styleMap: styleMap} } } ) }; var control; for(var key in measureControls) { control = measureControls[key]; control.events.on({ "measure": handleMeasurements, "measurepartial": handleMeasurements }); map.addControl(control); }/***************************END************点，线、面积测量*****************************************/ //添加点标注的图层 markers = new OpenLayers.Layer.Markers("markers"); map.addLayer(markers); markers.setZIndex(200); } //获取面积的结果赋值 function handleMeasurements(event) { var geometry = event.geometry; var units = event.units; var order = event.order; var measure = event.measure; var element = document.getElementById('output'); var out = ""; if(order == 1) { out += "面积为: " + measure.toFixed(3) + " " + units; } else { out += "面积为: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>"; } element.innerHTML = out; }function setHTML(response){document.getElementById('nodelist').innerHTML = response.responseText;};//缩小function zoomOut(){map.zoomOut();}//放大function zoomIn(){map.zoomIn();}//获取地图数据function getSize(){alert(map.getSize()+",高度为="+map.getSize().h);}//切换鼠标事件功能function toggleControl(_value) { for(key in measureControls) { var control = measureControls[key]; if(_value == key ) { control.activate(); } else { control.deactivate(); } } }/*********************拉宽并获取经纬度坐标系*********************************/function boxExtend(){var controlBox = new OpenLayers.Control(); OpenLayers.Util.extend(controlBox, { draw: function () { this.box = new OpenLayers.Handler.Box( controlBox, {"done": this.notice},{ "persist": true}, {keyMask:OpenLayers.Handler.MOD_SHIFT }); this.box.activate(); }, notice: function (bounds) { var ll = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left, bounds.bottom)); var ur = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right, bounds.top)); alert(ll.lon.toFixed(4) + ", " + ll.lat.toFixed(4) + ", " + ur.lon.toFixed(4) + ", " + ur.lat.toFixed(4)); } });map.addControl(controlBox);}var markers,marker;var markArr=new Array();function addMarker(){ var url = 'http://www.openlayers.org/dev/img/marker.png'; var sz = new OpenLayers.Size(20, 20); //尺寸大小 var calculateOffset = function(size) { return new OpenLayers.Pixel(-(size.w/2), -size.h); }; var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);marker = new OpenLayers.Marker(new OpenLayers.LonLat(113.34851,33.22630), icon); markers.addMarker(marker); // marker = new OpenLayers.Marker(madrid, icon.clone()); // markers.addMarker(marker);} function removeMarker() { markers.removeMarker(marker); } /*******************多边形获取经纬度坐标系*************************/ function test(){var getpolygonxy = new OpenLayers.Control();OpenLayers.Util.extend(getpolygonxy, {draw: function() {this.polygon= new OpenLayers.Handler.Polygon(getpolygonxy ,{ "done": this.notice },{ "persist": true},{ keyMask: OpenLayers.Handler.MOD_SHIFT });this.polygon.activate();},notice: function(bounds) {alert(bounds);//坐标信息}});map.addControl(getpolygonxy); } </script> </head> <body onload="init()"> <div id="toolbar" style="display:"><input type="button" value="放大" onclick="zoomIn()"/><input type="button" value="缩小" onclick="zoomOut()"/><input type="button" value="获取地图大小" onclick="getSize()"/><input type="button" value="平移" onclick="toggleControl('none')"/><input type="button" value="线路测量" onclick="toggleControl('line')"/><input type="button" value="测量面积" onclick="toggleControl('polygon')"/><input type="button" value="shift拉框" onclick="boxExtend()"/><input type="button" value="显示标注" onclick="addMarker()"/><input type="button" value="移除标注" onclick="removeMarker()"/><input type="button" value="画多边形获取经纬度坐标" onclick="test()"/> </div> <div id="map"> </div> <div id="wrapper"> <div id="location">经纬度坐标</div> <div id="scale"> </div><div id="output"></div> </div><div id="xystr"></div> <div id="nodelist"> <em>Click on the map to get feature info</em> </div> </body></html>?根据经纬度坐标串显示多边形代码如下
?
?
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style:layer_style });var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); layer_style.fillOpacity = 0.2; layer_style.graphicOpacity =0.2; // create a polygon feature from a linear ring of points var pointList = []; var point1 = new OpenLayers.Geometry.Point(99.480233398438 ,34.892876953125);var point2 = new OpenLayers.Geometry.Point(106.74173535156, 25.96480078125);var point3 = new OpenLayers.Geometry.Point(116.26501660156, 36.6784921875);var point4 = new OpenLayers.Geometry.Point(109.59871972656 , 41.559173828125);var point5 = new OpenLayers.Geometry.Point(99.480233398438,34.892876953125);pointList.push(point1);pointList.push(point2);pointList.push(point3);pointList.push(point4);pointList.push(point5);pointList.push(pointList[0]); var linearRing = new OpenLayers.Geometry.LinearRing(pointList); var polygonFeature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Polygon([linearRing])); map.addLayer(vectorLayer); // map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5); vectorLayer.addFeatures([ polygonFeature]);?
根据经纬度坐标窜画多边形，线性等可以参考OpenLayers-2.10\examples 下的vector-features.html代码
?
1 楼 zhangjialu_vip 2012-06-07 不错，很用用，感谢楼主 2 楼 ruochen1208 2012-09-01 不错的资料