react+js+mapbox+turf+jS 完成在mapbox地图上的测距功能

要在 React.js 和 Mapbox 地图上实现测距功能，可以使用 Mapbox GL JS 库结合 Turf.js 库来实现。

首先，确保你已经在 React 项目中安装了 mapbox-gl 和 turf 库：

npm install mapbox-gl turf

然后，在你的 React 组件中引入所需的库：

import React, { useRef, useEffect } from 'react';
import mapboxgl from 'mapbox-gl';
import * as turf from '@turf/turf';

接下来，在你的组件函数中创建地图容器和引用：

const MapComponent = () => {
  const mapContainerRef = useRef(null);

  useEffect(() => {
    // 初始化地图
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat], // 设置地图初始中心点经纬度
      zoom: 10, // 设置初始缩放级别
    });

    // 添加地图控件
    map.addControl(new mapboxgl.NavigationControl());

    // 添加测距功能
    let lineString = turf.lineString([]);
    let distance = 0;
    let measureStartPoint = null;

    map.on('click', (e) => {
      if (!measureStartPoint) {
        measureStartPoint = e.lngLat;
      } else {
        const endPoint = e.lngLat;
        distance += turf.distance(measureStartPoint, endPoint);
        lineString.geometry.coordinates.push([
          measureStartPoint.lng,
          measureStartPoint.lat,
        ]);
        lineString.geometry.coordinates.push([endPoint.lng, endPoint.lat]);

        map.getSource('measure-line').setData(lineString);

        measureStartPoint = null;
      }
    });

    map.on('load', () => {
      // 添加测距线
      map.addSource('measure-line', {
        type: 'geojson',
        data: {
          type: 'Feature',
          geometry: lineString.geometry,
        },
      });

      map.addLayer({
        id: 'measure-line',
        type: 'line',
        source: 'measure-line',
        paint: {
          'line-color': '#0080ff',
          'line-width': 2,
        },
      });
    });

    return () => map.remove(); // 清除地图实例
  }, []);

  return <div ref={mapContainerRef} style={{ width: '100%', height: '400px' }} />;
};

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

以上代码创建了一个地图容器和引用，并在组件加载时初始化地图。通过点击地图，你可以在不同位置之间绘制线段并计算总距离。测距线的样式可以根据需要进行自定义。

希望这可以帮助你在 React.js 和 Mapbox 地图上实现测距功能！