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

楽焫旒璡

已于 2022-09-13 10:49:14 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： leaflet距离测量 vue 距离

于 2022-09-02 21:35:12 首次发布

原文链接：https://blog.youkuaiyun.com/dahongdahong/article/details/106516868

前端专栏收录该内容

79 篇文章

订阅专栏

该博客介绍了如何在Vue项目中利用Leaflet库实现地图上的测距功能。通过监听地图的点击和鼠标移动事件，动态更新测量路径和显示实时距离。使用Turf.js计算公里数，并创建自定义的提示框展示测量结果。此外，还提供了开启和关闭测距的按钮操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考 : Leaflet 简单测距_大洪的博客-优快云博客_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>