更改传单图层控件图标

Question

如果有多个此类图层控件，如何在网页中更改传单图层控件图标的图标？

目标是在这里设置不同的图标：

代码如下：

var layers1 = L.control.layers(...).addTo(map);
var layers2 = L.control.layers(...).addTo(map);

如果我通过CSS更改控件的图标，则会更改所有图层控件。

Answer 1

一方面，我建议您查看Leaflet list of plugins for layer switchers。可能有一个更适合您的用例，而不是两个默认L.Control.Layers具有不同的图标。

另一方面：图层控件图标由CSS提供，位于this line：

.leaflet-control-layers-toggle {
    background-image: url(images/layers.png);
    width: 36px;
    height: 36px;
}

该CSS类名称来自L.Control.Layers的{​​{3}}：

_initLayout: function () {
    var className = 'leaflet-control-layers',
    // [snip]
    var link = this._layersLink = DomUtil.create('a', className + '-toggle', container);        
    // [snip]
}

请注意保存图像的切换器HTMLElement如何存储为私有属性this._layersLink。之后可以操纵HTMLElement。

有了这些知识，我们可以_initLayout private method， 像：

L.Control.Layers.TogglerIcon = L.Control.Layers.extend({
    options: {
        // Optional base CSS class name for the toggler element
        togglerClassName: undefined
    },

    _initLayout: function(){
        L.Control.Layers.prototype._initLayout.call(this);
        if (this.options.togglerClassName) {
            L.DomUtil.addClass(this._layersLink, togglerClassName);
        }
    }
});

然后创建其中两个图层控件传递新选项，例如：

var layers1 =
   new L.Control.Layers.TogglerIcon(..., ..., {togglerClassName: 'layers-flowers'});
var layers2 = 
   new L.Control.Layers.TogglerIcon(..., ..., {togglerClassName: 'layers-cars'});

然后为他们的图标添加一些CSS，例如：

.layers-flowers {
    background-image: url(images/layers-flowers.png);
    width: 36px;
    height: 36px;
}
.layers-cars {
    /* idem */
}

请注意，除了添加CSS类之外，还可以修改代码中的HTMLElement，例如：

_initLayout: function(){
    L.Control.Layers.prototype._initLayout.call(this);
    if (this.options.backgroundImageUrl) {
        this._layersLink.style.backgroundImage = this.options.backgroundImageUrl;
    }
}

虽然可能需要更精确的摆弄。

Answer 2

我遇到了同样的问题，并且找到了更快的解决方案。 我只是通过以下方式从应用程序的 styles.css 中覆盖了特定图层控件的background-image属性：

.leaflet-top.leaflet-right .leaftlet-control-layers:nth-child(3) .leaflet-control-layers-toggle {
    background-image: /*set you value*/
}

在我的情况下，第二个“层控件”是第三个子控件（工具栏，“层控件1”和“层控件2”），因此请更改该索引以获取正确的控件。希望对您有帮助！