在Angular 9中的Mapbox地图上添加多边形

npm install mapbox-gl --save

import * as mapboxgl from 'mapbox-gl';

<div id="map"></div>

ngOnInit() {
  this.initializeMap();
}

initializeMap() {
  mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // 替换为您的Mapbox Access Token
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [lng, lat], // 替换为地图的中心坐标
    zoom: 12 // 设置初始缩放级别
  });

  // 创建多边形的坐标数组
  const coordinates = [
    [lng1, lat1], // 替换为多边形的第一个顶点坐标
    [lng2, lat2], // 替换为多边形的第二个顶点坐标
    [lng3, lat3], // 替换为多边形的第三个顶点坐标
    ...
  ];

  // 添加多边形到地图
  map.on('load', () => {
    map.addLayer({
      id: 'polygon',
      type: 'fill',
      source: {
        type: 'geojson',
        data: {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [coordinates]
          }
        }
      },
      paint: {
        'fill-color': '#ff0000', // 替换为多边形的填充颜色
        'fill-opacity': 0.5 // 替换为多边形的填充透明度
      }
    });
  });
}