OpenLayers中长度测量和面积测量等功能的实现

功能要求如下：要求能在给定地图上测量长度和面积。此处实现主要是调用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