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

有没有办法在图层控件内的输入复选框之前添加图标/img？ 有没有办法在复选框中添加一个值（或id）道具？ 现在我可以用它添加一个图标，但这并不是我想要的。谢谢

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

因此，我可以在复选框中添加一个值和名称（范围、标签），以获得

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

名称

可能希望通过自定义JavaScript实现这一点。我不相信有任何内在的方式来实现这一点。试着这样做：

将控制层保存到变量：

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

获取_overlyslist属性（除非您正在更改底图）：

迭代输入标记：

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

---

找到一个你想要修改的，并在它前面加上一个图像。

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

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

---

谢谢但是有没有办法在init阶段将值attr设置为输入复选框？请看我更新的问题。我相信唯一的选项是对象（名称：层）中的键/值对

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

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