如何在mapbox gl js中为标记圆赋予不同的颜色 [英] How to give different colors to marker circle in mapbox gl js

问题描述

我有3个带有标记的地方，我需要为所有3个标记提供不同的颜色，有人可以帮我吗?我也尝试过为对象内部提供颜色，但无济于事.我需要为所有3个坐标点提供3种随机颜色给定的. 我还想将组件循环到数组中，应使用* ngFor调用html bu.

I have 3 places with marker, i need to give different colors for all 3 markers, can anyone help me.I had tried giving colors inside object as well but nothing worked.I need 3 random colors for all the 3 coordinate points given. I also want to loop the component in an array and should be called to html bu using *ngFor.

组件:

        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>

推荐答案

您可以为每种颜色的addLayer提供绘画选项.

You can give addLayer for each color for paint options.

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中为标记圆赋予不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！