come aggiungere testo per la visualizzazione su mappa a un oggetto geojson nel volantino

Question

Quindi ho un layer geojson in leaflet e posso aggiungere oggetti geojson a questo layer per la visualizzazione sulla mappa risultante.

Ora mi piacerebbe aggiungere un'etichetta di testo da visualizzare vicino all'oggetto.

Questo esempio mostra l'uso di un oggetto personalizzato L.control() per visualizzare informazioni aggiuntive sulla mappa. Che sembra vicino a quello che voglio fare.

Dato questo esempio, vorrei aggiungere etichette di testo iniziali dello stato (ad esempio "TX", "FL") posizionate su ogni stato. È possibile utilizzare L.control() per farlo oppure esiste un altro modo?

http://leaflet.cloudmade.com/examples/choropleth.html

var info = L.control(); 

info.onAdd = function (map) { 
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" 
    this.update(); 
    return this._div; 
}; 

// method that we will use to update the control based on feature properties passed 
info.update = function (props) { 
    this._div.innerHTML = '<h4>US Population Density</h4>' + (props ? 
     '<b>' + props.name + '</b><br />' + props.density + ' people/mi<sup>2</sup>' 
     : 'Hover over a state'); 
}; 

info.addTo(map); 

Answer 1

Cercavo la stessa domanda di recente e appena implementato ieri sulla base di un post nel gruppo Google. https://groups.google.com/forum/#!topic/leaflet-js/sA2HnU5W9Fw

Grazie ad Adrian per il codice originale.

ecco la soluzione:

Estendere la seguente classe, come di seguito:

<script> 

    L.LabelOverlay = L.Class.extend({ 
     initialize: function(/*LatLng*/ latLng, /*String*/ label, options) { 
      this._latlng = latLng; 
      this._label = label; 
      L.Util.setOptions(this, options); 
     }, 
     options: { 
      offset: new L.Point(0, 2) 
     }, 
     onAdd: function(map) { 
      this._map = map; 
      if (!this._container) { 
       this._initLayout(); 
      } 
      map.getPanes().overlayPane.appendChild(this._container); 
      this._container.innerHTML = this._label; 
      map.on('viewreset', this._reset, this); 
      this._reset(); 
     }, 
     onRemove: function(map) { 
      map.getPanes().overlayPane.removeChild(this._container); 
      map.off('viewreset', this._reset, this); 
     }, 
     _reset: function() { 
      var pos = this._map.latLngToLayerPoint(this._latlng); 
      var op = new L.Point(pos.x + this.options.offset.x, pos.y - this.options.offset.y); 
      L.DomUtil.setPosition(this._container, op); 
     }, 
     _initLayout: function() { 
      this._container = L.DomUtil.create('div', 'leaflet-label-overlay'); 
     } 
    }); 

</script> 

inoltre aggiungere questo css:

<style> 
    .leaflet-popup-close-button { 
     display:none; 
    } 

    .leaflet-label-overlay { 
     line-height:0px; 
     margin-top: 9px; 
     position:absolute; 
    } 
</style> 

e quindi visualizzare le etichette di testo, come di seguito:

<script> 
    var map = L.map('map').setView([51.898712, 6.7307100000001], 4); 

    // add markers 
    // ... 

    // add text labels: 
    var labelLocation = new L.LatLng(51.329219337279405, 10.454119349999928); 
    var labelTitle = new L.LabelOverlay(labelLocation, '<b>GERMANY</b>'); 
    map.addLayer(labelTitle); 


    var labelLocation2 = new L.LatLng(47.71329162782909, 13.34573480000006); 
    var labelTitle2 = new L.LabelOverlay(labelLocation2, '<b>AUSTRIA</b>'); 
    map.addLayer(labelTitle2); 

    // In order to prevent the text labels to "jump" when zooming in and out, 
    // in Google Chrome, I added this event handler: 

    map.on('movestart', function() { 
     map.removeLayer(labelTitle); 
     map.removeLayer(labelTitle2); 
    }); 
    map.on('moveend', function() { 
     map.addLayer(labelTitle); 
     map.addLayer(labelTitle2); 
    }); 
</script> 

Risultato:

Answer 2

Label Overlay nell'opuscolo Utilizzando Marker Classe A e Classe Divicon Con 'html' immobile

Personalmente, io uso questo metodo per implementare le etichette di testo sulla mappa. In questo modo posso utilizzare tutti i metodi e gli eventi Marker Class esistenti senza sforzi aggiuntivi. È un po 'come usare un'etichetta di testo in sostituzione di un'icona, immagino.

 var textLatLng = [35.1436, -111.5632]; 
     var myTextLabel = L.marker(textLatLng, { 
      icon: L.divIcon({ 
       className: 'text-labels', // Set class for CSS styling 
       html: 'A Text Label' 
      }), 
      draggable: true,  // Allow label dragging...? 
      zIndexOffset: 1000  // Make appear above other map features 
     }); 

mio CSS assomiglia:

 .text-labels { 
      font-size: 2em; 
      font-weight: 700; 
      /* Use color, background, set margins for offset, etc */ 
     } 

Inoltre, non ho ancora esplorato questo, ma forse si può aggiungere un png al CSS e poi compensare il testo, in modo che si può avvolgere un'icona e un'etichetta nello stesso oggetto Marker usando la classe Leaflet DivIcon ?? Questo sarebbe facile con una forma div (ad es. Scatola, cerchio), ma non sono sicuro di aggiungere un png al CSS per l'oggetto Marker - perché non sono un guru dei CSS in alcun modo.