Leaflet学习，距离和面积测量实现

今天的主要内容是怎么在地图上绘制polygon并计算面积，绘制polyline并计算距离；

先介绍需要用到的几个工具；

首先是面积的计算，使用的turf.js中的area方法；

距离的计算，使用的是turf.js的distance方法；

绘制面和线使用的是leaflet的polygon和polyline;

实现的思路是：

第一，单击地图，获取点击点坐标，记录下来；

第二，每次点击的同时，将点击点和线绘制在地图上；

第三，当双击地图时，完成绘制，此时禁止点击和移动事件，并计算面积；

第四，使用popup在绘制面的中心位置展示面积大小；

距离的测量类似，不进行赘述；

代码如下：

 measureArea () {
 this.map.on("mousemove", e => {
 var popup = L.popup().setLatLng(e.latlng).setContent('点击地图开始绘制');
 this.map.openPopup(popup);
 })
 var pointStyle = { radius: 80, color: 'green', fillColor: 'green', fillOpacity: 1 };
 var polygonStyle = { color: 'red', fillColor: 'red', fillOpacity: 0.5 };
 var polygonPoints = []
 var polygon = L.polygon([], polygonStyle);
 var point;
 var tempLines = new L.polygon([], { color: 'red', fillColor: 'red', fillOpacity: 0.1, dashArray: 5 }).addTo(this.map);
 var ls = []
 this.map.on('click', e => {
 this.map.off("mousemove")
 point = L.circle([e.latlng.lat, e.latlng.lng], pointStyle).addTo(this.map);
 polygon.addLatLng([e.latlng.lat, e.latlng.lng]).addTo(this.map);
 polygonPoints.push([e.latlng.lat, e.latlng.lng]);
 this.map.on("mousemove", e => {
 var popup1 = L.popup().setLatLng(e.latlng).setContent('双击地图停止绘制，输出面积');
 this.map.openPopup(popup1);
 if (polygonPoints.length > 0) {
 ls = [polygonPoints[polygonPoints.length - 1], [e.latlng.lat, e.latlng.lng], polygonPoints[0]]
 tempLines.setLatLngs(ls)
 }
 })
 })
 this.map.on('dblclick', () => {
 this.map.off("click");
 this.map.off("mousemove");
 this.map.removeLayer(tempLines);
 var firstPoint = polygonPoints[0];
 polygonPoints.push(firstPoint);
 var turfPolygon = turf.polygon([polygonPoints]);
 var center = turf.centerOfMass(turfPolygon);
 var area = turf.area(turfPolygon);
 var popup = L.popup().setLatLng(center.geometry.coordinates).setContent('面积为：' + (area / 1000000).toFixed(3).toString() + "平方公里");
 this.map.openPopup(popup);
 })
 }

效果如下：

距离测量效果图：