leaflet实现简单量算工具功能，源代码demo下载

前言

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源码见小专栏文章尾部：小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

版权声明：本文为giserhome原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/giserhome/p/13252256.html