leaflet操作地图（矩形框、定位、测距、截图、圆）

地图（vue+leaflet+element）

一、地图拉矩形框

1. web端代码

    // 添加区域          
     addRectArea(){
         var that = this;
         var map = that.$store.state.map; //获取已保存的地图
         if(that.stopRectArea != null){  //stopRectArea在data中定义，清除重复的拉框操作
             map.off('mousedown', that.stopRectArea.mousedown);
         }
         var rectangleMeasure = {
             startPoint: null,
             endPoint: null,
             rectangle:null,
             layer: L.layerGroup(),
             color: "red",
             addRectangle:function(){
                 rectangleMeasure.destory();
                 var bounds = [];
                 bounds.push(rectangleMeasure.startPoint);
                 bounds.push(rectangleMeasure.endPoint);
                 rectangleMeasure.rectangle = L.rectangle(bounds, {color: rectangleMeasure.color, weight: 1});
                 rectangleMeasure.rectangle.addTo(rectangleMeasure.layer);        
     
                 var northWestPoint = rectangleMeasure.rectangle.getBounds().getNorthWest(),
                     northEastPoint = rectangleMeasure.rectangle.getBounds().getNorthEast(),
                     southEastPoint = rectangleMeasure.rectangle.getBounds().getSouthEast();
                 var width = northWestPoint.distanceTo(northEastPoint)/1000,
                     height = northEastPoint.distanceTo(southEastPoint)/1000;
                 var area = Number(width) * Number(height);
                 rectangleMeasure.layer.addTo(map);
             },
             mousedown: function(e){
                 rectangleMeasure.rectangle = null;
                 map.dragging.disable();
                 rectangleMeasure.startPoint = e.latlng;
                 map.on('mousemove',rectangleMeasure.mousemove)
             },
             mousemove:function(e){
                 rectangleMeasure.endPoint = e.latlng;
                 rectangleMeasure.addRectangle();
                 map.off('mousedown ', rectangleMeasure.mousedown).on('mouseup', rectangleMeasure.mouseup);
             },
             mouseup: function(e){        
                 map.dragging.enable();
                 map.off('mousemove',rectangleMeasure.mousemove).off('mouseup', rectangleMeasure.mouseup);
                 that.locations = {}; //locations在data中定义
                 that.locations['leftX'] = rectangleMeasure.startPoint.lat;
                 that.locations['leftY'] = rectangleMeasure.startPoint.lng;
                 that.locations['rightX'] = rectangleMeasure.endPoint.lat;
                 that.locations['rightY'] = rectangleMeasure.endPoint.lng;
                 that.locations['layer_id'] = rectangleMeasure.layer._leaflet_id;
                 that.locations['layer'] = rectangleMeasure.layer;
                 that.locations['rectangle'] = rectangleMeasure.rectangle;
                 //在此处对数据进行处理（1）...
             },
             destory:function(){
                 if(rectangleMeasure.rectangle)
                     rectangleMeasure.layer.removeLayer(rectangleMeasure.rectangle);
             }
         };
         that.stopRectArea = rectangleMeasure; //记录已点击拉框按钮，未在地图上拉框
         map.on('mousedown', rectangleMeasure.mousedown); //在地图上拉框
     },
     //清除框选
     clearFrame(){
         var that = this;
         if(that.stopRectArea != null){
             var map = that.$store.state.map;
             map.off('mousedown', that.stopRectArea.mousedown);
         }
         //清除选框
         for(var i in that.allLocations){ //将（1）处保存框选图层数据，在此处删除图层
             that.allLocations[i].layer.removeLayer(that.allLocations[i].rectangle);
         }
     }, 
   

2. 移动端代码

       //添加区域
       chooseRect(){
           var that = this;
           var map = that.$store.state.map;  //获取已保存的地图
       
           var rectangleMeasure = {
               startPoint: null,
               endPoint: null,
               rectangle:null,
               layer: L.layerGroup(),
               color: "red",
               addRectangle:function(){
                   rectangleMeasure.destory();
                   var bounds = [];
                   bounds.push(rectangleMeasure.startPoint);
                   bounds.push(rectangleMeasure.endPoint);
                   rectangleMeasure.rectangle = L.rectangle(bounds, {color: rectangleMeasure.color, weight: 1});
                   rectangleMeasure.rectangle.addTo(rectangleMeasure.layer);        
       
                   var northWestPoint = rectangleMeasure.rectangle.getBounds().getNorthWest(),
                       northEastPoint = rectangleMeasure.rectangle.getBounds().getNorthEast(),
                       southEastPoint = rectangleMeasure.rectangle.getBounds().getSouthEast();
                   var width = northWestPoint.distanceTo(northEastPoint)/1000,
                       height = northEastPoint.distanceTo(southEastPoint)/1000;
                   var area = Number(width) * Number(height);
                   rectangleMeasure.layer.addTo(map);
               },
               touchstart: function(e){
                   rectangleMeasure.rectangle = null;
                   map.dragging.disable();
                   var touch_1 = e.touches[0];
                   var latlng_1 = map.containerPointToLatLng(new L.Point(touch_1.pageX,touch_1.pageY));
                   rectangleMeasure.startPoint = latlng_1;
                   L.DomEvent.on(map._container, 'touchmove',rectangleMeasure.touchmove,that);
               },
               touchmove:function(e){
                   var touch_2 = e.touches[0];
                   var latlng_2 = map.containerPointToLatLng(new L.Point(touch_2.pageX,touch_2.pageY));
                   rectangleMeasure.endPoint = latlng_2;
                   rectangleMeasure.addRectangle();
                   L.DomEvent.on(map._container, 'touchend',rectangleMeasure.touchend,that);
               },
               touchend: function(e){     
                   L.DomEvent.off(map._container, 'touchstart',rectangleMeasure.touchstart,that);
                   L.DomEvent.off(map._container, 'touchmove',rectangleMeasure.touchmove,that);
                   L.DomEvent.off(map._container, 'touchend',rectangleMeasure.touchend,that);
                   map.dragging.enable();
       
                   that.locations = {};  //locations在data中定义
                   that.locations['leftX'] = rectangleMeasure.startPoint.lat;
                   that.locations['leftY'] = rectangleMeasure.startPoint.lng;
                   that.locations['rightX'] = rectangleMeasure.endPoint.lat;
                   that.locations['rightY'] = rectangleMeasure.endPoint.lng;
                   that.locations['layer_id'] = rectangleMeasure.layer._leaflet_id;
                   that.locations['layer'] = rectangleMeasure.layer;
                   that.locations['rectangle'] = rectangleMeasure.rectangle;
                   //在此处对数据进行处理（1）...
               },
               destory:function(){
                   if(rectangleMeasure.rectangle)
                       rectangleMeasure.layer.removeLayer(rectangleMeasure.rectangle);
               }
           };
           that.stopRectArea = rectangleMeasure;//记录已点击拉框按钮，未在地图上拉框
           L.DomEvent.on(map._container, 'touchstart',rectangleMeasure.touchstart,that);//在地图上拉框
       },
       //清除框选
       clearFrame(){
           var that = this;
           //清除选框
           for(var i in that.allLocations){//将（1）处保存框选图层数据，在此处删除图层
               that.allLocations[i].layer.removeLayer(that.allLocations[i].rectangle);
           }
       }, 
       //取消拉框操作
       closeRectChoose(){                
           var map = this.$store.state.map;
           if(this.stopRectArea != null){
               L.DomEvent.off(map._container, 'touchstart',this.stopRectArea.touchstart,this);
           }
       },
   

二、地理定位

1. 用户地理位置的查询显示

      getLocation(){ 
          var that = this;
          var m = that.$store.state.map;
          that.clearUser();
      
          // Geolocation
          m.locate({
              setView: true,
              maxZoom: 16
          });
      
          m.once('locationfound', function(e) {
              var radius = e.accuracy / 2;
              that.userLocation = L.marker(e.latlng).addTo(m).bindPopup("你就在这个圈内");//data中定义
              that.userBounds = L.circle(e.latlng, radius).addTo(m);//data中定义
          });
      
          m.once('locationerror', function(e) {
              console.log('定位出错=====>', e);
          });
      },
      clearUser(){
          var that = this;
          that.map = that.$store.state.map;//data中定义
      
          if(that.userLocation != null){
              that.map.removeLayer(that.userLocation);
              that.userLocation = null;
              that.map.removeLayer(that.userBounds);
              that.userBounds = null;
          }
      }
   

三、地图测距

1. 方法一

     var mile = L.latLng([lat,lng]).distanceTo([lat,lng]);  //单位（米），其中lat-纬度，lng-经度

2. 方法二

     function GetDistance( lat1,  lng1,  lat2,  lng2){
         var radLat1 = lat1*Math.PI / 180.0;
         var radLat2 = lat2*Math.PI / 180.0;
         var a = radLat1 - radLat2;
         var  b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
         var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
         Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
         s = s *6378.137 ;// EARTH_RADIUS;
         s = Math.round(s * 10000) / 10000;
         return s;
     }
     var l = GetDistance(32.06681,118.81162,32.0465,118.78238)*1000;

四、地图截图

1. 对地图div区域截图

     //1、引入html2canvas.min.js文件，jquery这里用了2.2.4版本
     <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> 
     //2、地图配置加上:preferCanvas: true
     var map = L.map('mainPage',{
         center:[32.041975, 118.788561],
         crs:L.CRS.EPSG4326,
         zoom: 12,
         maxZoom: 19,
         zoomControl: true,
         attributionControl:false,
         layers:[wmts],
         preferCanvas: true //***轨迹***
     });
     //3、html
     <div id="qqq">
         <div id="mainPage" style="width:100%;height:100%"></div>
      <el-button type="text" @click="testCanvas" icon="el-icon-picture-outline">抓取</el-button>
     </div>
     //4、javascript
     testCanvas(){
         var that = this;
         console.log(1);
     
         html2canvas(that.jQuery("#qqq"),{ // $("#qqq")是你要复制生成canvas的区域，可以自己选
             useCORS:true, 
             logging:true,
             onrendered:function(canvas){
                 // dataURL =canvas.toDataURL("image/png");
                 console.log(2);
                 that.jQuery("body").append(canvas);
                 console.log(canvas);
     
                 //下载图片
                 // that.jQuery('#down_button').attr( 'href' ,  dataURL ) ;
                 // that.jQuery('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
             },
             width:1000,
             height:570
         })
     }

五、地图leaflet画圆

  1、0.7.7版本：L.circle([32.100276,118.911946], 500).addTo(map); 

  2、1.3.4版本：L.circle([50.5, 30.5], {radius: 500}).addTo(map);