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

Posted giserhome

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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源码见小专栏文章尾部小专栏

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

以上是关于leaflet实现简单量算工具功能(附源码下载)的主要内容,如果未能解决你的问题,请参考以下文章

leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)

leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)

leaflet地图全图以及框选截图导出功能(附源码下载)

leaflet实现风场图(附源码下载)

leaflet 结合 d3.js 实现 geojson 数据地形剖面分析(附源码下载)

cesium 入门开发系列地图鹰眼功能(附源码下载)