如何在Mapbox GL JS中给标记圆形添加不同的颜色

Question

我可以帮您进行翻译。需要给三个标记点涂上不同的颜色，我曾试过在对象内设置颜色，但没有效果。现在希望能够给这三个坐标点随机分配颜色。

此外，我想将该组件循环至数组中，并通过 *ngFor 在 HTML 中调用。

组件：

        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>

- Bhrungarajni

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]
            }
          }]
        }
      }
    });
  }
});

- Hema