Javascript 更改传单图层控制图标

当存在多个传单层控件时，如何更改网页中传单层控件图标的图标

目标是在此处使用不同的图标：

其代码如下所示：

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

---

如果我通过CSS更改控件的图标，那么它在所有层控件中都会更改。

一方面，我建议您查看。可能有一个比两个具有不同图标的默认

L.Control.Layers

更适合您的用例

---

另一方面：层控制图标由CSS提供，在：

该CSS类名来自

L.Control.Layers

：

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

请注意保存图像的触发器

HTMLElement

，是如何作为私有属性

存储的。_layersLink

。之后可以对

HTMLElement

进行操作

有了这些知识,我们可以,， 比如：

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

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

---

尽管这可能需要更精确的处理。

我也遇到了同样的问题，我找到了一个更快的解决方案。 我只是通过以下方式覆盖了我的应用程序的style.css中特定图层控件的

背景图像属性：

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

在我的例子中，第二层控件是第三个子控件（工具栏、层控件1和层控件2），因此更改该索引以获得正确的控件。希望有帮助

有多种方法可以做到这一点，但是如果能看到您迄今为止所做的一切，我们将很高兴为您指出正确的方向。这是我的实际项目，我想替换第二层控件的图标。我写了一个新问题，而不是对您的答案进行评论。。很抱歉，我对你的URL方法很在行，除此之外，你还必须用URL（）将其包围起来：this._layersLink.style.backgroundImage=“URL”（“+this.options.backgroundImageUrl+”）”；
_initLayout: function(){
    L.Control.Layers.prototype._initLayout.call(this);
    if (this.options.backgroundImageUrl) {
        this._layersLink.style.backgroundImage = this.options.backgroundImageUrl;
    }
}

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