传单:如何控制图层组的不透明度? [英] Leaflet: How to control opacity of Layer Groups?

问题描述

是否有一些专家知道如何通过使用HTML滑块输入来更改 Layer Group 的每个图块图的不透明度?

Does some expert know how to change the opacity of each tilemap of a Layer Group by using a HTML-slider input?

例如:我有几个磁贴图，可以使用Lealet的Layercontrol按钮进行切换，例如:

For example: I've got several tilemaps, which could be switched by using Lealet's Layercontrol button, like here: Leaflet Layer Groups. When using the opacity-slider I want to dim each tilemap, not just one being actually active. For example: I'm dimming map1 to 0.5 Then switching to map2, its opacity should already also be 0.5. And when changing the opacity of map2 to 0.8 with the slider and switching back to map1, map1 should already have opacity 0.8 again (not the former adjusted value of 0.5)

我知道如何实现滑块控件以及如何通过使用命令

I know how to implement the slider control and how to change the opacity of a single tilemap by using the command

nameOfMaplayer.setOpacity(opacityValue);

但是我不知道如何使用Leaflet的方法引用所有地图的窗格/网格层/数组 来更改地图的窗格不透明度，而不是同时显示每个独立图块的不透明度.

But I don't have an idea how to reference using Leaflet's methods to the Pane/Grid Layer/array of all tilemaps to change the map's pane opacity instead of the opacity of each indivdual tilemaps simultaniously.

推荐答案

我想最后我自己找到了一个令人满意的答案:

I think in the end I found a satisfying answer myself:

如果我们要更改tilePane的不透明度(=底图图层和overlaymap-layers):

If we want to change the opacity of the tilePane (= basemap-layers AND overlaymap-layers):

map.getPane('tilePane').style.opacity = 0.5;

但这有一个缺点，就是我希望避免Overlay-tilemaps变暗.

But this has the disadvantage that also the Overlay-tilemaps get dimmed which I wanted to avoid.

我首选的方法是仅更改活动底图图层的不透明度.由于Leaflet不支持获取活动底图图层，因此您必须使用"Activelayers" -Plugin 并使用其方法:

My prefered method is to change just the opacity of the active basemap-layer. Since Leaflet doesn't support getting the active basemap Layer, you'll have to use the "Activelayers"-Plugin and use its methods:

ctrLayer = L.control.activeLayers(baseMaps, overlayMaps, {position: 'topright'}).addTo(map);
.....
tilemapLayer = ctrLayer.getActiveBaseLayer().layer;
tilemapLayer.setOpacity(actualOpacityValue);

每次更改底图时，都必须运行后面的2条命令将新底图的不透明度更改为实际使用的不透明度值.

Each time you change the basemap, you have to run the later 2 commands to change the new basemap's oppacity to the actual used opacity value.

这篇关于传单:如何控制图层组的不透明度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！