2017-04-17 2 views
2

Ich verwende Mapbox-Cluster. Ich möchte die Cluster-Farben nach einer Logik von einer anderen Funktion ändern. Ich versuche die Farben am Moveend zu ändern. Ich würde im Idealfall wie so etwas wie diese ....Mapbox - Clusterfarben dynamisch ändern

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

Ich verstehe, dass für die Layer-Namen eine eindeutige ID, die wäre ideal, aber ich glaube nicht, dass ich, dass Luxus. Irgendwelche Gedanken würden geschätzt werden.

Antwort

0

Sie benötigen die SetPaintProperty auf die Schicht
https://www.mapbox.com/mapbox-gl-js/api/#map#setpaintproperty

Dokumentation

map.setPaintProperty ('my-Schicht', 'Fill-Farbe', '#faafee');

Beispiel Randomisierung Cluster

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

zusätzliche

Wenn Sie die Farbe basierend auf der Maus-Position/Maus-Bewegung randomisieren möchten, können Sie die oben hinzufügen, dass Ereignis und berechnen Sie dort basierend auf Farbe