mapboxgl 画线展示长度

要在 Mapbox GL 中画线并展示长度，您可以使用 Turf.js 库中的 `lineDistance` 方法来计算线的长度。然后，您可以将这个长度显示在地图上，例如在弹出窗口中或者作为标注等。

以下是一个使用 Mapbox GL 和 Turf.js 来计算和展示线长度的示例代码：

// 创建地图
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-122.4194, 37.7749],
  zoom: 13
});

// 画线
var line = {
  type: 'Feature',
  geometry: {
    type: 'LineString',
    coordinates: [
      [-122.4194, 37.7749],
      [-122.4250, 37.7599],
      [-122.4183, 37.7756],
      [-122.4228, 37.7774]
    ]
  }
};

map.on('load', function() {
  // 添加线图层
  map.addLayer({
    id: 'line-layer',
    type: 'line',
    source: {
      type: 'geojson',
      data: line
    },
    paint: {
      'line-color': 'red',
      'line-width': 5
    }
  });

  // 计算线长度
  var length = turf.lineDistance(line).toLocaleString('en-US', { maximumFractionDigits: 2 }) + ' km';

  // 在线中心添加标注
  var center = turf.centerOfMass(line);
  new mapboxgl.Popup()
    .setLngLat(center.geometry.coordinates)
    .setHTML('<p>Length: ' + length + '</p>')
    .addTo(map);
});

在这个示例中，我们首先创建了一个简单的地图，并使用 Mapbox GL 画了一条线。然后，我们使用 Turf.js 库中的 `lineDistance` 方法计算线的长度，并将其格式化为可读的字符串。最后，我们在地图中心添加了一个弹出窗口，显示线的长度。

您可以将此示例代码复制到您的项目中，并根据需要调整线的坐标和样式。希望对您有所帮助！