用turf.js在mapbox上显示多个大圆圈

// 引入turf.js和Mapbox的相关库和依赖
import * as turf from '@turf/turf';
import mapboxgl from 'mapbox-gl';

// 创建Mapbox地图实例
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [longitude, latitude], // 地图中心点坐标
  zoom: 10 // 缩放级别
});

// 定义多个大圆圈的位置和属性信息
const circles = [
  { center: [longitude1, latitude1], radius: 1000, color: 'red' },
  { center: [longitude2, latitude2], radius: 2000, color: 'blue' },
  // ...
];

// 创建大圆圈的几何对象并添加到地图中
circles.forEach(circle => {
  const center = turf.point(circle.center);
  const options = { steps: 64, units: 'kilometers' };
  const circlePolygon = turf.circle(center, circle.radius, options);

  // 添加大圆圈到地图中
  map.addLayer({
    id: `circle-${circle.center[0]}-${circle.center[1]}`,
    type: 'fill',
    source: {
      type: 'geojson',
      data: circlePolygon
    },
    paint: {
      'fill-color': circle.color,
      'fill-opacity': 0.5
    }
  });
});