Question

我有三个带标记的地方，我需要为所有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]
            }
          }]
        }
      }
    });
  }
});

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

1 个答案: