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

时间：2021-05-26

本文实例为大家分享了Openlayers测量距离与面积的具体代码，供大家参考，具体内容如下

1、地图测量功能

一般的地图的测量功能主要表现在两个方面，一是测量距离，一是测量面积；面积的测量是根据鼠标绘制的范围，通过地理坐标系的转换而计算出实际面积大小，距离的测量是根据鼠标在地图上绘制的点，实时计算出两点之间的实际距离，下面我们就在Openlayers3中来实现这一功能；

2、代码实现

<!DOCTYPE html><html xmlns="http://plete 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、结果展示

测量距离

测量面积

此外，还能勾选使用大地测量的复选框，进行球面距离和面积的测量

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章