vue(17) : leaflet(2) : 距离测量

参考 : 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 = falsethis.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(){// 引入jsconst 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>

vue(17) : leaflet(2) : 距离测量相关推荐

vue+vuex+leaflet Jest单测踩坑指南
环境 Vue CLI 3 TypeScript 3.1.4 Leaflet 1.3.4 相关文档 vue-test-utils.vuejs.org/zh/guides/#- 踩坑 1.iview按需引 ...
vue 使用leaflet绘制平面图（二）
首先在vue中使用,需要安装相关依赖 npm install leaflet 基于前面使用leaflet绘制平面图(一)的代码,修改得一下内容,相对与html会出现一些问题例如:标记图标未显示,需要声 ...
vue使用leafLet（绘图工具详解）
目录安装引入,在项目main.js中初始化地图初始化引入图层,可以引入多个图层地图事件添加绘制工具引入leafle.pm原生组件设置绘图样式设置语言自定义绘图按钮 Drawing ...
Vue渲染Leaflet GIS地图，边界线，点位组件
package.json中引入并安装: "leaflet": "~1.4.0", "vue2-leaflet": "^2.5.2& ...
VUE·17：事件处理之 @keyup、@keydown 等键盘按键触发及 @keyup.enter 等别名
一.keyup · 最常用的键盘按键模式 1.原理只要按下按键,如果不抬起手来,就不会触发事件.只有将按键抬起,这个事件才算是触发. 2.代码示例 2.1 我们可以控制按下哪个键才能触发事件,而其 ...
vue 使用leaflet 加载地图服务（可切换天地图影像地图）（一）
// 下载 npm install leaflet // 引入 main.js import L from "leaflet"; import "leaflet/dist ...
Android OpenGL ES 2.0 屏幕坐标和3D世界坐标转换
Android OpenGL ES 2.0 屏幕坐标和3D世界坐标转换查看全文 http://www.taodudu.cc/news/show-6705596.html 相关文章: word中如何加 ...
vue使用sweetalert2弹窗插件
1). 安装 sweetalert2 npm install sweetalert2@7.15.1 --save 2). 封装 sweetalert2 在 src 新建 plugins 文件夹,然后新 ...
Vue文件导致的报错 'axios' is not defined
✘ http://eslint.org/docs/rules/no-undef 'axios' is not defined src/App.vue:17:5 axios ...

vue(17) : leaflet(2) : 距离测量

vue(17) : leaflet(2) : 距离测量相关推荐

最新文章

热门文章