Como rotular pontos geojson no Leaflet?


11

Como mostrar etiquetas para pontos geojson em um mapa do Leaflet?

Há o Leaflet.label que agora está obsoleto em favor da L.Tooltip , mas que mostra apenas o texto ao passar o mouse. Quero mostrar os rótulos de texto diretamente no mapa sem precisar da interação do usuário.

Entrada de amostra - https://gist.github.com/maphew/e168430e999fc738eeb3448feda121cd

Resultado desejado (pontos verdes com rótulos de texto, os outros elementos gráficos são apenas para contexto):

mapa simulado de pontos com rótulos de texto

Atualização: eu quero criar um texto que combine com o mapa, como na imagem abaixo, e não com uma dica de ferramenta pop-up.

imagem com a parte indesejada riscada


3
Basta usar a opção de dica de ferramenta permanent? De leafletjs.com/reference-1.1.0.html#tooltip-option :Whether to open the tooltip permanently or only on mouseover
BradHards

3
Use L.Markers com L.DivIcons.
IvanSanchez

Se você não conseguir resolver isso apenas no Leaflet, uma opção pode ser colocar seus pontos no GeoServer (ou similar) e carregá-los como uma camada de bloco WMS, na qual o estilo mostra rótulos . No presente exemplo os rótulos azuis são atingidos desta forma
Stephen Chumbo

@IvanSanchez Não consigo fazer isso funcionar. O html personalizado não está chegando. Veja a minha tentativa de jsfiddle.net/maphew/q0refcwx/1
Matt Wilkie

Respostas:


11

Aqui está uma implementação seguindo a sugestão do @BradHards de usar a permanentopção de dica de ferramenta. A opacityopção reduz o contêiner de texto e de plano de fundo igualmente.

var data_points = {
    "type": "FeatureCollection",
    "name": "test-points-short-named",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": [
    { "type": "Feature", "properties": { "name": "1" }, "geometry": { "type": "Point", "coordinates": [ -135.02507178240552, 60.672508785052223 ] } },
    { "type": "Feature", "properties": { "name": "6"}, "geometry": { "type": "Point", "coordinates": [ -135.02480935075292, 60.672888247036376 ] } },
    { "type": "Feature", "properties": { "name": "12"}, "geometry": { "type": "Point", "coordinates": [ -135.02449372349508, 60.672615176262731 ] } },
    { "type": "Feature", "properties": { "name": "25"}, "geometry": { "type": "Point", "coordinates": [ -135.0240752514004, 60.673313811878423 ] } }
    ]};

var pointLayer = L.geoJSON(null, {
  pointToLayer: function(feature,latlng){
    label = String(feature.properties.name) // Must convert to string, .bindTooltip can't use straight 'feature.properties.attribute'
    return new L.CircleMarker(latlng, {
      radius: 1,
    }).bindTooltip(label, {permanent: true, opacity: 0.7}).openTooltip();
    }
  });
pointLayer.addData(data_points);
mymap.addLayer(pointLayer);

captura de tela

Exemplo de trabalho completo: https://jsfiddle.net/maphew/gtdkxj8e/3/

Para remover o fundo da etiqueta

Consulte Substituindo o estilo da dica de ferramenta de folheto? para obter detalhes sobre como modificar completamente a borda do rótulo CSS e Removendo a dica de ferramenta no mapa Leaflet.js? para remover o ponteiro do triângulo sem tocar no CSS (basta adicionar direction: "center"a .bindTooltip!)

Javascript:

.bindTooltip(label, {permanent: true, 
   direction: "center",
   className: "my-labels"}).openTooltip();

CSS:

.leaflet-tooltip.my-labels {
  background-color: transparent;
  border: transparent;
  box-shadow: none;
  }

captura de tela: etiquetas sem gráficos de contêiner

Exemplo de trabalho completo: https://jsfiddle.net/maphew/gtdkxj8e/7/


1
Se você seguir esse caminho, poderá alterar o css das dicas de ferramentas ou adicionar o nome da classe (a dica de ferramenta é herdada do divoverlay) à dica de ferramenta para remover as cores, bordas, sombras, etc. do plano de fundo. .leaflet-tooltip {background-color: transparent;border: transparent;}
Diffusion_net

Obrigado @Diffusion_net! essas palavras-chave me levaram a perguntas relacionadas e a uma solução mais completa (agora adicionada à resposta).
22617 Julio
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.