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（＆＃39; my-layer＆＃39;，＆＃39; fill-color＆＃39;，＆＃39; #faafee＆＃39;）;

随机化群集的示例

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

其他

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

Answer 2

这个问题对我来说结束了一天的研究之旅，非常感谢！我想根据所有群集的最大point_count为input steps“内插”表达式动态设置circle-color。因此，每当用户放大或缩小时，相对于其他群集，这些群集仍然是彩色的。

我最终得到了这段代码，希望它将对以后的工作有所帮助：

map.on('moveend', function (e) {
  var clusters = map.queryRenderedFeatures({ layers: ["clusters"] });

  const max_count = clusters
    .map(c => c.properties.point_count)
    .reduce((a, b) => Math.max(a, b));

  map.setPaintProperty('clusters', 'circle-color', [
    'interpolate',
    ["linear"],
    ['get', 'point_count'],
    0, "#b2ebf2",
    max_count, "#dd2c00"
  ]);
});

Mapbox - 动态更改群集颜色

2 个答案: