如何添加img到L.control.layers？

有沒有在圖層控件中的輸入複選框之前添加圖標/ img的方法？有沒有辦法將一個值（或ID）道具添加到複選框？現在我可以添加一個圖標，但這並不是我想要的。謝謝。如何添加img到L.control.layers？

L.control.layers({ 
    null 
}, { 
    '<img src="/img/fish.png">Some text':new L.layerGroup(), 
}).addTo(map);

這會在複選框後添加一個img。也許以某種方式覆蓋Control.Layers.js中的_addItem方法，但我不知道如何。

更新：有沒有一種方法可以在此階段的複選框中添加一個值prop？

var layers = L.control.layers({}, { 
    'name':new L.layerGroup(), // how to add val? 
}).addTo(map);

所以我可以添加一個值和名稱（跨度，標籤）複選框，以獲得

<div> 
<input type="checkbox" value="some val" class="leaflet-control-layers-selector"><span>name</span> 
</div>

來源

2017-06-12 SERG

可能要使用自定義JavaScript來做到這一點。我不相信有任何內置的方式來實現這一點。嘗試是這樣的：

保存控制層到一個變量：

var layers = L.control.layers({}, {'name' : new L.layerGroup()}).addTo(map);

獲取_overlaysList財產（除非你改變一個底圖）：

var list = layers._overlaysList;

迭代輸入標籤：

var inputs = list.getElementsByTagName('input');

找到你想要改變的那個，並在它前面加一個圖像。

來源

2017-06-12 16:50:05 bozdoz

謝謝！但是有沒有辦法在init階段將值attr設置爲輸入複選框？請看我最新的問題。 – SERG

我相信唯一的選擇是對象中的鍵/值對（名稱：圖層） – bozdoz

嗯，這裏是我的解決方案，如果有人有興趣

//---------------- OVERRIDING THE LAYERS ------------------- 
L.Control.IconLayers = L.Control.Layers.extend({ 

    initialize: function (baseLayers, overlays, options) { 
     L.Control.Layers.prototype.initialize.call(this, baseLayers, overlays, options); 
    }, 
    _addItem: function (obj) { 
     //console.log("Layer Control:",obj) 
     var label = document.createElement('label'), 
      input, icon = false, 
      checked = this._map.hasLayer(obj.layer); 

     if (obj.overlay) { 
      input = document.createElement('input'); 
      input.type = 'checkbox'; 
      input.className = 'leaflet-control-layers-selector'; 
      input.defaultChecked = checked; 
      input.value = obj.name; // add 
      console.log(obj) 
      if ('getIcon' in obj.layer) { 
       icon = obj.layer.getIcon(); 
      } 
     } else { 
      input = this._createRadioElement('leaflet-base-layers', checked); 
     } 

     var layer_name = obj.name 
     if (obj.layer.hasOwnProperty('_options')){ 
      layer_name = obj.layer._options.name 
      input.id = obj.layer._options.id 
     } 

     input.layerId = L.stamp(obj.layer); 
     L.DomEvent.on(input, 'click', this._onInputClick, this); 
     var name = document.createElement('span'); 
     name.innerHTML = ' ' + layer_name; 
     label.appendChild(input); 

     if (icon) { 
      var i = document.createElement('span'); 
      i.innerHTML = icon; 
      label.appendChild(i); 
     } 

     label.appendChild(name); 
     var container = obj.overlay ? this._overlaysList : this._baseLayersList; 
     container.appendChild(label); 
     return label; 
    } 
}); 

L.control.iconLayers = function(baseLayers, overlays, options) { 
    return new L.Control.IconLayers(baseLayers, overlays, options); 
} 

L.customLayerGroup = L.LayerGroup.extend({ 
    initialize: function (layers) { 
     console.log("LAYERS:",layers) 
     L.LayerGroup.prototype.initialize.call(this, layers); 
     this._options = layers; 
    }, 
}); 
//---------------- OVERRIDING THE LAYERS ------------------- 



var layers = L.control.iconLayers({ 
    'Mapbox Streets': L.mapbox.tileLayer('mapbox.streets').addTo(map), 
    'Mapbox Light': L.mapbox.tileLayer('mapbox.light') 
}, { 

    '1':new L.layerGroup(), 
    '2':new L.layerGroup(), 
    '3':new L.customLayerGroup({name:"Boats",id:"3", value:"3"}), 

}).addTo(map);

來源

2017-06-15 19:38:46 SERG

如何添加img到L.control.layers？

回答

相關問題