cách thêm văn bản để hiển thị trên bản đồ vào đối tượng geojson trong tờ rơi

Question

Vì vậy, tôi có một lớp geojson trong tờ rơi và tôi có thể thêm các đối tượng geojson vào lớp này để hiển thị trên bản đồ kết quả.

Bây giờ tôi muốn thêm nhãn văn bản để hiển thị gần đối tượng.

Ví dụ này cho thấy việc sử dụng đối tượng tùy chỉnh L.control() để hiển thị thông tin bổ sung trên bản đồ. Mà dường như gần với những gì tôi muốn làm.

Với ví dụ này, tôi muốn thêm nhãn văn bản ban đầu của Nhà nước (tức là "TX", "FL") được định vị trên mỗi trạng thái. Có thể L.control() được sử dụng để thực hiện việc này hay không hoặc có cách nào khác không?

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

tôi đang tìm kiếm cùng một câu hỏi gần đây và chỉ thực hiện nó ngày hôm qua dựa trên một bài viết trong nhóm google. https://groups.google.com/forum/#!topic/leaflet-js/sA2HnU5W9Fw

Nhờ Adrian cho mẫu mã ban đầu.

Dưới đây là giải pháp:

Mở rộng lớp sau như sau:

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

Hơn nữa thêm css này:

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

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

Và sau đó hiển thị các nhãn văn bản như sau:

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

Kết quả:

Answer 2

Label Overlay trong Tờ rơi Sử dụng Marker Class và DivIcon Lớp Với 'html' tài sản

Cá nhân, tôi sử dụng phương pháp này để thực hiện các nhãn văn bản trên bản đồ. Bằng cách này, tôi có thể sử dụng tất cả các phương pháp và sự kiện của Lớp đánh dấu hiện có mà không cần nỗ lực thêm. Đó là một chút giống như chỉ sử dụng một nhãn văn bản thay thế cho một biểu tượng, tôi đoán.

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

CSS của tôi trông giống như:

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

Ngoài ra, tôi chưa khám phá này được nêu ra, nhưng có lẽ bạn có thể thêm một png với CSS và sau đó bù đắp cho văn bản, do đó bạn có thể bọc một biểu tượng và nhãn trong cùng một đối tượng Marker bằng cách sử dụng lớp DivIcon Leaflet ?? Điều này sẽ dễ dàng với hình dạng div (ví dụ: hộp, hình tròn), nhưng tôi không chắc chắn về việc thêm png vào CSS cho đối tượng Marker - bởi vì tôi không phải là guru CSS bằng bất kỳ phương tiện nào.