Leaflet.js - Set Opacity to LayerGroup with Slider

我显示单张底图。 我使用的是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>

Answer 1:

我想你想设置的层（不透明度capa ），而不是地图。 该变量将需要不同范围的这个工作。 一个快速的方法来做到这将是宣布capa刚下var map在脚本的顶部。

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

编辑：

我觉得这琴说明你正在尝试做的。 还有那个失踪/错的代码，因为它是在原来的职位包括省略一个链接到所需要的单张库中的CSS有两件事情。

通过自身的滑块控制单层

编辑：

两层，每层由自己控制滑块

Answer 2:

另一种方式来改变不透明度可能是使用setstyle功能。 因此，对于你的情况，试试这个

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

文章来源: Leaflet.js - Set Opacity to LayerGroup with Slider