javascript - Mapbox 标记符号颜色变化

Question

我通过从 MSSQL 数据库中提取坐标来放置标记。

我想将标记(圆圈)设为不同的颜色(红色 [#ff0000] 或蓝色 [#0000FF]，具体取决于数据库中的另一个变量，但所有标记都是棕色的(参见源代码，下面的链接)。

这是一个例子:

map.addSource("markers", {
    "type": "geojson",
    "data": {
        "type": "FeatureCollection",
        "features": [
        {
            "type": "Feature",
            "geometry": {
                          "type": "Point",
                          "coordinates": [-98.00371, 38.65447]
                        },
            "properties": {
                            "description": "<strong>UTEP 5560</strong>
                             <p>Ellsworth Co., Kansas: 38.65447, -98.00371: : JOHNSON, JD</p>",
                            "marker-size": "small", 
                            "marker-color": "#0000ff", 
                            "marker-symbol": "circle"
                          }
},....

---

map.addLayer({
  "id": "markers",
  "type": "symbol",
  "source": "markers",
  "layout": {
  "icon-image": "{marker-symbol}-11",
  "icon-allow-overlap": true,
  "text-field": "{title}",
  "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
  "text-offset": [0, 0.6],
  "text-anchor": "top"
 }
});

完整的源代码可以在这里查看:http://webapps.fhsu.edu/ksfaunatest/account.aspx?o=33&t=75

Answer 1

您必须使用 mapbox 圆圈图层而不是标记图层，这样您就可以进行数据驱动的样式设置并根据 geojson 中的“mytype”属性赋予颜色

下面是圆形图层的示例

    map.addLayer({
    'id': 'mapid',
    'type': 'circle',
    'source': source,
    'paint': {
        'circle-radius': 2,
        'circle-color': {
            property: 'mytype', // geojson property based on which you want too change the color
            type: 'categorical',
            stops: [
                ['type1', '#fbb03b'],
                ['type2', '#223b53'],
                ['type3', '#e55e5e']
    }
});

访问此链接观看直播 example