怎样管理网站,女与男爱做电影网站免费下载,坪地网站建设效果,人才培训网转自#xff1a;http://starting.iteye.com/blog/1039809 主要实现的功能有放大#xff0c;缩小#xff0c;获取地图大小#xff0c;平移#xff0c;线路测量#xff0c;面积测量#xff0c;拉宽功能#xff0c;显示标注#xff0c;移除标注#xff0c;画多边形获取经…转自http://starting.iteye.com/blog/1039809 主要实现的功能有放大缩小获取地图大小平移线路测量面积测量拉宽功能显示标注移除标注画多边形获取经纬度坐标。根据经纬度坐标显示多边形。地图切换图层控制等功能。 ?xml version1.0 encodingUTF-8?!DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN DTD/xhtml1-strict.dtdhtml xmlnshttp://www.w3.org/1999/xhtml head titleOpenLayers map preview/title !-- Import OL CSS, auto import does not work with our minified OL.js build -- link relstylesheet typetext/css href../theme/default/style.css/ link relstylesheet href../theme/default/google.css typetext/css !-- Basic CSS definitions -- style typetext/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 srchttp://maps.google.com/maps/api/js?sensorfalse/script script deferdefer typetext/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 zbnew 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 sup2/ 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 markArrnew 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 οnlοadinit() div idtoolbar styledisplay: input typebutton value放大 οnclickzoomIn()/ input typebutton value缩小 οnclickzoomOut()/ input typebutton value获取地图大小 οnclickgetSize()/ input typebutton value平移 οnclicktoggleControl(none)/ input typebutton value线路测量 οnclicktoggleControl(line)/ input typebutton value测量面积 οnclicktoggleControl(polygon)/ input typebutton valueshift拉框 οnclickboxExtend()/ input typebutton value显示标注 οnclickaddMarker()/ input typebutton value移除标注 οnclickremoveMarker()/ input typebutton value画多边形获取经纬度坐标 οnclicktest()/ /div div idmap /div div idwrapper div idlocation经纬度坐标/div div idscale /div div idoutput /div /div div idxystr/div div idnodelist emClick on the map to get feature info/em /div /body/html  转载于:https://www.cnblogs.com/cugwx/p/3725304.html