vue 实现 leaflet的测绘，测距，测面

参考1：https://blog.csdn.net/lonly\_maple/article/details/83658608

参考2：https://blog.csdn.net/xtfge0915/article/details/80275094#\_60

前提：vue项目在安装leaflet的基础上 cnpm install leaflet-draw --save
在 vue项目根目录的index.html文件中引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://my.oschina.net//u/4321106/blog/3528070/static/lib/CSS/leaflet.css">
    <link rel="stylesheet" href="https://my.oschina.net//u/4321106/blog/3528070/static/lib/CSS/leaflet-measure-path.css">
    <title>test-e-leaflet2</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script src="https://my.oschina.net//u/4321106/blog/3528070/static/lib/js/leaflet/Leaflet.draw.js"></script>   <!--引入这个，不然会报错-->

  <script>

  </script>
</html>

.vue文件

方法已经写好了，然后自己在vue的mounted方法内加载地图，在methods中调用方法即可

import leaflet from '_leaflet@1.4.0@leaflet'

import LeafletDraw from '_leaflet-draw@1.0.4@leaflet-draw'

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 = []; //绘制的面的节点集

// 测距
function 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 = '';
      if (DRAWING) {
          if (DRAWMOVEPOLYLINE != undefined && DRAWMOVEPOLYLINE != null) {
              map.removeLayer(DRAWMOVEPOLYLINE);
              DRAWMOVEPOLYLINE = null;
          }
          // if (DRAWPOLYLINEPOINTS.length > 1 && ISMEASURE) {
          //     MEASURERESULT += e.latlng.distanceTo(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 2]);
          //     var distanceLabel = L.marker(DRAWPOLYLINEPOINTS[DRAWPOLYLINEPOINTS.length - 1], {
          //         icon: new L.divIcon({
          //             className: 'DistanceLabelStyle',
          //             iconAnchor: [-8, 15],
          //             html: "<span class='bubbleLabel'><span class='bubbleLabel-bot bubbleLabel-bot-left'></span><span class='bubbleLabel-top bubbleLabel-top-left'></span><span>总长：" + (MEASURERESULT / 1000).toFixed(2) + "公里" + "</span></span>"
          //         }),
          //     }).addTo(_map);
          //     BarDRAWLAYERS.push(distanceLabel);
          // }
          // //移除提示框
          // if (MEASURETOOLTIP) {
          //     MEASURETOOLTIP.dispose();
          // }
            BarDRAWLAYERS.push(DRAWPOLYLINE);
          // if (func) {
          //     func(DRAWPOLYLINEPOINTS);
          // }
          DRAWPOLYLINEPOINTS = [];
          DRAWING = false;
          ISMEASURE = false;
          map.off('mousedown');
          map.off('mousemove');
          map.off('dblclick');
      }
  }

}

//绘制多边形
function 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);

            if (ISMEASURE && DRAWPOLYGONPOINTS.length > 1) {
                var tempPoints = [];
                for (var i = 0; i < DRAWPOLYGONPOINTS.length; i++) {
                    tempPoints.push(DRAWPOLYGONPOINTS[i]);
                }
                tempPoints.push(e.latlng);
                var distance = CalArea(tempPoints);
                MEASUREAREATOOLTIP.updatePosition(e.latlng);
                MEASUREAREATOOLTIP.updateContent({
                    text: '单击确定点，双击结束！',
                    subtext: "总面积：" + (distance / 1000000).toFixed(3) + '平方公里'
                });
            }
        }
    });
    map.on('dblclick', function (e) {
        map.getContainer().style.cursor = '';
        if (DRAWING) {
            if (DRAWMOVEPOLYGON != undefined && DRAWMOVEPOLYGON != null) {
                map.removeLayer(DRAWMOVEPOLYGON);
                DRAWMOVEPOLYGON = null;
            }
            // if (DRAWPOLYGONPOINTS.length > 2 && ISMEASURE) {
            //     MEASURERESULT = CalArea(DRAWPOLYGONPOINTS);
            //     var distanceLabel = L.marker(e.latlng, {
            //         icon: new L.divIcon({
            //             className: 'DistanceLabelStyle',
            //             iconAnchor: [-8, 15],
            //             html: "<span class='bubbleLabel'><span class='bubbleLabel-bot bubbleLabel-bot-left'></span><span class='bubbleLabel-top bubbleLabel-top-left'></span><span>总面积：" + (MEASURERESULT / 1000000).toFixed(3) + "平方公里" + "</span></span>"
            //         }),
            //     }).addTo(_map);
            //     BarDRAWLAYERS.push(distanceLabel);
            // }
            // 移除提示框
            // if (MEASUREAREATOOLTIP) {
            //     MEASUREAREATOOLTIP.dispose();
            // }
            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);
}

//清除标绘图层
function clearMap() {
    if (MEASURETOOLTIP) {
        MEASURETOOLTIP.dispose();
    }
    if (MEASUREAREATOOLTIP) {
        MEASUREAREATOOLTIP.dispose();
    }
    for (var i = 0; i < BarDRAWLAYERS.length; i++) {
        map.removeLayer(BarDRAWLAYERS[i]);
    }
    BarDRAWLAYERS = [];
}

Andriod第三方源码分析

Android进阶之旅-(Framework源码分析)

热门文章