leaflet 實現 測距、測面、清除測量的功能

參考文檔：https://my.oschina.net/u/4321106/blog/3528070/print

1、先定義需要用到的全局變量

 var DRAWING = false; //是否正在繪制
 var DRAWLAYERS = [];
 var BarDRAWLAYERS = [];
 var ISMEASURE = false; //是否是量距
 var MEASURETOOLTIP; //量距提示
 var MEASUREAREATOOLTIP; //量面提示
 var MEASURERESULT = 0; //測量結果

 var DRAWPOLYLINE; //繪制的折線
 var DRAWMOVEPOLYLINE; //繪制過程中的折線
 var DRAWPOLYLINEPOINTS = []; //繪制的折線的節點集

 var DRAWPOLYGON; //繪制的面
 var DRAWMOVEPOLYGON; //繪制過程中的面
 var DRAWPOLYGONPOINTS = []; //繪制的面的節點集

2、測距

<button type="button" class="btn btn-sm btn-default" id="juliMeasure">測距</button>

$('#juliMeasure').click(function() {
    ISMEASURE = true;
    init.startDrawLine();
 }),
startDrawLine(func) {
         MEASURERESULT = 0; //測量結果
         map.getContainer().style.cursor = 'crosshair';
         var shapeOptions = {
                 color: '#F54124',
                 weight: 3,
                 opacity: 0.8,
                 fill: false,
                 clickable: true
             },
             DRAWPOLYLINE = new L.Polyline([], shapeOptions); //繪制的折線
         map.addLayer(DRAWPOLYLINE);
         if (ISMEASURE) { //是否是量距
             MEASURETOOLTIP = new L.Tooltip(map); //量距提示
         }
         map.on('mousedown', onClick);
         map.on('dblclick', onDoubleClick);

         function onClick(e) {
             DRAWING = true; //是否正在繪制
             DRAWPOLYLINEPOINTS.push(e.latlng); //繪制的折線的節點集
             if (DRAWPOLYLINEPOINTS.length > 1 && ISMEASURE) { //是否是量距
                 MEASURERESULT += e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 2]);
             }
             DRAWPOLYLINE.addLatLng(e.latlng); //繪制的折線
             map.on('mousemove', onMove);
         }

         function onMove(e) {
             if (DRAWING) { //是否正在繪制
                 if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) { //繪制過程中的折線
                     map.removeLayer(DRAWMOVEPOLYLINE);
                 }
                 var prevPoint = DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1];
                 DRAWMOVEPOLYLINE = new L.Polyline([prevPoint, e.latlng], shapeOptions);
                 map.addLayer(DRAWMOVEPOLYLINE);
                 if (ISMEASURE) {
                     var distance = MEASURERESULT + e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1]);
                     /* MEASURETOOLTIP.updatePosition(e.latlng); //量距提示
                      MEASURETOOLTIP.updateContent({
                          text: '單擊確定點，雙擊結束！',
                          subtext: "總長：" + (distance / 1000).toFixed(2) + "公里"
                      });*/
                 }
             }
         }

         function onDoubleClick(e) {
             map.getContainer().style.cursor = '';
             /*顯示兩點距離*/
             var distance = MEASURERESULT + e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1]);
             marker = new L.Marker(e.latlng, { draggable: false });
             map.addLayer(marker);
             marker.bindPopup((distance / 1000).toFixed(2) + "公里").openPopup();
             if (DRAWING) {
                 if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) {
                     map.removeLayer(DRAWMOVEPOLYLINE);
                     DRAWMOVEPOLYLINE = null;
                 }
                 BarDRAWLAYERS.push(DRAWPOLYLINE);
                 DRAWPOLYLINEPOINTS = [];
                 DRAWING = false;
                 ISMEASURE = false;
                 map.off('mousedown');
                 map.off('mousemove');
                 map.off('dblclick');
             }
         }
     },

3、測面

<button type="button" class="btn btn-sm btn-default" id="mianjiMeasure">測面</button>

 /*面積量算*/
    $('#mianjiMeasure').click(function() {
            ISMEASURE = true;
            init.startDrawPolygon()
     })
  /*多邊形*/
     startDrawPolygon(func) {
         MEASURERESULT = 0;
         map.getContainer().style.cursor = 'crosshair';
         map.on('mousedown', function(e) {
             DRAWING = true;
             DRAWPOLYGONPOINTS.push(e.latlng);
             DRAWPOLYGON.addLatLng(e.latlng);
         });
         map.on('mousemove', function(e) {
             if (DRAWING) {
                 if (DRAWMOVEPOLYGON != undefined && DRAWMOVEPOLYGON != null) {
                     map.removeLayer(DRAWMOVEPOLYGON);
                 }
                 var prevPoint = DRAWPOLYGONPOINTS[DRAWPOLYGONPOINTS.length - 1];
                 var firstPoint = DRAWPOLYGONPOINTS[0];
                 DRAWMOVEPOLYGON = new L.Polygon([firstPoint, prevPoint, e.latlng], shapeOptions);
                 map.addLayer(DRAWMOVEPOLYGON);
             }
         });
         map.on('dblclick', function(e) {
             map.getContainer().style.cursor = '';
             var tempPoints = [];
             for (var i = 0; i < DRAWPOLYGONPOINTS.length; i++) {
                 tempPoints.push(DRAWPOLYGONPOINTS[i]);
             }
             tempPoints.push(e.latlng);
             var distance = CalArea(tempPoints);
              marker = new L.Marker(e.latlng, { draggable: false }); map.addLayer(marker); marker.bindPopup("總面積：" + (distance / 1000000).toFixed(3) + '平方公里').openPopup(); if (DRAWING) {
               if (DRAWMOVEPOLYGON != undefined && DRAWMOVEPOLYGON != null) {
                     map.removeLayer(DRAWMOVEPOLYGON);
                     DRAWMOVEPOLYGON = null;
                 }
                 BarDRAWLAYERS.push(DRAWPOLYGON);
                 if (func) {
                     func(DRAWPOLYGONPOINTS);
                 }
                 DRAWPOLYGONPOINTS = [];
                 DRAWING = false;
                 ISMEASURE = false;
                 map.off('mousedown');
                 map.off('mousemove');
                 map.off('dblclick');
             }
         });
         var shapeOptions = {
                 color: '#F54124',
                 weight: 3,
                 opacity: 0.8,
                 fill: true,
                 fillColor: null,
                 fillOpacity: 0.2,
                 clickable: true
             },

             DRAWPOLYGON = new L.Polygon([], shapeOptions); map.addLayer(DRAWPOLYGON);
         if (ISMEASURE) { MEASUREAREATOOLTIP = new L.Tooltip(map);
         }

         function CalArea(latLngs) {
             var pointsCount = latLngs.length,
                 area = 0.0,
                 d2r = Math.PI / 180,
                 p1, p2;
             if (pointsCount > 2) {
                 for (var i = 0; i < pointsCount; i++) {
                     p1 = latLngs[i];
                     p2 = latLngs[(i + 1) % pointsCount];
                     area += ((p2.lng - p1.lng) * d2r) *
                         (2 + Math.sin(p1.lat * d2r) + Math.sin(p2.lat * d2r));
                 }
                 area = area * 6378137.0 * 6378137.0 / 2.0;
             }
             return Math.abs(area);
         }
     },

4、清除測量

<button type="button" class="btn btn-sm btn-default" id="clearMeasure">清除</button>

/*清除量算*/
 $('#clearMeasure').click(function() {
       init.qingchu()
  })
qingchu(func) {
         for (var i = 0; i < BarDRAWLAYERS.length; i++) {
          map.removeLayer(BarDRAWLAYERS[i]);
        } BarDRAWLAYERS = [];
         if (marker) {
             map.removeLayer(marker)
         }
     }