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

Question

我有 3 个地方有标记，我需要为所有 3 个标记提供不同的颜色，任何人都可以帮助 me.I 也尝试在对象内部提供颜色，但没有什么 worked.I 需要 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]
            }
          }]
        }
      }
    });
  }
});

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

How to give different colors to marker circle in mapbox gl js

mapbox-gl-js