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

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