OpenLayers3 学习心得（五）——测量

测量是GIS系统中一个比较实用的小工具，使我们可以粗略的观察两个目标点的距离，粗略的测量一个面的面积。例如我们要从地铁口到附近的公交站通过直线测距就能方便的知道我们步行的距离（太远就打车哈哈）,对于规划地块审批人员通过面积测量就能很快的知道规划的面积与提交审批的面积是否相同等。

1核心方法

Ol3的几何类提供了相应的方法，LineString.getLenth()和Polygon.get getArea() 返回的结果单位默认为m。

2实现方法

a) 启动绘图

通过ol提供的绘图方法，实现用户的交互，动态显示测量的轨迹。

b) 绘图开始

开始后创建一个记录<li/>用于保存测量的结果，并通过变量sketch保存绘制图形的Feature(要素)：

draw.on('drawstart',function(evt){
        sketch=evt.feature;
        sketchElement=document.createElement('li');
        var outputList=document.getElementById('measureOutput');

        if(outputList.childNodes){
            outputList.insertBefore(sketchElement,outputList.firstChild)
        }
        else{
            outputList.appendChild(sketchElement);
        }
    });

c) 绘图结束

结束清除本次测量的缓存：

draw.on('drawend',function(evt){
        sketch=null;
        sketchElement=null;
    });

d) 计算测量大小

通过鼠标移动事件，实时获取用户绘制图形的长度或面积大小：

var mouseMoveHandler=function(evt){
    if(sketch){
        var output;
        var geom=(sketch.getGeometry());
        if(geom instanceof ol.geom.Polygon){
            output=formateArea(geom);
        }
        else if(geom instanceof  ol.geom.LineString){
            output=formateLength(geom);
        }
        sketchElement.innerHTML=output;
    }
}

格式化为长度和面积的函数：

var formateLength=function(line){
    var length=Math.round(line.getLength()*100)/100;
    var output;
    if(length>100){
        output=(Math.round(length/1000*100)/100)+' '+'km';
    }
    else{
        output=(Math.round(length*100)/100)+' '+'m';
    }
    return output;
};
var formateArea=function(polygon){
    var area=polygon.getArea();
    var output;
    if(area>10000){
        output=(Math.round(area/100000*100)/100)+' '+ 'km<sup>2</sup>';
    }
    else{
        output=(Math.round(area*100)/100)+' '+'m<sup>2</sup>';
    }
    return output;
};

运行结果

写在最后，系列的源码下载地址：

http://download.csdn.net/detail/xiaohou66/8179759

秒客网

OpenLayers3 学习心得（五）——测量

相关文章