Openlayers测量距离与面积的实现方法

本文实例为大家分享了Openlayers测量距离与面积的具体代码，供大家参考，具体内容如下
1、地图测量功能
一般的地图的测量功能主要表现在两个方面，一是测量距离，一是测量面积；面积的测量是根据鼠标绘制的范围，通过地理坐标系的转换而计算出实际面积大小，距离的测量是根据鼠标在地图上绘制的点，实时计算出两点之间的实际距离，下面我们就在Openlayers3中来实现这一功能；
2、代码实现
				?

									<!DOCTYPE html>

									<html xmlns="http://www.w3.org/1999/xhtml">

									<head>

									<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

									 <title></title>

									 <script src="../lib/ol/ol.js"></script>

									 <link href="../css/ol.css" rel="stylesheet" />

									 <script src="../lib/jquery/jquery-1.8.2.js"></script>

									 <link href="../css/bootstrap.min.css" rel="stylesheet" />

									 <script src="../lib/bootstrap/bootstrap.min.js"></script>

									 <style type="text/css">

									  #map {

									   width: 100%;

									   height: 100%;

									   position: absolute;

									  }

									  #menu {

									   float: left;

									   position: absolute;

									   bottom: 10px;

									   left: 10px;

									   z-index: 2000;

									  }

									  .checkbox {

									   left: 20px;

									  }

									  /**

									  * 提示框的样式信息

									  */

									  .tooltip {

									   position: relative;

									   background: rgba(0, 0, 0, 0.5);

									   border-radius: 4px;

									   color: white;

									   padding: 4px 8px;

									   opacity: 0.7;

									   white-space: nowrap;

									  }

									  .tooltip-measure {

									   opacity: 1;

									   font-weight: bold;

									  }

									  .tooltip-static {

									   background-color: #ffffff;

									   color: black;

									   border: 1px solid white;

									  }

									   .tooltip-measure:before,

									   .tooltip-static:before {

									    border-top: 6px solid rgba(0, 0, 0, 0.5);

									    border-right: 6px solid transparent;

									    border-left: 6px solid transparent;

									    content: "";

									    position: absolute;

									    bottom: -6px;

									    margin-left: -7px;

									    left: 50%;

									   }

									   .tooltip-static:before {

									    border-top-color: #ffffff;

									   }

									  #scalebar {

									   float: left;

									   margin-bottom: 10px;

									  }

									 </style>

									 <script type="text/javascript">

									  $(function () {

									   //初始化地图

									   var map = new ol.Map({

									    target: 'map',

									    layers: [

									     new ol.layer.Tile({

									      source:new ol.source.OSM()

									     })

									    ],

									    view: new ol.View({

									     center: new ol.proj.fromLonLat([114.4250, 23.0890]),

									     zoom: 18,

									     maxZoom: 20

									    })

									   });

									   //定义矢量数据源

									   var source = new ol.source.Vector();

									   //定义矢量图层

									   var vector = new ol.layer.Vector({

									    source: source,

									    style: new ol.style.Style({

									     fill: new ol.style.Fill({

									      color:'rgba(255,255,255,0.2)'

									     }),

									     stroke: new ol.style.Stroke({

									      color: '#e21e0a',

									      width:2

									     }),

									     image: new ol.style.Circle({

									      radius: 5,

									      fill: new ol.style.Fill({

									       color:'#ffcc33'

									      })

									     })

									    })

									   });

									   //将矢量图层添加到地图中

									   map.addLayer(vector);

									   //添加比例尺控件

									   var scaleLineControl = new ol.control.ScaleLine({

									    units: 'metric',

									    target: 'scalebar',

									    className: 'ol-scale-line'

									   });

									   map.addControl(scaleLineControl);

									   //创建一个WGS84球体对象

									   var wgs84Sphere = new ol.Sphere(6378137);

									   //创建一个当前要绘制的对象

									   var sketch = new ol.Feature();

									   //创建一个帮助提示框对象

									   var helpTooltipElement;

									   //创建一个帮助提示信息对象

									   var helpTooltip;

									   //创建一个测量提示框对象

									   var measureTooltipElement;

									   //创建一个测量提示信息对象

									   var measureTooltip;

									   //继续绘制多边形的提示信息

									   var continuePolygonMsg = 'Click to continue drawing the polygon';

									   //继续绘制线段的提示信息

									   var continueLineMsg = 'Click to continue drawing the line';

									   //鼠标移动触发的函数

									   var pointerMoveHandler = function (evt) {

									    //Indicates if the map is currently being dragged. 

									    //Only set for POINTERDRAG and POINTERMOVE events. Default is false.

									    //如果是平移地图则直接结束

									    if (evt.dragging) {

									     return;

									    }

									    //帮助提示信息

									    var helpMsg = 'Click to start drawing';

									    if (sketch) {

									     //Get the feature's default geometry. 

									     //A feature may have any number of named geometries.

									     //获取绘图对象的几何要素

									     var geom = sketch.getGeometry();

									     //如果当前绘制的几何要素是多边形，则将绘制提示信息设置为多边形绘制提示信息

									     //如果当前绘制的几何要素是多线段，则将绘制提示信息设置为多线段绘制提示信息

									     if (geom instanceof ol.geom.Polygon) {

									      helpMsg = continuePolygonMsg;

									     } else if (geom instanceof ol.geom.LineString) {

									      helpMsg = continueLineMsg;

									     }

									    }

									    //设置帮助提示要素的内标签为帮助提示信息

									    helpTooltipElement.innerHTML = helpMsg;

									    //设置帮助提示信息的位置

									    //The coordinate in view projection corresponding to the original browser event.

									    helpTooltip.setPosition(evt.coordinate);

									    //移除帮助提示要素的隐藏样式

									    $(helpTooltipElement).removeClass('hidden');

									   };

									   //触发pointermove事件

									   map.on('pointermove', pointerMoveHandler);

									   //当鼠标移除地图视图的时为帮助提示要素添加隐藏样式

									   $(map.getViewport()).on('mouseout', function () {

									    $(helpTooltipElement).addClass('hidden');

									   });

									   //获取大地测量复选框

									   var geodesicCheckbox = document.getElementById('geodesic');

									   //获取类型

									   var typeSelect = document.getElementById('type');

									   //定义一个交互式绘图对象

									   var draw;

									   //添加交互式绘图对象的函数

									   function addInteraction() {

									    // 获取当前选择的绘制类型

									    var type = typeSelect.value == 'area' ? 'Polygon' : 'LineString';

									    //创建一个交互式绘图对象

									    draw = new ol.interaction.Draw({

									     //绘制的数据源

									     source: source,

									     //绘制类型

									     type: type,

									     //样式

									     style: new ol.style.Style({

									      fill: new ol.style.Fill({

									       color:'rgba(255,255,255,0.2)'

									      }),

									      stroke: new ol.style.Stroke({

									       color: 'rgba(0,0,0,0.5)',

									       lineDash: [10, 10],

									       width:2

									      }),

									      image: new ol.style.Circle({

									       radius: 5,

									       stroke: new ol.style.Stroke({

									        color:'rgba(0,0,0,0.7)'

									       }),

									       fill: new ol.style.Fill({

									        color: 'rgba(255,255,255,0.2)'

									       })

									      })

									     })

									    });

									    //将交互绘图对象添加到地图中

									    map.addInteraction(draw);

									    //创建测量提示框

									    createMeasureTooltip();

									    //创建帮助提示框

									    createHelpTooltip();

									    //定义一个事件监听

									    var listener;

									    //定义一个控制鼠标点击次数的变量

									    var count = 0;

									    //绘制开始事件

									    draw.on('drawstart', function (evt) {

									     //The feature being drawn.

									     sketch = evt.feature;

									     //提示框的坐标

									     var tooltipCoord = evt.coordinate;

									     //监听几何要素的change事件

									     //Increases the revision counter and dispatches a 'change' event.

									     listener = sketch.getGeometry().on('change', function (evt) {

									      //The event target.

									      //获取绘制的几何对象

									      var geom = evt.target;

									      //定义一个输出对象，用于记录面积和长度

									      var output;

									      if (geom instanceof ol.geom.Polygon) {

									       map.removeEventListener('singleclick');

									       map.removeEventListener('dblclick');

									       //输出多边形的面积

									       output = formatArea(geom);

									       //Return an interior point of the polygon.

									       //获取多变形内部点的坐标

									       tooltipCoord = geom.getInteriorPoint().getCoordinates();

									      } else if (geom instanceof ol.geom.LineString) {

									       //输出多线段的长度

									       output = formatLength(geom);

									       //Return the last coordinate of the geometry.

									       //获取多线段的最后一个点的坐标

									       tooltipCoord = geom.getLastCoordinate();

									      }

									      //设置测量提示框的内标签为最终输出结果

									      measureTooltipElement.innerHTML = output;

									      //设置测量提示信息的位置坐标

									      measureTooltip.setPosition(tooltipCoord);

									     });

									     //地图单击事件

									     map.on('singleclick', function (evt) {

									      //设置测量提示信息的位置坐标，用来确定鼠标点击后测量提示框的位置

									      measureTooltip.setPosition(evt.coordinate);

									      //如果是第一次点击，则设置测量提示框的文本内容为起点

									      if (count == 0) {

									       measureTooltipElement.innerHTML = "起点";

									      }

									      //根据鼠标点击位置生成一个点

									      var point = new ol.geom.Point(evt.coordinate);

									      //将该点要素添加到矢量数据源中

									      source.addFeature(new ol.Feature(point));

									      //更改测量提示框的样式，使测量提示框可见

									      measureTooltipElement.className = 'tooltip tooltip-static';

									      //创建测量提示框

									      createMeasureTooltip();

									      //点击次数增加

									      count++;

									     });

									     //地图双击事件

									     map.on('dblclick', function (evt) {

									      //根据

									      var point = new ol.geom.Point(evt.coordinate);

									      source.addFeature(new ol.Feature(point));

									     });

									    }, this);

									    //绘制结束事件

									    draw.on('drawend', function (evt) {

									     count = 0;

									     //设置测量提示框的样式

									     measureTooltipElement.className = 'tooltip tooltip-static';

									     //Set the offset for this overlay.

									     //设置偏移量

									     measureTooltip.setOffset([0, -7]);

									     //清空绘制要素

									     sketch = null;

									     //清空测量提示要素

									     measureTooltipElement = null;

									     //创建测量提示框

									     createMeasureTooltip();

									     //Removes an event listener using the key returned by on() or once().

									     //移除事件监听

									     ol.Observable.unByKey(listener);

									     //移除地图单击事件

									     map.removeEventListener('singleclick');

									    }, this);

									   }

									   //创建帮助提示框

									   function createHelpTooltip() {

									    //如果已经存在帮助提示框则移除

									    if (helpTooltipElement) {

									     helpTooltipElement.parentNode.removeChild(helpTooltipElement);

									    }

									    //创建帮助提示要素的div

									    helpTooltipElement = document.createElement('div');

									    //设置帮助提示要素的样式

									    helpTooltipElement.className = 'tooltip hidden';

									    //创建一个帮助提示的覆盖标注

									    helpTooltip = new ol.Overlay({

									     element: helpTooltipElement,

									     offset: [15, 0],

									     positioning:'center-left'

									    });

									    //将帮助提示的覆盖标注添加到地图中

									    map.addOverlay(helpTooltip);

									   }

									   //创建测量提示框

									   function createMeasureTooltip() {

									    //创建测量提示框的div

									    measureTooltipElement = document.createElement('div');

									    measureTooltipElement.setAttribute('id','lengthLabel');

									    //设置测量提示要素的样式

									    measureTooltipElement.className = 'tooltip tooltip-measure';

									    //创建一个测量提示的覆盖标注

									    measureTooltip = new ol.Overlay({

									     element: measureTooltipElement,

									     offset: [0, -15],

									     positioning:'bottom-center'

									    });

									    //将测量提示的覆盖标注添加到地图中

									    map.addOverlay(measureTooltip);

									   }

									   //测量类型发生改变时触发事件

									   typeSelect.onchange = function () {

									    //移除之前的绘制对象

									    map.removeInteraction(draw);

									    //重新进行绘制

									    addInteraction();

									   };

									   //格式化测量长度

									   var formatLength = function (line) {

									    //定义长度变量

									    var length;

									    //如果大地测量复选框被勾选，则计算球面距离

									    if (geodesicCheckbox.checked) {

									     //Return the coordinates of the linestring.

									     //获取坐标串

									     var coordinates = line.getCoordinates();

									     //初始长度为0

									     length = 0;

									     //获取源数据的坐标系

									     var sourceProj = map.getView().getProjection();

									     //进行点的坐标转换

									     for (var i = 0; i < coordinates.length - 1; i++) {

									      //第一个点

									      var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');

									      //第二个点

									      var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');

									      //获取转换后的球面距离

									      //Returns the distance from c1 to c2 using the haversine formula.

									      length += wgs84Sphere.haversineDistance(c1,c2);

									     }

									    } else {

									     //Return the length of the linestring on projected plane.

									     //计算平面距离

									     length = Math.round(line.getLength() * 100) / 100;

									    }

									    //定义输出变量

									    var output;

									    //如果长度大于1000，则使用km单位，否则使用m单位

									    if (length > 1000) {

									     output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km'; //换算成KM单位

									    } else {

									     output = (Math.round(length * 100) / 100) + ' ' + 'm'; //m为单位

									    }

									    return output;

									   };

									   //格式化测量面积

									   var formatArea = function (polygon) {

									    //定义面积变量

									    var area;

									    //如果大地测量复选框被勾选，则计算球面面积

									    if (geodesicCheckbox.checked) {

									     //获取初始坐标系

									     var sourceProj = map.getView().getProjection();

									     //Make a complete copy of the geometry.

									     //Transform each coordinate of the geometry from one coordinate reference system to another. 

									     //The geometry is modified in place. For example, a line will be transformed to a line and a circle to a circle.

									     //If you do not want the geometry modified in place, first clone() it and then use this function on the clone.

									     //克隆该几何对象然后转换坐标系

									     var geom = polygon.clone().transform(sourceProj, 'EPSG:4326');

									     //Return the Nth linear ring of the polygon geometry. 

									     //Return null if the given index is out of range. 

									     //The exterior linear ring is available at index 0 and the interior rings at index 1 and beyond.

									     //获取多边形的坐标系

									     var coordinates = geom.getLinearRing(0).getCoordinates();

									     //Returns the geodesic area for a list of coordinates.

									     //获取球面面积

									     area = Math.abs(wgs84Sphere.geodesicArea(coordinates));

									    } else {

									     //获取平面面积

									     area = polygon.getArea();

									    }

									    //定义输出变量

									    var output;

									    //当面积大于10000时，转换为平方千米，否则为平方米

									    if (area > 10000) {

									     output = (Math.round(area/1000000*100)/100) + ' ' + 'km<sup>2</sup>';

									    } else {

									     output = (Math.round(area*100)/100) + ' ' + 'm<sup>2</sup>';

									    }

									    return output;

									   };

									   //添加交互绘图对象

									   addInteraction();

									  });

									 </script>

									</head>

									<body>

									 <div id="map">

									  <div id="menu">

									   <label>测量类型选择</label>

									   <select id="type">

									    <option value="length">长度</option>

									    <option value="area">面积</option>

									   </select>

									   <label class="checkbox"><input type="checkbox" id="geodesic" />使用大地测量</label>

									  </div>

									 </div>

									 <div id="scalebar"></div>

									</body>

									</html>