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 - 動態更改羣集顏色

回答

相關問題