Créer une légende dans MapBox GL/JavaScript pour les points et les polygones

Question

Je fais ma première carte avec MapBox GL en suivant de près leur choropleth example. Dans mes données j'ai un polygone et quelques points et j'aimerais avoir une légende pour les deux avec des formes différentes (une ligne et un point) et des couleurs. Je suis coincé avec la partie colorée car la couleur du polygone est donnée par 'line-color' alors que pour les points c'est 'circle-color'. Savez-vous comment ajouter cette différenciation dans le code ci-dessous?

map.on('load', function() { 

    // the rest of the code will go in here 
    var layers = ['torpigna', 'bar']; 

    layers.forEach(function(layer) { 

    var color = map.getPaintProperty(layer, 'circle-color'); 
    var item = document.createElement('div'); 
    var key = document.createElement('span'); 
    key.className = 'legend-key'; 
    key.style.backgroundColor = color; 

    var value = document.createElement('span'); 
    value.innerHTML = layer; 
    item.appendChild(key); 
    item.appendChild(value); 
    legend.appendChild(item); 
}); 
}); 

Merci, Jacopo

Answer 1

Vous aurez besoin d'interroger le type de couche:

layers.forEach(function(layerId) { 

var layer = map.getLayer(layerid); 
if (layer.type === 'circle') { 
... layer.paint['circle-fill'] 
} else if (layer.type === 'fill') { 
... layer.paint['line-color'] 
} 

Vous pouvez trouver ce code utile, comme il le fait bien la même chose que ce que vous êtes essayer d'atteindre: https://github.com/City-of-Melbourne/Data3D/blob/master/src/js/mapVis.js