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.