लीफलेट

Question

में एक geojson ऑब्जेक्ट में मानचित्र पर डिस्प्ले के लिए टेक्स्ट जोड़ने के लिए कैसे करें इसलिए मेरे पास पुस्तिका में एक जोजसन परत है, और परिणामस्वरूप मानचित्र पर प्रदर्शित करने के लिए मैं इस परत पर जोजसन ऑब्जेक्ट्स जोड़ सकता हूं।

अब मैं ऑब्जेक्ट के पास प्रदर्शित करने के लिए एक टेक्स्ट लेबल जोड़ना चाहता हूं।

यह उदाहरण मानचित्र पर अतिरिक्त जानकारी प्रदर्शित करने के लिए कस्टम L.control() ऑब्जेक्ट का उपयोग दिखाता है। जो मैं करना चाहता हूं उसके करीब लगता है।

इस उदाहरण को देखते हुए, मैं प्रत्येक राज्य में राज्य प्रारंभिक पाठ लेबल (यानी "TX", "FL") जोड़ना चाहता हूं। क्या L.control() ऐसा करने के लिए उपयोग किया जा सकता है, या कोई और तरीका है?

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

मैं हाल ही में एक ही प्रश्न के लिए देख रहा था और बस गूगल समूह में पोस्टिंग के आधार पर कल इसे लागू किया। https://groups.google.com/forum/#!topic/leaflet-js/sA2HnU5W9Fw

मूल कोड नमूने के लिए एड्रियन के लिए धन्यवाद।

<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> 

इसके अलावा इस सीएसएस जोड़ें::

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

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

और फिर नीचे के रूप में पाठ लेबल प्रदर्शित:

नीचे के रूप में निम्नलिखित वर्ग बढ़ाएँ:

यहाँ समाधान है

<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> 

परिणाम: पत्रक में

Answer 2

लेबल ओवरले 'एचटीएमएल' संपत्ति

व्यक्तिगत रूप से, मैं इस विधि का उपयोग मानचित्र पर पाठ लेबल को लागू करने के साथ मार्कर क्लास और DivIcon कक्षा का उपयोग करना। इस तरह से मैं सभी मौजूदा मार्कर क्लास विधियों और घटनाओं का उपयोग बिना किसी अतिरिक्त प्रयास के कर सकता हूं। यह एक आइकन की जगह में एक टेक्स्ट लेबल का उपयोग करने जैसा है, मुझे लगता है।

 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 
     }); 

मेरे सीएसएस लगता है:

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

इसके अलावा, मैं यह अभी तक नहीं दी गयी है, लेकिन हो सकता है आप सीएसएस के लिए एक png जोड़ सकते हैं और तब पाठ ऑफसेट, ताकि आप लपेट कर सकते हैं पत्रक DivIcon वर्ग का उपयोग कर एक ही मार्कर ऑब्जेक्ट में एक आइकन और लेबल ?? यह एक div आकार (उदा। बॉक्स, सर्कल) के साथ आसान होगा, लेकिन मैं मार्कर ऑब्जेक्ट के लिए सीएसएस में एक पीएनजी जोड़ने के बारे में निश्चित नहीं हूं - क्योंकि मैं किसी भी माध्यम से सीएसएस गुरु नहीं हूं।