在vue2项目中使用leaflet-measure-path

在Vue 2项目中使用Leaflet-measure-path插件可以帮助你实时测量地图上路径的长度。这个库提供了一个简单的工具，用户可以在地图上绘制或选择路线，然后显示路径的总长度。要在项目中集成它，你需要按照以下步骤操作：

1. **安装依赖**:
使用npm或yarn添加`leaflet-measure-path`到项目的依赖：

   npm install leaflet-measure-path
   # 或者
   yarn add leaflet-measure-path

2. **引入组件**:
在你的Vue文件中，导入Leaflet和MeasurePath组件，并在模板中使用它：

   <template>
     <div id="map" ref="map"></div>
   </template>

   <script>
   import L from 'leaflet';
   import MeasurePath from 'leaflet-measure-path';

   export default {
     mounted() {
       this.createMap();
     },
     methods: {
       createMap() {
         const map = L.map('map').setView([51.505, -0.09], 13);
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map);

         // 初始化MeasurePath实例
         new MeasurePath({
           map,
           positionTolerance: 10, // 距离精度，默认单位是像素
           onEachMeasure: (e) => {
             console.log(`Measured path length: ${e.length.toFixed(2)} m`);
           }
         });
       }
     }
   };
   </script>

3. **样式调整**:
如果需要，你可以调整样式和配置选项以适应你的设计需求。