Suite

Modifier par lots les marqueurs GeoJSON avec Mapbox.js


Je ne peux pas comprendre comment styliser tous les points caractéristiques d'un fichier GeoJson local à la fois à l'aide de Mapbox.js. Mon fichier GeoJSON a environ 500 points. Je pourrais parcourir chaque point du fichier GeoJSON et définir leurs propriétés individuellement, mais cela n'est pas pratique en raison du nombre de points dans mon fichier. Je peux afficher mes points sur ma carte avec le code ci-dessous, mais je ne peux pas comprendre quel code est impliqué dans le style de tous ces points avec une certaine couleur ou un certain symbole.

Voici ce que j'ai jusqu'à présent (ma clé api mapbox a été supprimée):

   Une carte dépliante !      

Et voici un extrait de mon fichier GeoJSON :

var rongeurs1 = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -71.1491,42.3419 ] } , "properties": { "FIELD3":"Rongeur" ​​} },

Pas clair si vous voulez que tous les points soient de la même couleur, ou stylisés en fonction d'une propriété de vos données (une catégorie d'animal, etc.). En supposant ce dernier, vous pouvez configurer votre carte légèrement différemment et utiliser lepointVersCalquefonction pour renvoyer un marqueur de cercle pour chaque point :

// crée un objet pour rechercher une couleur hexadécimale pour chaque catégorie dans vos données var colours = { "Rodent": '#ff0000', "Fox": '#adadad', "Coyote": '#20b2aa' }; // options de marqueur par défaut pour un marqueur de cercle var markerOptions = { radius: 8, fillColor: "#ff7800", // sera mis à jour pour chaque entité, sous la couleur: "#000", weight: 1, opacity: 1, fillOpacity : 0.8} ; // init la carte var map = L.mapbox.map('map','mapbox.streets') .setView([42.35,-71.08],13); // ajouter le geojson : chaque entité sera stylisée en fonction des propriétés de FIELD3 L.geoJson(rongeurs1, { pointToLayer : function (feature, latlng) { // définir fillColor en recherchant la clé FIELD3 dans votre liste de couleurs markerOptions.fillColor = couleurs [feature.properties[FIELD3]] ; return L.circleMarker(latlng, markerOptions ); } }).addTo(map);


Voir la vidéo: Ajouter plus dun paragraphe et modifier lattribut de chaque paragraphe (Octobre 2021).