更改传单层控件图标 [英] Change leaflet layer control icons

问题描述

当有多个这样的图层控件时，如何更改网页中传单"图层控件图标的图标?

How can I change the icon for the Leaflet layers control icon in my webpage, when there are more than one such layers control?

目标是在此处具有不同的图标:

The goal is to have different icons here:

该代码如下:

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

如果我通过CSS更改控件的图标，则它会在所有图层控件中更改.

If I change the control's icon via CSS, it changes in all layers controls.

推荐答案

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

I had the same problem and I found a much faster solution. I simply overrided the background-image attribute of the specific Layer Control from the styles.css of my app in this way:

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

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

In my case the second Layer Control was the third child (Toolbar, Layer Control 1 and Layer Control 2), so change that index to get the right Control. Hope it helps!

< Edit 2020:代码中的固定错字>

<Edit 2020: fixed typo in code>

这篇关于更改传单层控件图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！