vue leaflet 测量尺功能

最新推荐文章于 2025-01-11 10:31:22 发布

Rainbow_pp

最新推荐文章于 2025-01-11 10:31:22 发布

阅读量595

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Rainbow_pp/article/details/136597951

版权

本文介绍了如何在Vue2或Vue3项目中集成Leaflet库，实现一个离线地图上的测量功能，包括测量两点之间的距离和显示测量结果，以及如何处理ESC键取消测量操作。

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

最近项目需要使用离线地图 leaflet是最好的选择，但是翻遍各大大佬文章找了很多量尺功能都不好用，要不是不兼容索性自己写一个简单的测量功能根据地图的经纬度来计算距离。给列为提供个思路，可以自己封装利用，兼容vue2，vue3

<template>
  <div>
    <div id="map"></div>
    <button @click="startMeasurement">开始测量</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      drawnItems: null,
      lastClickedLatLng: null,
      totalDistance: 0,
      measuring: false, // 用于跟踪测量是否在进行中
      polyline: null, // 用于保存绘制的线对象
    };
  },
  mounted() {
    this.map = L.map('map', {
      minZoom: 4,
      maxZoom: 13,
      maxBounds: [
        [35.606168, 123.01982],
        [38.126654,123.70392],
        [38.013431,115.635907],
        [34.356035,115.013999]