参考 : Leaflet 简单测距_大洪的博客-CSDN博客_leaflet 测距
采用vue框架,map为leaflet的地图对象
支持重复测距
<template>
<button @click="openDistanceCount()">开启测距</button>
<button @click="closeDistanceCount()">关闭测距</button>
</template>
<script>
export default {
data() {
return {
clickHandler: null,
mousemoveHandler: null,
distanceCountStart:false,
distanceCountEnd:false,
tempLayer:null,
layer2:null,
layer: null,
popup: null
}
},
created() {
},
methods: {
openDistanceCount(){
// 变量
let tempPoints = [];
// 自定义距离展示框
const setTipText = content => {
const el = document.createElement("div");
el.className = "measure-marker";
const text = document.createElement("span");
text.className = "measure-text";
text.innerHTML = content;
const close = document.createElement("span");
close.className = "measure-close";
close.addEventListener("click", () => {
remove();
});
el.appendChild(text);
el.appendChild(close);
return el;
};
// 移动事件
this.mousemoveHandler = e => {
if (tempPoints.length) {
// 记录标记,用于计算最终距离
tempPoints[1] = e.latlng;
this.tempLayer.setLatLngs(tempPoints);
// 线移动时显示距离
this.layer2.setLatLngs(tempPoints);
const len = turf.length(this.layer2.toGeoJSON(), { units: "kilometers" });
this.popup
.setLatLng(e.latlng)
.setContent(setTipText(len.toFixed(2)*1000 + " 米"))
.openOn(map);
}
};
// 点击事件
this.clickHandler = e => {
if (this.distanceCountStart){
// 测距进行中
if (this.distanceCountEnd) {
// 已结束,清除测量
tempPoints = [];
this.tempLayer.remove();
this.layer.remove();
this.layer2.remove();
this.popup.remove();
this.distanceCountStart = false
this.distanceCountEnd = false
} else {
// 结束测量
map.doubleClickZoom.enable()
this.distanceCountEnd = true
// 移除鼠标移动事件
map.off("mousemove", this.mousemoveHandler);
// 显示最终距离
tempPoints[1] = e.latlng;
this.layer2.setLatLngs(tempPoints);
const len = turf.length(this.layer2.toGeoJSON(), { units: "kilometers" });
this.popup
.setLatLng(e.latlng)
.setContent(setTipText(len.toFixed(2)*1000 + " 米"))
.openOn(map);
return null
}
}
// 初始化变量
this.distanceCountInit()
// 执行测距
// 绑定数据移动事件
map.on("mousemove", this.mousemoveHandler);
this.layer.addLatLng(e.latlng);
tempPoints[0] = e.latlng;
// 禁止地图拖动
map.doubleClickZoom.disable()
this.distanceCountStart = true
}
// 绑定事件
map.on("click", this.clickHandler);
map.on("mousemove", this.mousemoveHandler);
},
distanceCountInit(){
// 测距变量初始化
this.layer = L.polyline([], {
interactive: false
}).addTo(map);
// 移到距离测量用
this.layer2 = L.polyline([], {
interactive: false
});
// 弹出展示距离信息
this.popup = L.popup({
autoClose: false,
closeButton: false
});
// 划线
this.tempLayer = L.polyline([], {
interactive: false
}).addTo(map);
},
closeDistanceCount(){
// 删除线
this.layer.remove();
this.layer2.remove();
this.popup.remove();
this.tempLayer.remove();
// 删除事件
map.off("click", this.clickHandler);
map.off("mousemove", this.mousemoveHandler);
}
},
mounted(){
// 引入js
const jss = [
'https://unpkg.com/@turf/turf@6.3.0/turf.min.js'
]
jss.forEach(item=>{
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = item;
document.body.appendChild(script);
})
}
}
</script>
<style>
</style>