Leaflet.js - 使用滑块将不透明度设置为 LayerGroup答案

【问题标题】：Leaflet.js - Set Opacity to LayerGroup with SliderLeaflet.js - 使用滑块将不透明度设置为 LayerGroup
【发布时间】：2018-07-16 06:42:44
【问题描述】：

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

【问题讨论】：

标签： javascript maps leaflet

【解决方案1】：

我认为您想设置图层的不透明度 (capa) 而不是地图。该变量需要不同的范围才能使其工作。一种快速的方法是在脚本顶部的 var map 下方声明 capa。

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

编辑：

我认为这个小提琴说明了您正在尝试做的事情。与原始帖子中的代码一样，代码有几处缺失/错误，包括省略传单库所需的 CSS 链接。

Single Layer controlled by its own slider

编辑：

Two Layers, each controlled by their own slider

【讨论】：

是的，我想设置图层的不透明度（capa）。我按照你说的做了，但是没有用。（原代码已更新）
与一层完美搭配，但如果我使用两个不同的层（具有不同的贴图）并且想分别设置不透明度怎么办？
你的意思是：> 单个滑块改变多个图层（可能是图层组）的不透明度 > 每图层一个滑块，每个滑块控制其各自的图层
是的，我就是这个意思。抱歉英语不是我的母语。
我又加了一个小提琴。这个有两个独立的图层（不是图层组），每个图层都由自己的滑块控制。从您的评论中不清楚您对哪个示例感兴趣 - 我先做了一个。

【解决方案2】：

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

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

【讨论】：