Leaflet.js -将不透明度设置为带有滑块的LayerGroup

Question

我正在展示一张传单底图。我使用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});
}