Javascript 传单.js-使用滑块将不透明度设置为LayerGroup

我正在展示传单底图。我正在使用HTML5滑块设置图层组的不透明度，但它不起作用

我想知道我做错了什么

提前谢谢

    <h3>TF.Landscape</h3>
    <br><input type="button" value=" + " onclick="BaseMapAsLayerGroup('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png')">
    <br><input id="slide" type="range" min="0" max="1" step="0.1" value="0" onchange="updateOpacity(this.value)">

    <hr>
    <div id="map" style="width: 800px; height: 600px"></div>

    <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
    <script>

        var map;
        var capa;

        function BaseMapAsLayerGroup(url){
            if(!map) { 
                map = L.map('map').setView([-41.2858, 174.78682], 14); 
            }

            capa = new L.LayerGroup();
            L.tileLayer(url, {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
            maxZoom: 18
            }).addTo(capa);

                map.addLayer(capa);
        }

        function updateOpacity(value) {
            capa.opacity(value);
        }

    </script>

TF.景观





var映射；
var-capa；
函数BaseMapAsLayerGroup（url）{
如果（！map）{
map=L.map（'map'）.setView（[-41.2858174.78682]，14）；
}
capa=新的L.LayerGroup（）；
L.tileLayer（url{
属性：“地图数据©；”，
最大缩放：18
}).addTo（capa）；
地图添加层（capa）；
}
函数更新容量（值）{
不透明度（值）；
}

我想您应该设置图层的不透明度（

capa

），而不是地图。该变量的作用域需要不同，才能正常工作。一种快速的方法是在脚本顶部的

var映射

下声明

capa

function updateOpacity(value) {
    capa.opacity(value);
}

编辑：

我想这把小提琴说明了你想做什么。在原始帖子中，代码有几处缺失/错误，包括省略了传单库所需的CSS链接

编辑：

---

另一种改变不透明度的方法是使用

setstyle

功能。因此，对于您的情况，请尝试此方法

function updateOpacity(value) {
    capa.setStyle({opacity:value});
}

---

是的，我想设置图层的不透明度（capa）。我照你说的做了，但没用。（原始代码已更新）适用于一个图层，但如果我使用两个不同的图层（具有不同的贴图），并且我想通过单独设置不透明度，该怎么办？您的意思是：>单个滑块更改多个图层（可能是一个图层组）的不透明度>每个图层一个滑块，每个滑块控制其各自的图层eah，这就是我的意思。对不起，英语不是我的母语。我又加了一把小提琴。这一层有两个独立的层（不是层组），每个层都由自己的滑块控制。从你的评论中不清楚你对哪个例子感兴趣——我先做了那个。