OpenLayers中长度测量和面积测量等功能的实现2
2014-09-27 09:49
423 查看
本文演示用另一种方法实现测量功能。
先上结果图
功能实现:
1. 界面***
在HTMLbody主体中添加相应代码为:
2. CSS定义
3. 初始化init()方法实现,主要是加载地图和初始化测量控件
4. 测量功能实现
5. 功能展示
先上结果图
功能实现:
1. 界面***
在HTMLbody主体中添加相应代码为:
<div id="map" class="smallmap"></div> <div id="options"> <divid="output"></div> <ulid="controlToggle"> <input type="button"name="type" value="长度"id="line" onClick="toggleControl(this);"checked="false"></input> <input type="button"name="type" value="面积"id="polygon" onClick="toggleControl(this);"checked="false"></input> <input type="button"name="type" value="取消"id="cancel" onClick="cancel(this);"checked="false"></input> <li> <input type="checkbox"name="geodesic" id="geodesicToggle"onclick="toggleGeodesic(this);" /> <label for="geodesicToggle">球面测量</label> </li> </ul> </div> <divid='map_element' style='width:1400px;height:800px;'></div> </body>
2. CSS定义
<styletype="text/css"> #controlToggle li { list-style: none; } #options { position: relative; width: 400px; } #output { float: right; } /* avoid pink tiles */ .olImageLoadError { background-color: transparent !important; } </style>
3. 初始化init()方法实现,主要是加载地图和初始化测量控件
functioninit(){ map = newOpenLayers.Map('map_element'); var wmsLayer= newOpenLayers.Layer.WMS( "global", "http://192.168.1.50:8080/geoserver/karl/wms", {layers: "global"} ); map.addLayer(wmsLayer); map.addControl(newOpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.MousePosition()); // style the sketch fancy 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: 0.4, strokeColor:"#666666", fillColor: "red", fillOpacity: 0.3 } }; var style = new OpenLayers.Style(); style.addRules([ new OpenLayers.Rule({symbolizer:sketchSymbolizers}) ]); var styleMap = newOpenLayers.StyleMap({"default": style}); // allow testing of specificrenderers via "?renderer=Canvas", etc var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; renderer = (renderer) ? [renderer]: OpenLayers.Layer.Vector.prototype.renderers; measureControls = { line: newOpenLayers.Control.Measure( OpenLayers.Handler.Path, { persist: true, handlerOptions: { layerOptions: { renderers:renderer, styleMap:styleMap } } } ), polygon: newOpenLayers.Control.Measure( OpenLayers.Handler.Polygon,{ persist: true, handlerOptions: { layerOptions: { renderers:renderer, styleMap:styleMap } } } ) }; var control; for(var key in measureControls) { control = measureControls[key]; control.events.on({ "measure":handleMeasurements, "measurepartial":handleMeasurements }); map.addControl(control); } map.zoomToMaxExtent(); document.getElementById('noneToggle').checked = true; }
4. 测量功能实现
functionhandleMeasurements(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 toggleControl(element) { //alert("Hello"); toggleImmediate(element); for(key in measureControls) { var control =measureControls[key]; if(element.id == key &&element.checked) { control.activate(); } else { control.deactivate(); } } } function cancel(element) { //measureControl.deactivate(); //map.removeControl(measureControl); for(key in measureControls) { var control =measureControls[key]; if(control != null) { control.deactivate(); map.removeControl(control); } } } function toggleGeodesic(element) { for(key in measureControls) { var control =measureControls[key]; control.geodesic =element.checked; } } function toggleImmediate(element) { for(key in measureControls) { var control =measureControls[key]; control.setImmediate(element.checked); } }
5. 功能展示
相关文章推荐
- OpenLayers中长度测量和面积测量等功能的实现
- AE+C#实现缩放坐标比例尺长度面积量测输出图片等功能
- 1、GeometryService计算面积和长度(Calculate_Feature_Length_Or_Area)功能实现
- 百度地图实现测量面积和测量距离功能
- AE+C#实现缩放坐标比例尺长度面积量测输出图片等功能
- AE+C#实现缩放坐标比例尺长度面积量测输出图片等功能
- 请用c++ 实现stl中的string类,实现构造,拷贝构造,析构,赋值,比较,字符串相加,获取长度及子串等功能。
- JAVA--第五周实验--任务1--封装一类三角形对象Triangle,并实现一些求周长求面积的功能。
- JAVA--第五周实验--任务3--封装一类圆形对象Triangle,并实现一些求周长求面积的功能。
- php 实现文章摘要功能,截取字符串的长度函数
- MySQL中GROUP_CONCAT函数长度限制处理/实现行转列的功能
- 编写一个类,该类具有统计文件长度,实现文件复制的函数。 其中复制功能函数如: void copy(string srcFileName,string targetFileName);
- 编写一个类,该类具有统计文件长度,实现文件复制的函数。 其中复制功能函数如: void copy(string srcFileName,string targetFileName);
- 基于ArcEngine实现分组统计面积的功能
- 测量面积的简单实现
- Arcgis for Js之GeometryService实现测量距离和面积
- 利用51系列单片机定时器功能实现测量脉冲宽度
- 基于ArcEngine实现分组统计面积的功能
- OpenLayers的地图上的距离和面积的测量
- openlayers通过pgrouting规划路径实现轨迹播放功能