正文

leaflet实现测距和侧面积

譬如朝露 V管理员/ / 0 评论/ 846阅读
09 16

leaflet实现测距和侧面

使用到的插件

https://github.com/ProminentEdge/leaflet-measure-path

使用方法：

<!DOCTYPE html>
<html>
<head>
  <title>leaflet实现简单量算工具功能</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>-->
  <link rel="stylesheet" href="leaflet.css" />
  <link rel="stylesheet" href="leaflet-measure-path.css"/>
  <style>
    html, body, #map {
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>
   <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
   <!--<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>-->
   <script src="leaflet.js"></script>

   <script src="leaflet-measure-path.js"></script>
</head>
<body>
<div id="map"></div>
<div style="position:absolute;top:50px;left:60px;z-index:999;">
   <button type="button" id="areameasure_btn">面积量算</button>
</div>
<div style="position:absolute;top:50px;left:160px;z-index:999;">
   <button type="button" id="distanceMeasure_btn">距离量算</button>
</div>
<div style="position:absolute;top:50px;left:260px;z-index:999;">
   <button type="button" id="clear_btn">清空</button>
</div>
<script>

  var map = L.map('map');
  L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',{crossOrigin:true}).addTo(map);

  map.setView(L.latLng(22.95186415, 113.90271877), 14);  //设置缩放级别及中心点


  //面积量算
  $("#areameasure_btn").click(function(){
     areaMeasure.destory();
     areaMeasure.init();
  });

  //距离量算
  $("#distanceMeasure_btn").click(function(){
     distanceMeasure.destory();
     distanceMeasure.init();
  });

  //清空
  $("#clear_btn").click(function(){
     distanceMeasure.destory();
     areaMeasure.destory();
  });

   var deleteIcon = L.icon({
          iconUrl: "shanchu.png",
          iconSize: [16, 16],
   });

  // 面积测量方法
  var areaMeasure = {
        points:[],
        //markers:[],
        color: "red",
        layers: L.layerGroup(),
        polygon: null,
        marker:null,
        init:function(){
            areaMeasure.points = [];
            areaMeasure.polygon = null;
            areaMeasure.marker = null;
            map.on('click', areaMeasure.click).on('dblclick', areaMeasure.dblclick);
        },
        close:function(latlng){
            areaMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) {
                //console.log('marker',e); 
                if(areaMeasure.polygon)
                   map.removeLayer(areaMeasure.polygon);

                if(areaMeasure.marker)
                  areaMeasure.marker.remove();
            });
            //areaMeasure.markers.push(marker);

        },
        click:function(e){    
            map.doubleClickZoom.disable();
            // 添加点信息
            areaMeasure.points.push(e.latlng);
            // 添加面
            map.on('mousemove', areaMeasure.mousemove);
        },
        mousemove:function(e){
            areaMeasure.points.push(e.latlng);
            if(areaMeasure.polygon)
                map.removeLayer(areaMeasure.polygon);
            areaMeasure.polygon = L.polygon(areaMeasure.points,{showMeasurements: true, color: 'red'});
            //areaMeasure.polygon.addTo(map);
            areaMeasure.polygon.addTo(areaMeasure.layers);
            areaMeasure.layers.addTo(map);
            areaMeasure.points.pop();
        },
        dblclick:function(e){ // 双击结束
            console.log('双击结束',e);
            areaMeasure.polygon.addTo(areaMeasure.layers);
            areaMeasure.close(e.latlng);
            //areaMeasure.polygon.enableEdit();
            //map.on('editable:vertex:drag editable:vertex:deleted', areaMeasure.polygon.updateMeasurements, areaMeasure.polygon);
            map.off('click', areaMeasure.click).off('mousemove', areaMeasure.mousemove).off('dblclick', areaMeasure.dblclick);
        },
        destory:function(){ 
            if(areaMeasure.polygon)
                   map.removeLayer(areaMeasure.polygon);

            if(areaMeasure.marker)
                  areaMeasure.marker.remove();
        }
    }

  // 距离测量方法
  var distanceMeasure = {
        points:[],
        //markers:[],
        color: "red",
        layers: L.layerGroup(),
        polyline: null,
        marker:null,
        init:function(){
            distanceMeasure.points = [];
            distanceMeasure.polyline = null;
            distanceMeasure.marker = null;
            map.on('click', distanceMeasure.click).on('dblclick', distanceMeasure.dblclick);
        },
        close:function(latlng){
            distanceMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) {
                //console.log('marker',e); 
                if(distanceMeasure.polyline)
                   map.removeLayer(distanceMeasure.polyline);

                if(distanceMeasure.marker)
                  distanceMeasure.marker.remove();
            });


        },
        click:function(e){    
            map.doubleClickZoom.disable();
            // 添加点信息
            distanceMeasure.points.push(e.latlng);
            // 添加线
            map.on('mousemove', distanceMeasure.mousemove);
        },
        mousemove:function(e){
            distanceMeasure.points.push(e.latlng);
            if(distanceMeasure.polyline)
                map.removeLayer(distanceMeasure.polyline);
            distanceMeasure.polyline = L.polyline(distanceMeasure.points,{showMeasurements: true, color: 'red'});
            distanceMeasure.polyline.addTo(distanceMeasure.layers);
            distanceMeasure.layers.addTo(map);
            distanceMeasure.points.pop();
        },
        dblclick:function(e){ // 双击结束
            console.log('双击结束',e);
            distanceMeasure.polyline.addTo(distanceMeasure.layers);
            distanceMeasure.close(e.latlng);
            //distanceMeasure.polygon.enableEdit();
            //map.on('editable:vertex:drag editable:vertex:deleted', distanceMeasure.polygon.updateMeasurements, distanceMeasure.polygon);
            map.off('click', distanceMeasure.click).off('mousemove', distanceMeasure.mousemove).off('dblclick', distanceMeasure.dblclick);
        },
        destory:function(){ 
            if(distanceMeasure.polyline)
                   map.removeLayer(distanceMeasure.polyline);

            if(distanceMeasure.marker)
                  distanceMeasure.marker.remove();
        }
    }

</script>

</body>
</html>

参考文章：https://xiaozhuanlan.com/topic/9683210457

源码下载：leaflet实现简单量算工具功能.zip


文章版权声明：除非注明，否则均为 譬如朝露博客原创文章，转载或复制请以超链接形式并注明出处。