如何添加 [UP] -3 [DOWN] 控件以在自定義地圖上的圖層之間切換？

Question

我已經用谷歌搜索了好幾天了，有點沮喪..我希望任何人都可以幫助我！

我想要實現的是控件（如下所示），例如，如果按下向下按鈕，它將顯示當前下方一層“樓層”的地圖層，並將“0”設置為“- 1”。

<---

我現在的地圖是這樣的，我希望能夠在“地板”上上下移動。

這是地面層

這是-1層，上圖下方的層

我有所有的圖像等，我對 Leaflet 有基本的了解，但我不知道如何添加這個控件並使其加載所需的級別。

任何可以幫助我或引導我走向正確方向的人？

親切的問候，安德烈亞斯。

Answer 1

我為你創建了一個工作控制器（但它不是設計的）：

L.LayerControl = L.Control.extend({
    options: {
        position: 'topright',
        layerIdx: 0,
        //control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
    },

    initialize: function(layers, options) {
        this.layers = layers;
        L.setOptions(this, options);
    },

    onAdd: function (map) {
        this.map = map;
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control layercontrol');
        var buttonUp = L.DomUtil.create('a', '', container);
            buttonUp.innerHTML = '^';
        this.text = L.DomUtil.create('a', '', container);
        this.text.innerHTML = this.layers[this.options.layerIdx].name;
        this.text.style.fontWeight = '900';
        var buttonDown = L.DomUtil.create('a', '', container);
            buttonDown.innerHTML = 'v';
        L.DomEvent.disableClickPropagation(container);
        L.DomEvent.on(buttonUp, 'click', this._clickUp, this);
        L.DomEvent.on(buttonDown, 'click', this._clickDown, this);

        this._removeAllLayers();
        this.map.addLayer(this.layers[this.options.layerIdx].layer);

        return container;
    },
    _clickUp : function () {
        if(this.layers.length -1 > this.options.layerIdx){  
            this.map.fire('layercontrolUp', {layer: this.layers[this.options.layerIdx].layer, name: this.layers[this.options.layerIdx].name});
            this.options.layerIdx++;
            this.text.innerHTML = this.layers[this.options.layerIdx].name;
            this._removeAllLayers();
            this.map.addLayer(this.layers[this.options.layerIdx].layer);
        }
    },
    _clickDown : function () {
        if(0 < this.options.layerIdx){  
            this.map.fire('layercontrolDown', {layer: this.layers[this.options.layerIdx].layer, name: this.layers[this.options.layerIdx].name});
            this.options.layerIdx--;
            this.text.innerHTML = this.layers[this.options.layerIdx].name;
            this._removeAllLayers();
            this.map.addLayer(this.layers[this.options.layerIdx].layer);
        }
    },
    _removeAllLayers: function(){
        //removing all layers from the map where added from the control
        this.layers.forEach(function(controlLayer){
            this.map.removeLayer(controlLayer.layer);       
        });
    }
});


var fg1 = new L.FeatureGroup();
fg1.addLayer(L.marker([51.5, -0.09]).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup());


var fg2 = new L.FeatureGroup();
fg2.addLayer(L.circle([51.508, -0.11], 500, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).bindPopup("I am a circle."));


var fg3 = new L.FeatureGroup();
fg3.addLayer(L.polygon([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047]
    ]).bindPopup("I am a polygon."));



var layerControlLayers = [
    {
        name: 'KG1',
        layer: fg1
    },
    {
        name: 'KG2',
        layer: fg2
    },
    {
        name: 'EG',
        layer: fg3
    },
]

//layerIdx: start counting with 0 = KG1
new L.LayerControl(layerControlLayers, {layerIdx: 2}).addTo(map)

map.on('layercontrolUp', function(e){
    console.log(e);
});

map.on('layercontrolDown', function(e){
    console.log(e);
});