définir une couleur de remplissage de polygone basée sur geojson avec mapbox

Question

J'utilise un exemple de mapbox pour créer plusieurs polygones sur une carte, et j'ai un événement pop-up pour chacun. Mon problème est que je dois définir la couleur de remplissage de chaque polygone en fonction de ses propriétés geojson.

This est mon exemple. J'utilise le code javascript suivant:

mapboxgl.accessToken = 'pk.eyJ1IjoibWFoYW5tZWhydmFyeiIsImEiOiJ6SDdSWldRIn0.8zUNm01094D1aoSeHpWYqA'; 
var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v9', 
    center: [51.40545845031738, 
    35.75069181054449], 
    zoom: 10 

}); 

map.on('load', function (e) { 
    // Add a layer showing the state polygons. 
    map.addLayer({ 
     'id': 'states-layer', 
     'type': 'fill', 
     'source': { 
      'type': 'geojson', 
      'data': 'geojson.js' 
     }, 
     'paint': { 
      'fill-color': 'rgba(200, 100, 240, 0.4)', 
      'fill-outline-color': 'rgba(200, 100, 240, 1)' 
     } 
    }); 

    // When a click event occurs on a feature in the states layer, open a popup at the 
    // location of the click, with description HTML from its properties. 
    map.on('click', 'states-layer', function (e) { 
     new mapboxgl.Popup() 
      .setLngLat(e.lngLat) 
      //.setHTML(e.features[0].properties.name) 
      .setHTML("<h1>"+e.features[0].properties.userone+"</h1>"+e.features[0].properties.name) 

      .addTo(map); 
    }); 

    // Change the cursor to a pointer when the mouse is over the states layer. 
    map.on('mouseenter', 'states-layer', function() { 
     map.getCanvas().style.cursor = 'pointer'; 
    }); 

    // Change it back to a pointer when it leaves. 
    map.on('mouseleave', 'states-layer', function() { 
     map.getCanvas().style.cursor = ''; 
    }); 
}); 

Ici, il charge les couleurs tout de même

'paint': { 
    'fill-color': 'rgba(200, 100, 240, 0.4)', 
    'fill-outline-color': 'rgba(200, 100, 240, 1)' 
} 

Sur mon dossier GeoJSON j'ai une clé pour la couleur:

"type": "Feature", 
"properties": { 
    "userone":"پیروزی", 
    "name":"North Dafkota", 
    "featureclass":"Admin-1 scale rank", 
    "color":"red" 
} 

I vouloir l'utiliser pour définir la couleur de remplissage des polygones.

Answer 1

Si vous souhaitez simplement utiliser une couleur que vous définissez dans les propriétés de la fonctionnalité geojson. Ensuite, vous pouvez utiliser les couches propriété d'identité comme ceci:

map.addLayer({ 
 
    'id': 'states-layer', 
 
    'type': 'fill', 
 
    'source': { 
 
     'type': 'geojson', 
 
     'data': 'geojson.js' 
 
    }, 
 
    'paint': { 
 
     'fill-color': { 
 
      type: 'identity', 
 
      property: 'color', 
 
     }, 
 
     'fill-outline-color': 'rgba(200, 100, 240, 1)' 
 
    } 
 
});

Voir aussi: https://www.mapbox.com/mapbox-gl-js/style-spec/#function-type

Et: https://www.mapbox.com/mapbox-gl-js/style-spec/#types-color