javascript - ejemplos - Etiqueta simple en un folleto(geojson) polígono

leaflet

Question

Estoy intentando lo que me imagino que es un caso de uso bastante común con un objeto multipolígono de folleto.

Creo el MultiPolygon usando geojson:

var layer = L.GeoJSON(g, style_opts);

Lo que me gustaría es poner una etiqueta de texto simple en el centro de cada polígono. (Por ejemplo, algo como poner el nombre del estado en el centro de cada estado).

He consultado: https://groups.google.com/forum/?fromgroups=#!topic/leaflet-js/sA2HnU5W9Fw

Lo que en realidad superpone el texto, pero cuando agrego un grupo de polígonos, parece que la etiqueta está descentrada de manera extraña, y actualmente no puedo localizar el problema.

También he mirado: https://github.com/jacobtoye/Leaflet.label

pero parece que solo pone la etiqueta en los polígonos cuando pasas el mouse sobre el polígono, y no permanece estático en el polígono.

Creo que mi mejor curso de acción es usar ese primer enlace y rastrear por qué está cambiando la ubicación, pero mientras tanto, si alguien sabe de una manera rápida y fácil de colocar una etiqueta en un polígono en un folleto, estar muy agradecido

Además, si tengo alguna suposición errónea acerca de los dos enlaces anteriores, siéntase libre de aclararme.

Muchas gracias de antemano.

Answer 1

El plugin de etiquetas de folletos también permite etiquetas estáticas, vea la demo . La única razón por la que la etiqueta de polilínea no es estática es que se mueve a medida que se mueve a lo largo de la polilínea.

Probablemente pueda hacerlo mejor que esto, al anular bindLabel () para los polígonos, pero esta es una forma sencilla de agregar una etiqueta estática al centro de un polígono:

label = new L.Label()
label.setContent("static label")
label.setLatLng(polygon.getBounds().getCenter())
map.showLabel(label);

http://jsfiddle.net/CrqkR/6/

Answer 2

Puede usar la opción onEachFeature de L.geoJson para crear un nuevo L.divIcon para cada polígono.

L.geoJson(geoJsonData, {
  onEachFeature: function(feature, layer) {
    var label = L.marker(layer.getBounds().getCenter(), {
      icon: L.divIcon({
        className: ''label'',
        html: feature.properties.NAME,
        iconSize: [100, 40]
      })
    }).addTo(map);
  }
);