Question

请问，如果想做两个图层的卷帘的话，可以有3-4个可选图层吗（也就是显示在前端界面上），然后任选两个进行卷帘对比吗

Answer 1

您好，可以通过添加按钮并为其设置点击事件监听器实现：

1、在 HTML 代码中添加按钮，用于切换图层的显示。例如：

<div id="layerSwitcher">
    <button id="layer1Btn">图层1</button>
    <button id="layer2Btn">图层2</button>
    <button id="layer3Btn">...</button>
</div>

 2、在JavaScript 代码中获取这个按钮的元素对象，并为其添加点击事件的监听器。例如：

    var layer1Btn = document.getElementById('layer1Btn');
    var layer2Btn = document.getElementById('layer2Btn');

    layer1Btn.addEventListener('click', function() {
        switchLayer(layer1);
    });
    layer2Btn.addEventListener('click', function() {
        switchLayer(layer2);
    });
    //等等...

3、创建一个函数 switchLayer()，用于切换卷帘图层。例如：

function switchLayer(layer) {
        layer.addTo(map);
        L.control.sideBySide(layer, stamenLayer).addTo(map);
    }

您可以根据需要进一步自定义按钮的样式、图层的显示顺序等。

希望对您有所帮助！

Comments

您好，您说的function switchLayer(layer) { layer.addTo(map); L.control.sideBySide(layer, stamenLayer).addTo(map); }不是自动切换吧，是指定按钮对应两个图层对嘛，需要创建4个函数？我是想点击一个按钮，一个图层出现在卷帘左边，点击另一个，在出现在卷帘右边

我已经用这两种方法试过了，但都连接不上

---

switchLayer()是往卷帘里添加图层，通过点击按钮选择分别加入卷帘左右侧的图层，您可以包装一下按钮，看看控制台有没有报错，我这边用这个方法是能正常显示的：