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

所以我可以在复选框中添加一个值和名称（span，label）以获取

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

Answer 1

Might want to do this with custom JavaScript. I don't believe there is any built-in way to accomplish this. Try something like this:

Save the control layers to a variable:

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

Get the _overlaysList property (unless you're altering a base map):

var list = layers._overlaysList;

Iterate the input tags:

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

Find the one you want to alter, and prepend an image to it.

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

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

2 个答案: