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链接。

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 - 使用Slider将Opacity设置为LayerGroup

2 个答案: