使用Mapbox gl 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 // 设置地图缩放级别
});

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']
  });
});