设置不透明度为LayerGroup和Slider

Leaflet.js - Set Opacity to LayerGroup with Slider

本文关键字：Slider LayerGroup 不透明度 设置      更新时间：2023-09-26

我正在显示一张传单基础地图。我使用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>

我认为你想设置图层(capa)的不透明度，而不是地图。该变量的作用域需要不同才能正常工作。一种快速的方法是在脚本顶部的var map下面声明capa。

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

我认为这个小提琴说明了你想要做什么。有几件事是缺失的/错误的代码，因为它是在原来的帖子，包括省略了一个链接到所需的CSS传单库。

由自己的滑块控制的单层

编辑:

两个图层，每个图层都有自己的滑块

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

function updateOpacity(value) {
    capa.setStyle({opacity:value});
}
相关文章：