leaflet实现简单量算工具功能(附源码下载)

前言

leaflet 入门开发系列环境知识点了解：

• leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等

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

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