Leaflet.js - 使用滑块将不透明度设置为图层组

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) 而不是地图的不透明度。该变量需要不同的范围才能起作用。一种快速的方法是在脚本顶部的 var map 下方声明 capa。

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

编辑：

我认为这 fiddle 说明了您正在尝试做的事情。有一些东西 missing/wrong 与原始 post 中的代码相同，包括省略传单库所需的 CSS 的 link。

Single Layer controlled by its own slider

编辑：

Two Layers, each controlled by their own slider

Answer 2

另一种更改不透明度的方法是使用 setstyle 函数。因此，对于你的情况，试试这个

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

Leaflet.js - 使用滑块将不透明度设置为图层组

Leaflet.js - Set Opacity to LayerGroup with Slider

javascript

maps

leaflet