如何在mapbox gl js中为标记圆圈赋予不同的颜色

Question

我有 3 个带有标记的地方，我需要为所有 3 个标记提供不同的颜色，任何人都可以帮助我。我也尝试过在对象内部提供颜色，但没有任何效果。我需要为给定的所有 3 个坐标点提供 3 种随机颜色。我还想在数组中循环该组件，并且应该使用 *ngFor 调用 html bu。

成分：

        import mapboxgl from 'mapbox-gl';
       mapboxgl.accessToken = 'pk.eyJ1IjoicmFrc2hpdGhhMTkiLCJhIjoiY2pjcHl1YW5wMjR5czJ6bzdqdjZrbDRzeSJ9.OOqu6zVyNsXavzCsYoBdPA';
var map = new mapboxgl.Map({
    container: 'maps',
    style: 'mapbox://styles/mapbox/streets-v9',
     center: [12.568337,55.676098],
     zoom: 9
});

map.on('load', function () {
    map.addLayer({
        "id": "points",
        "type": "circle",
        "paint":{
          "circle-radius":10,
          "circle-color":
                'green'

        },
        "source": {
            "type": "geojson",
            "data": {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          12.568337,55.676098
        ]
      }
    }
    }
  ]
}
        },
    });
});

HTML：

<div id='maps' style='height: 440px;min-width:100%'></div>

Answer 1

您可以为绘制选项的每种颜色提供 addLayer 。

map.on('load', function () {
  for (var i = 0; i < coOrdinates.length; i++) {
    map.addLayer({
      "id": "points" + i,
      "type": "circle",
      "paint": {
        "circle-radius": 15,
        "circle-color": '#' + (Math.random().toString(16) + "000000").substring(2, 8)
      },
      "source": {
        "type": "geojson",
        "data": {
          "type": "FeatureCollection",
          "features": [{
            "type": "Feature",
            "properties": {
              "field": coOrdinates[i]
            },
            "geometry": {
              "type": "Point",
              "coordinates": [coOrdinates[i].lat, coOrdinates[i].lang]
            }
          }]
        }
      }
    });
  }
});