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源碼見小專欄文章尾部：小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波