Comment étiqueter les polygones GeoJSON?

9

J'utilise Leaflet combiné avec les fonctionnalités GeoJSON. Existe-t-il un moyen d'étiqueter les entités GeoJSON (dans ce cas - les polygones)? Il devrait obtenir des étiquettes de

feature.properties.name 

C'est mon code où je pense que je pourrais insérer une étiquette:

function style(feature) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                fillColor: getColor(feature.properties.coloring)
            };
        }
contre-courant
la source
1
Pourriez-vous publier la solution que vous avez utilisée pour étiqueter le polygone, si elle est toujours à portée de main?
a1an

Réponses:

5

Vous devez connaître le format que la brochure prévoit d'utiliser. RFM. Exemple: OpenLayers attend de ce format GeoJSON qu'il crée un point et lui donne des attributs personnalisés:

{"type":"FeatureCollection",
    "features":[
        {"type":"Feature",
            "properties":{
                "name":"TRON-02",
                "serial":"TRON002",
                "bearing":0,
                "color":"green",
                "size":15,
                "image":"img/unit_map3.png",
            },
            "geometry":{
                "type":"Point",
                "coordinates":[-50.06542968749966,-23.749149728383717]
            }
        }
    ]
}

Comme vous pouvez le voir, j'ai créé une géométrie (point) et y associe mes attributs. Lorsque j'envoie ceci à OpenLayers, le résultat s'inscrira dans l'exemple de @ Aragon, en utilisant "couleur" et "nom" (comme étiquette) pour personnaliser le point sur la carte.

Veuillez copier et coller cet exemple GeoJSON dans http://json.parser.online.fr/ ou utiliser le site pour essayer de valider le vôtre.

Magno C
la source
La question n'était-elle pas des polygones? Comment une réponse sur la géométrie des points a-t-elle résolu la question?
a1an
Et qu'est-ce qu'un polygone? Vous nommerez le même. La seule chose qui va changer est la partie "géométrie". Non seulement a résolu la question, mais a reçu 5 ups jusqu'à présent.
Magno C
Permettez-moi de reformuler alors: j'ai la même question et placer une étiquette sur un polygone est très différent de le placer en un point, donc polygone signifie pour moi un objet fermé bidimensionnel avec plusieurs bords, dans ce contexte. C'est pourquoi j'ai intérêt à obtenir quelques détails, d'où mon premier commentaire. Une réponse "ça l'a résolu" n'est pas si utile alors mais merci quand même :-)
a1an
1
Ajoutez simplement les "propriétés" et tout ira bien. Voir la réponse @Aragon return feature.properties.color;Comme vous pouvez le voir, propertiesest un featureattribut et possède l' colorun de ses attributs. Vous pouvez mettre tout ce que vous voulez dans cet objet de cette façon.
Magno C du
2
RFMest totalement inutile. Et la différence entre un point et un polygone est importante, car savoir quelle géométrie utiliser est exactement le problème ici
Stephen Lead
5

Voici comment je l'ai résolu avec des polygones et des étiquettes Leaflet, afin que vous obteniez une étiquette flottante sur le polygone avec sa propriété name.

Supposer:

  • vous obtenez la réponse json analysée dans la variable json
  • il n'y a que des polygones simples sans trous dans json
  • polygon_style contient les options de style renvoyées par votre fonction de style
  • labels_layer est un dépliant Layergroup (ou directement votre carte)

Alors:

for ( var i=0; i < json.features.length; i++ ) {
    feat = json.features[i];
    coords = [];
    for ( var j = 0 ; j < feat.geometry.coordinates[0].length - 1; j++ ) {
        coord = feat.geometry.coordinates[0][j];
        point = [];
        point.push( coord[1], coord[0]);
        coords.push( point );
    }
    labels_layer.addLayer(L.polygon( coords, polygon_style ).bindLabel(feat.properties.name))  ;
}

Curieusement, les coordonnées GeoJson (en fait EPSG: 4326) et Leaflet sont inversées dans l'ordre.

a1an
la source
1
Pour ceux qui utilisent Leaflet 1.0+, le L.Label a été déplacé dans le noyau de Leaflet en tant que L.Tooltip et le plugin est obsolète. Vous utiliseriez bindTooltip () au lieu de bindLabel (). github.com/Leaflet/Leaflet.label
aethergy
1

je pense que cette question concerne openlayers.if donc, vous pouvez utiliser pour l'étiquetage;

var style = new OpenLayers.Style({
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7,
    fillColor: "${getColor}",  
    label: "${getLabel}"
  } , {
    context: {
      getColor: function(feature) {
        return feature.properties.color;
      },
      getLabel: function(feature) {
        return feature.properties.name;
      }
    }
  );

J'espère que ça t'aide...

Aragon
la source
1
Ce n'est pas OpenLayers. J'utilise Leaflet combiné avec les fonctionnalités GeoJSON. Donc ça ne marche pas. Mais merci d'avoir essayé.
contre
Pourquoi ne le faites-vous pas fillColor: "${color}"au lieu de créer une fonction?
Magno C
1
@Magno C il n'y a pas de différence entre vos points, les deux sont les mêmes. j'ai écrit ceci pour si vous voulez ajouter une fonction plus compliquée comme couleur aléatoire ou autre chose. merci encore pour votre point.
Aragon
Compris l'Aragon. Merci pour la nouvelle méthode. Peut être utile à l'avenir. Pouces vers le haut !
Magno C
Je pense qu'il n'y a aucun moyen @againstflow de s'écouler du format que j'ai montré, car il y a une spécification régissant GeoJSON ici: lien
Magno C