vue中leaflet测量

在Vue中使用Leaflet进行测量可以通过Leaflet.Measure插件实现。以下是实现步骤：

1.安装Leaflet.Measure插件

npm install leaflet-measure --save

2.在Vue组件中引入Leaflet和Leaflet.Measure插件

import L from 'leaflet'
import 'leaflet-measure'

3.在组件的mounted()生命周期中初始化地图和测量工具

mounted() {
  const map = L.map('map').setView([51.505, -0.09], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
  }).addTo(map);

  // 添加测量工具
  L.control.measure({
    position: 'topleft',
    primaryLengthUnit: 'meters',
    secondaryLengthUnit: 'kilometers',
    primaryAreaUnit: 'sqmeters',
    secondaryAreaUnit: undefined
  }).addTo(map);
}

4.在Vue组件的template中添加地图容器

<template>
  <div id="map" style="height: 500px;"></div>
</template>

以上步骤完成后，您就可以在Vue中使用Leaflet和Leaflet.Measure插件进行测量了。