¿Cómo etiquetar los puntos geojson en el folleto?


11

¿Cómo mostrar etiquetas para puntos geojson en un mapa de folleto?

Hay Leaflet.label que ahora está en desuso a favor de L.Tooltip , pero que solo muestra texto al pasar el mouse. Quiero mostrar las etiquetas de texto directamente en el mapa sin necesidad de la interacción del usuario.

Entrada de muestra: https://gist.github.com/maphew/e168430e999fc738eeb3448feda121cd

Resultado deseado (puntos verdes con etiquetas de texto, los otros elementos gráficos son solo para contexto):

mapa simulado de puntos con etiquetas de texto

Actualización: Quiero crear texto que se mezcle con el mapa como la imagen a continuación, no una información sobre herramientas emergente.

imagen con parte no deseada tachada


3
¿Solo usa la opción de información sobre herramientas 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 con L.DivIcons.
IvanSanchez

Si no puede resolver esto solo en el folleto, una opción podría ser colocar sus puntos en GeoServer (o similar) y cargarlos como una capa de mosaico WMS en la que el estilo muestra etiquetas . En este ejemplo, las etiquetas azules se logran de esta manera
Stephen Lead

@ Ivanvanchez No puedo hacer que eso funcione. El html personalizado no está llegando. Vea mi intento en jsfiddle.net/maphew/q0refcwx/1
matt wilkie

Respuestas:


11

Aquí hay una implementación siguiendo la sugerencia de @BradHards de usar la permanentopción para información sobre herramientas. La opacityopción desvanece tanto el texto como el contenedor de fondo por igual.

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 pantalla

Ejemplo de trabajo completo: https://jsfiddle.net/maphew/gtdkxj8e/3/

Para eliminar el fondo de la etiqueta

Ver ¿Cómo sobrescribir el estilo de información sobre herramientas Folleto? para obtener detalles sobre cómo modificar CSS y eliminar completamente el borde de la etiqueta de información sobre herramientas en el mapa Leaflet.js? para quitar el puntero del triángulo sin tocar el CSS (¡simplemente agrégalo 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 pantalla: etiquetas sin gráficos de contenedor

Ejemplo de trabajo completo: https://jsfiddle.net/maphew/gtdkxj8e/7/


1
Si toma esta ruta, puede cambiar el CSS de la información sobre herramientas o agregar el nombre de clase (la información sobre herramientas se hereda de divoverlay) a la información sobre herramientas para eliminar los colores de fondo, bordes, sombras, etc. .leaflet-tooltip {background-color: transparent;border: transparent;}
Diffusion_net

Gracias @Diffusion_net! esas palabras clave me llevaron a preguntas relacionadas y a una solución más completa (ahora agregada para responder).
Matt Wilkie
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.