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

Question

有没有办法在图层控件内的输入复选框之前添加图标/img？有没有办法在复选框中添加值(或 id(属性？现在我可以添加一个带有这个的图标，但这并不完全是我想要的。谢谢。

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

这将在复选框后添加一个 img。也许以某种方式覆盖了 Control.Layers.js 中的 _addItem 方法，但我不知道如何。

更新：有没有办法在这个阶段的复选框中添加一个价值属性？

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>

Answer 1

可能希望使用自定义 JavaScript 执行此操作。 我不相信有任何内置的方法可以做到这一点。 尝试这样的事情：

将控制层保存到变量：

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

获取 _overlaysList 属性(除非您要更改底图(：

var list = layers._overlaysList;

迭代输入标记：

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

找到要更改的图像，并为其添加图像。

Answer 2

好吧

，如果有人感兴趣，这是我的解决方案

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