mapbox-gl根据经纬度坐标在球上添加标记点

在 Mapbox GL JS 中添加球面上的标记点与在平面地图上添加标记点的方法类似，但需要使用 `turf.js` 库来实现。具体步骤如下：

1. 安装 `turf.js` 库。

npm install turf

2. 在你的代码中引入 `turf.js` 和 Mapbox GL JS 库。

import mapboxgl from 'mapbox-gl';
import turf from '@turf/turf';

3. 创建一个 `FeatureCollection` 对象，并将标记点添加到这个对象中。

const markers = [
  [-122.414, 37.776],
  [-122.408, 37.77],
  [-122.404, 37.774]
];

const featureCollection = turf.featureCollection(markers.map(marker => {
  return turf.point(turf.toWgs84(marker));
}));

在球面上添加标记点需要将点坐标转换为 WGS84 坐标系，可以使用 `turf.toWgs84()` 方法来实现。

4. 将 `FeatureCollection` 添加到 Mapbox GL JS 的地图上。

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

  map.addLayer({
    id: 'markers-layer',
    type: 'symbol',
    source: 'markers',
    layout: {
      'icon-image': 'marker-15', // 标记点图标
      'icon-size': 1.5
    }
  });
});

这里我们使用了 `symbol` 图层来显示标记点，你也可以使用其他类型的图层来显示标记点。注意，这种方法只适用于在球面上添加标记点，如果你需要在平面地图上添加标记点，则可以直接使用 Mapbox GL JS 的 API。

另外，你还可以通过 Mapbox GL JS 提供的 `Marker` 类来添加标记点，这种方法不需要使用 `turf.js` 库，示例代码如下：

const marker = new mapboxgl.Marker()
  .setLngLat([-122.414, 37.776])
  .addTo(map);