Mapbox - 动态更改集群颜色

Question

我正在使用 mapbox 集群。我想根据另一个函数的某些逻辑更改群集颜色。我正在尝试更改 moveend 上的颜色。理想情况下，我会喜欢这样的东西......

map.on('load', function(){ 

    //data
    map.addSource("surveydata", {
        type: "geojson",
        data: "/surveydata/"+lastweek+"/"+today+"",
        cluster: true,
        clusterRadius: 20 
    });

    map.addLayer({
        "id": "cluster",
        "type": "circle",
        "source": "surveydata",
        "paint": {
            'circle-color': 'rgba(0,0,200,0.2)',
            'circle-radius': 20
        },
        "filter": [">=", "point_count", 2]
    });

});


//recolor clusters
map.on('moveend', function (e) { 

    var colors = ['#ff0000', '#00ff00', '#0000ff'];
    var cluster = map.queryRenderedFeatures({ layers: ["cluster"] });

    //HERE
    for(i = 0; i < cluster.length; i++){

        console.log(cluster[i]); //THIS RETURNS ALL THE CLUSTERS SUCCESSFULLY
        cluster[i].setcolor(randomcolor) //this I am not sure how to do
    }
 });

我知道为图层名称设置唯一 id 是理想的，但我认为我没有那种奢侈。任何想法将不胜感激。

Answer 1

您需要 SetPaintProperty 图层
https://www.mapbox.com/mapbox-gl-js/api/#map#setpaintproperty

文档

map.setPaintProperty('my-layer', 'fill-color', '#faafee');

随机分组示例

// recolor clusters
map.on('moveend', function (e) { 
  var colors = ['#ff0000', '#00ff00', '#0000ff'];
  var cluster = map.queryRenderedFeatures({ layers: ["cluster"] });

  //HERE
  for(i = 0; i < cluster.length; i++){
    map.setPaintProperty('cluster', 'circle-color', colors[i]);
  }
});

额外的

如果您想根据鼠标位置/鼠标移动随机化颜色，您可以将上述内容添加到该事件并根据颜色进行计算