OpenLayers中长度测量和面积测量等功能的实现-阿里云开发者社区

开发者社区> 龙盛国际> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10077 0
微信公众号-- 微信分享功能(分享到朋友和朋友圈显示图片和简介)
页面设置一个隐藏的图片,宽高都是300像素,微信就会抓取这张图片做为分享图片
15075 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13884 0
Routing 功能概述 - 每天5分钟玩转 OpenStack(98)
路由服务(Routing)提供跨 subnet 互联互通功能。 例如前面我们搭建了实验环境: cirros-vm1      172.16.100.3        vlan100 cirros-vm3      172.16.101.3        vlan101 这两个 instance 要通信必须借助 router。
765 0
OpenCV For Java环境搭建与功能演示
OpenCV概述 OpenCV做为功能强大的计算机视觉开源框架,包含了500多个算法实现,而且还在不断增加,其最新版本已经更新到3.2。其SDK支持Android与Java平台开发,对于常见的图像处理需求几乎都可以满足,理应成为广大Java与Android程序员的首先的图像处理框架。
1159 0
openlayers i查询功能(矢量图层、postgresql空间数据库)
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/76915464 openlayers i查询功能(矢量图层、postgresql空间数据库) http://www.
973 0
+关注
龙盛国际
南京师范大学虚拟地理环境教育部重点实验室,研究方向为地图综合,并行计算和云计算相关领域。 从事电子地图开发,室内导航开发。 QQ:592701357
211
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载