Изменить значки управления слоями листовок

Question

Как я могу изменить значок для элемента управления слоями Leaflet на моей веб-странице, если имеется более одного такого элемента управления слоями?

Цель состоит в том, чтобы иметь здесь различные значки:

Код для этого выглядит следующим образом:

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

Если я изменю значок элемента управления с помощью CSS, он изменится во всехэлементы управления слоями.

Answer 1

У меня была такая же проблема, и я нашел гораздо более быстрое решение.Я просто переопределил атрибут background-image определенного элемента управления слоями из styles.css моего приложения следующим образом:

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

В моем случае второй элемент управления слоями был третьимchild (панель инструментов, Layer Control 1 и Layer Control 2), поэтому измените этот индекс, чтобы получить правильный элемент управления.Надеюсь, это поможет!

Answer 2

С одной стороны, я предлагаю вам взглянуть на список плагинов для переключателей слоев .Может быть один, который подходит вашему варианту использования лучше, чем два по умолчанию L.Control.Layers с разными значками.

---

С другой стороны: значок управления слоями предоставляется CSS, в эта строка :

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

Это имя класса CSS происходит от _initLayout частного метода из L.Control.Layers:

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

Обратите внимание, как переключается HTMLElement, который содержит изображение, хранится как частная собственность this._layersLink.После этого HTMLElement можно манипулировать.

С этим знанием мы можем создать подкласс L.Control.Layers, например:

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

, хотя, возможно, потребуется более точная игра.