マップボックス - クラスタの色を動的に変更する

Question

マップボックスクラスタを使用しています。私は別の機能からいくつかのロジックに応じてクラスタの色を変更したいと思います。私は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

あなたはmap.setPaintProperty（ '私の-層'、 '塗りつぶしの色'、 '#faafee'）層に
https://www.mapbox.com/mapbox-gl-js/api/#map#setpaintproperty

ドキュメント

をSetPaintPropertyが必要です。

ランダム化クラスタの例

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

追加

あなたはマウス位置/マウス移動に基づいて色をランダム化したい場合は、それに上記を追加することができますイベントを計算し、色に基づいて計算する