Como rotular polígonos GeoJSON?


9

Estou usando o Leaflet combinado com os recursos do GeoJSON. Existe uma maneira de rotular os recursos do GeoJSON (neste caso - polígonos)? Deve obter rótulos de

feature.properties.name 

Este é o meu código onde acho que poderia inserir o rótulo:

function style(feature) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                fillColor: getColor(feature.properties.coloring)
            };
        }

11
Você se importaria de postar a solução usada para rotular o polígono, se ainda estiver disponível?
a1an

Respostas:


5

Você precisa conhecer o formato de folheto que espera usar. RFM. Exemplo: O OpenLayers espera que este formato GeoJSON crie um ponto e forneça alguns atributos personalizados:

{"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]
            }
        }
    ]
}

Como você pode ver, eu criei uma geometria (ponto) e juntei meus atributos a ela. Quando eu enviar para o OpenLayers, o resultado se encaixará no exemplo de @ Aragon, usando "color" e "name" (como label) para personalizar o ponto no mapa.

Copie e cole este exemplo do GeoJSON em http://json.parser.online.fr/ ou use o site para tentar validar o seu próprio.


Não era a pergunta sobre polígonos? Como uma resposta sobre a geometria de pontos resolveu a questão?
a1an

E o que é um polígono? Você nomeará o mesmo. A única coisa que mudará é a parte "geometria". Não apenas resolveu a questão, mas recebeu 5 ups até agora.
Magno C

Deixe-me reformular: tenho a mesma pergunta e colocar um rótulo em um polígono é bem diferente de colocá-lo em um ponto; portanto, polígono significa para mim um objeto fechado bidimensional com várias arestas, neste contexto. É por isso que tenho interesse em obter alguns detalhes, daí o meu primeiro comentário. Um "que resolvê-lo" resposta não é tão útil, em seguida, mas obrigado de qualquer maneira :-)
a1an

11
Basta adicionar o material "propriedades" e tudo ficará bem. Veja a resposta do @Aragon return feature.properties.color;Como você pode ver, propertiesé um featureatributo e tem colorcomo um de seus atributos. Você pode colocar o que quiser neste objeto, seguindo este caminho.
Magno C

2
RFMé totalmente desnecessário. E a diferença entre um ponto e um polígono é significativo, uma vez sabendo que a geometria para uso é exatamente a questão aqui
Stephen chumbo

5

Eis como eu o resolvi com polígonos e rótulos de folhetos, para que você obtenha um rótulo flutuante no polígono com sua propriedade name.

Suponha:

  • você obtém a resposta json analisada na variável json
  • existem apenas polígonos simples sem buracos no json
  • polygon_style contém opções de estilo retornadas por sua função de estilo
  • labels_layer é um grupo de camadas do folheto (ou diretamente no seu mapa)

Então:

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

Por incrível que pareça, as coordenadas GeoJson (na verdade EPSG: 4326) e Leaflet são trocadas em ordem.


11
Para aqueles que usam o Leaflet 1.0+, o L.Label foi movido para o núcleo do Leaflet como L.Tooltip e o plug-in foi preterido. Você usaria bindTooltip () em vez de bindLabel (). github.com/Leaflet/Leaflet.label
aethergy

1

Eu acho que essa pergunta é sobre openlayers.if, então você pode usar para rotular;

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

espero que ajude você ...


11
Não é OpenLayers. Estou usando o Leaflet combinado com os recursos do GeoJSON. Então isso não funciona. Mas obrigado por tentar.
precisa

Por que você não, em fillColor: "${color}"vez de criar uma função?
Magno C

11
@ Magno C, não há diferença entre o seu ponto. Ambos são iguais. Eu escrevi isso para se você quiser adicionar uma função mais complicada como cor aleatória ou qualquer outra coisa. ainda obrigado pelo seu ponto.
Aragão4

Aragon entendido. Obrigado pelo novo método. Pode ser útil no futuro. Afirmativo !
Magno C

Eu acho que não há nenhuma maneira @againstflow correr para fora do formato I mostram já, uma vez que existe uma especificação governando GeoJSON aqui: ligação
Magno C
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.