vue3 mapbox测距

Vue3是一种流行的JavaScript框架，而Mapbox是一个提供地图和地理位置服务的平台。在Vue3中使用Mapbox进行测距可以通过以下步骤实现：

1. 首先，你需要在Vue项目中安装Mapbox的JavaScript库。可以使用npm或者yarn命令来安装，例如：

npm install mapbox-gl

2. 在Vue组件中引入Mapbox的JavaScript库，并创建一个地图容器。可以在`mounted`钩子函数中进行初始化，例如：

import mapboxgl from 'mapbox-gl';

export default {
  mounted() {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
      container: 'map-container',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [longitude, latitude], // 设置地图中心点的经纬度
      zoom: 12 // 设置地图缩放级别
    });
  }
}

请注意替换`YOUR_MAPBOX_ACCESS_TOKEN`为你自己的Mapbox访问令牌，并根据需要设置地图的样式、中心点和缩放级别。

3. 接下来，你可以使用Mapbox提供的测距功能来计算两个点之间的距离。可以在Vue组件中定义一个方法来处理测距逻辑，例如：

export default {
  methods: {
    calculateDistance() {
      const point1 = [longitude1, latitude1]; // 第一个点的经纬度
      const point2 = [longitude2, latitude2]; // 第二个点的经纬度

      const distance = turf.distance(point1, point2); // 使用turf.js库计算距离
      console.log('Distance:', distance);
    }
  }
}

请注意替换`longitude1`、`latitude1`、`longitude2`和`latitude2`为实际的经纬度值。

4. 最后，在Vue模板中添加一个按钮或者其他触发事件的元素，调用测距方法，例如：

<template>
  <div>
    <button @click="calculateDistance">计算距离</button>
    <div id="map-container"></div>
  </div>
</template>

这样，当点击"计算距离"按钮时，测距方法将被调用，并在控制台输出两个点之间的距离。