OpenLayers中长度测量和面积测量等功能的实现
栏目：互联网时间：2014-10-06 08:00:00
功能要求如下：要求能在给定地图上测量长度和面积。此处实现主要是调用Openlayers接口实现。
一、界面设置
在HTML界面中设置好测量按钮的布局，代码如下图所示：
<divclass="measureoptions">
<input type="button"id="measureButton" onClick="measureClick()" checked="false" value="测量"></input>
<input type="button"id="calcelMeasureButton" onClick="cancelClick()" checked="false" value="取消"></input>
<div class="section">
<strong>测量</strong><br/>
长度: <inputid="path" type="radio"onClick="changeHandler(this)" checked name="layer"/>
面积: <inputid="polygon" type="radio"onClick="changeHandler(this)" name="layer"/>
</div>
<div class="section">
<strong>选择</strong><br/>
球面: <inputid="geodesic" type="checkbox"onClick="changeGeodesic(this)" name="layer"/>
实时: <inputid="immediate" type="checkbox"onClick="changeImmediate(this)" name="layer"/>
</div>
<div class="section">
<strong>测量结果:</strong><span id="value"></span>
</div>
</div>
<divid='map_element' style='width:1400px;height:500px;'>
</div>
二、地图加载
地图加载主要在函数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);
if(!map.getCenter())
{
map.zoomToMaxExtent();
}
map.zoomToMaxExtent();
}
三、测量相关函数实现
首先定义全局变量var measureControl
varmeasureControl = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
persist: true,
eventListeners: {
'measure':measure,
'measurepartial':measurepartial
}
});
测量函数：
functionmeasureClick() {
//var path =document.getElementById('path').get('checked');
var path =document.getElementById("path").checked;
var polygon =document.getElementById('polygon').checked;
//var regular =document.getElementById('regular').checked;
if(document.getElementById("measureButton").checked){
if(path) {
measureControl.updateHandler(OpenLayers.Handler.Path, {persist: true});
} else if(polygon) {
measureControl.updateHandler(OpenLayers.Handler.Polygon, {persist:true});
} else if(regular) {
measureControl.updateHandler(OpenLayers.Handler.RegularPolygon,{persist: true});
}
map.addControl(measureControl);
measureControl.activate();
} else {
measureControl.deactivate();
map.removeControl(measureControl);
}
document.getElementById('value').innerHTML = "";
}
取消测量函数：
functioncancelClick()
{
measureControl.deactivate();
map.removeControl(measureControl);
}
相关事件：
functionmeasure(event) {
var message = event.measure + "" + event.units;
if(event.order>1) {
message += "2";
}
document.getElementById('value').innerHTML = message;
}
function measurepartial(event) {
var message = event.measure + "" + event.units;
document.getElementById('value').innerHTML = message;
}
function changeHandler(checked){
measureClick();
}
额外功能，主要包括实时显示测量结果和球面测量
functionchangeImmediate(element) {
measureControl.setImmediate(element.checked);
if(measureControl.immediate)
{alert("True");}
else
{alert("False");}
}
function changeGeodesic(checked) {
measureControl.geodesic = checked;
}
四、运行结果
本文源码下载地址：http://download.csdn.net/detail/longshengguoji/7980655
------分隔线----------------------------
------分隔线----------------------------