leaflet 入门开发系列环境知识点了解:
leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
leaflet 插件,leaflet 的插件库,非常有用
leaflet实现简单量算工具功能
源代码demo下载
实现借助了一个插件leaflet-measure-path,插件的下载地址:https://github.com/ProminentEdge/leaflet-measure-path
效果图如下:
部分核心代码,完整的见源码demo下载
// 面积测量方法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(); } }
完整demo源码见小专栏文章尾部:小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
联系客服