Mapbox - 动态更改群集颜色

我正在使用mapbox群集。我想根据另一个函数的某些逻辑更改群集颜色。我试图改变移动的颜色。我会像理想是这样的....Mapbox - 动态更改群集颜色

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将是理想的，但我不认为我有这样的奢侈。任何想法将不胜感激。

来源

2017-04-17 andehlu

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

文档

map.setPaintProperty（ '我的层'， '填充颜色'， '#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]); 
    } 
});

额外的

例

如果要随机基于鼠标位置/鼠标移动的颜色，可以添加上述到事件并根据颜色计算出来

来源

2017-04-20 08:17:53

Mapbox - 动态更改群集颜色

回答

相关问题