使用Mapbox gl JS测量距离

Mapbox GL JS是一个基于WebGL的开源地图库，用于在网页上展示交互式、可定制的地图。它提供了丰富的地图功能和工具，包括测量距离。

测量距离是指在地图上测量两个点之间的直线距离。在Mapbox GL JS中，可以使用Turf.js库来实现距离测量功能。Turf.js是一个用于地理空间分析的JavaScript库，提供了许多地理空间计算的函数。

以下是使用Mapbox GL JS测量距离的步骤：

引入Mapbox GL JS和Turf.js的库文件：

<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />

创建地图容器：

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

初始化地图：

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

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

添加测量距离的功能：

var distanceContainer = document.getElementById('distance');

var geojson = {
  type: 'FeatureCollection',
  features: []
};

var lineString = {
  type: 'Feature',
  geometry: {
    type: 'LineString',
    coordinates: []
  }
};

map.on('click', function(e) {
  var coordinates = [e.lngLat.lng, e.lngLat.lat];
  geojson.features.push({
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: coordinates
    }
  });

  lineString.geometry.coordinates.push(coordinates);

  if (geojson.features.length > 1) {
    geojson.features.push(lineString);
    var distance = turf.length(lineString, { units: 'kilometers' });
    distanceContainer.innerHTML = '距离：' + distance.toFixed(2) + ' 公里';
  }

  map.getSource('points').setData(geojson);
});

map.on('load', function() {
  map.addSource('points', {
    type: 'geojson',
    data: geojson
  });

  map.addLayer({
    id: 'points',
    type: 'circle',
    source: 'points',
    paint: {
      'circle-radius': 6,
      'circle-color': '#3887be'
    },
    filter: ['in', '$type', 'Point']
  });

  map.addLayer({
    id: 'line',
    type: 'line',
    source: 'points',
    layout: {
      'line-join': 'round',
      'line-cap': 'round'
    },
    paint: {
      'line-color': '#3887be',
      'line-width': 3
    },
    filter: ['in', '$type', 'LineString']
  });
});

在上述代码中，我们创建了一个地图容器，并初始化了地图。然后，我们添加了一个点击事件监听器，当用户在地图上点击时，会在点击位置添加一个点，并计算并显示两个点之间的距离。

最后，我们添加了一个distanceContainer元素，用于显示距离结果。

请注意，上述代码中的YOUR_MAPBOX_ACCESS_TOKEN需要替换为你自己的Mapbox访问令牌。

这是一个基本的使用Mapbox GL JS测量距离的示例。你可以根据自己的需求进行定制和扩展。如果你想了解更多关于Mapbox GL JS的功能和用法，可以参考Mapbox GL JS官方文档。