Openlayers测量距离与⾯积的实现⽅法本⽂实例为⼤家分享了Openlayers测量距离与⾯积的具体代码，供⼤家参考，具体内容如下1、地图测量功能⼀般的地图的测量功能主要表现在两个⽅⾯，⼀是测量距离，⼀是测量⾯积；⾯积的测量是根据⿏标绘制的范围，通过地理坐标系的转换⽽计算出实际⾯积⼤⼩，距离的测量是根据⿏标在地图上绘制的点，实时计算出两点之间的实际距离，下⾯我们就在Openlayers3中来实现这⼀功能；2、代码实现<!DOCTYPE html><html xmlns="/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;}float: left;margin-bottom: 10px;}</style><script type="text/javascript">$(function () {//初始化地图var map = new ol.Map({target: 'map',layers: [new yer.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 yer.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';//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;//绘制开始事件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);}//创建帮助提⽰要素的divhelpTooltipElement = document.createElement('div');//设置帮助提⽰要素的样式helpTooltipElement.className = 'tooltip hidden';//创建⼀个帮助提⽰的覆盖标注helpTooltip = new ol.Overlay({element: helpTooltipElement,offset: [15, 0],positioning:'center-left'});//将帮助提⽰的覆盖标注添加到地图中map.addOverlay(helpTooltip);}//创建测量提⽰框function createMeasureTooltip() {//创建测量提⽰框的divmeasureTooltipElement = 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();//初始长度为0length = 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 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>3、结果展⽰测量距离测量⾯积此外，还能勾选使⽤⼤地测量的复选框，进⾏球⾯距离和⾯积的测量以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
