传单：在两个底图图层之间混合
Leaflet: Blend between two basemap-layers
我想制作一张Leaflet地图，可以在不同的地图层之间切换。这当然没有问题。
但我想添加一个滑块，我可以在其中 混合 实际地图播放器 和 前地图播放器 方便比较这两张图的内容：
slider = right => 实际地图的 100% 不透明度
slider = left => 实际地图的不透明度为 0%，这意味着前地图的不透明度为 100%
slider = middle => 实际地图的不透明度为 50%，这意味着背景中的前一张地图也透出 50%
加载地图后，我设法让混合在初始情况下工作。但在我从地图选择器菜单中选择另一张地图后，我无法让它工作。应该在后台显示的前地图播放器似乎丢失了。
我认为问题在于函数 "fct_layerchange" 不仅被事件监听器调用 map.on 当我在地图播放器菜单中选择另一张地图时，以及当我通过 "map.addLayer(bgMap);" 将前一个地图播放器添加到背景时
我不知道如何解决这些不需要的 "multicall" 函数，因为我在选择新底图时依赖于 'baselayerchange' 事件。当处于事件函数内部时，此事件会再次触发一些 Leaflet-guru 知道如何解决这个问题吗？ :-)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blend 2 maps</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<style>
html, body, #map {height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
<script>
// 1.) BASEMAPS
var osm_mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.openstreetmap.org">Openstreetmap</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_cycle = L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_outdoors = L.tileLayer('https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_pioneer = L.tileLayer('https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
// 2.) OVERLAYMAPS
var heidel_bound = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/adminb/x={x}&y={y}&z={z}', {maxNativeZoom: 18, maxZoom:19, noWrap:true, attribution:'<a href="http://korona.geog.uni-heidelberg.de/contact.html">Uni-Heidelberg</a>' });
var wmt_hiking = L.tileLayer('https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png', {maxNativeZoom: 18, maxZoom:19, noWrap:true, attribution:'<a href="http://waymarkedtrails.org">Waymarkedtrails</a>' });
// LAYERMENU
var baseMaps = {
"OpenStreetMap Mapnik": osm_mapnik,
"Thunderforest Opencycle": thunder_cycle,
"Thunderforest Outdoors": thunder_outdoors,
"Thunderforest Pioneer": thunder_pioneer
};
var map = L.map ( 'map', { center: [47, 15], zoom: 11, layers: [thunder_cycle, wmt_hiking] } );
var overlayMaps = {
"Hiking Routes": wmt_hiking,
"Boundaries": heidel_bound,
};
var ctr_mapLayers = L.control.layers(baseMaps, overlayMaps).addTo(map);
var fgMap = thunder_cycle;
var bgMap = thunder_pioneer;
map.addLayer(bgMap); // add initial backgroundmap-layer to map
bgMap.bringToBack(); // move backgroundmap-Layer to to the background of the map
function fct_blend() {
valBlend = document.getElementById("id_sliderBlend").value;
document.getElementById("id_valBlend").innerHTML = Number(valBlend).toFixed(1)
fgMap.setOpacity(valBlend);
}
var ctr_blend = L.control();
ctr_blend.onAdd = function (map) {
valOpacity = 1.0;
this.div = L.DomUtil.create('div');
this.div.innerHTML = '<span id="id_valBlend">1.0</span><input type="range" id="id_sliderBlend" min="0" max="1" step="0.1" value="1" style="width:100px;" oninput="fct_blend()">';
L.DomEvent.disableClickPropagation(this.div);
return this.div;
};
ctr_blend.addTo(map);
var fct_layerchange = function (e) {
bgMap = fgMap;
bgMap.setOpacity(1); // set opacity of former foregroundmap-layer which is now background-layer to 1.0;
map.addLayer(bgMap); // add former foregroundmap-layer as backgroundmap-layer to map again.
fgMap = e.layer; // update fgMap-variable with the actual foregroundmap-layer
fgMap.setOpacity(valBlend); // set opacity of the new foregroundmap-layer to the actual blend-Value.
};
map.on('baselayerchange', fct_layerchange);
</script>
</body>
</html>
我想告诉你，我最终找到了一个可行的解决方案。经过数小时的反复试验和研究 Leaflet 的源代码，我发现了问题所在以及解决方法。
我的问题是 Leaflet 的图层控制对象严格管理它的每个底图和叠加图（= 同一时间只能显示一个底图播放器）如果我愿意添加另一个 baselayer 以供在后台使用，层控制对象将立即再次将其删除，即使我已将其放在另一个窗格中。
解决方法是：创建每个底图的 单独副本 （例如 "osm_mapnik" 将得到一个名为 "osm_mapnik_bg") 用于背景窗格。原因：图层控制对象只控制了 "osm_mapnik"，但我完全控制了 "osm_mapnik_bg" :- )
所以层控管理前景图的变化我管理背景图的变化——完美分工
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blend 2 maps</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<style>
html, body, #map { height: 100%; }
html, body, #map { margin: 0; padding: 0; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// 1.) BASEMAPS
var osm_mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.openstreetmap.org">Openstreetmap</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_cycle = L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_outdoors = L.tileLayer('https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_pioneer = L.tileLayer('https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
// 1b.) BASEMAPS copies for use on background pane: use 'mapPane' which's z-index is lower (=behind) the 'tilePane' used by the layers in 1.)
var osm_mapnik_bg = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {pane:'mapPane', subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.openstreetmap.org">Openstreetmap</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_cycle_bg = L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', {pane:'mapPane', subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_outdoors_bg = L.tileLayer('https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', {pane:'mapPane', subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_pioneer_bg = L.tileLayer('https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png', {pane:'mapPane', subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
// 2.) OVERLAYMAPS
var heidel_bound = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/adminb/x={x}&y={y}&z={z}', {maxNativeZoom: 18, maxZoom:19, noWrap:true, attribution:'<a href="http://korona.geog.uni-heidelberg.de/contact.html">Uni-Heidelberg</a>' });
var wmt_hiking = L.tileLayer('https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png', {maxNativeZoom: 18, maxZoom:19, noWrap:true, attribution:'<a href="http://waymarkedtrails.org">Waymarkedtrails</a>' });
// LAYERMENU
var baseMaps = {
"OpenStreetMap Mapnik": osm_mapnik,
"Thunderforest Opencycle": thunder_cycle,
"Thunderforest Outdoors": thunder_outdoors,
"Thunderforest Pioneer": thunder_pioneer
};
// needed to get the layer's Objectname by its Layer-Controlname which is the only name passed by the 'baselayerchange'-event
var layerLookup = {"OpenStreetMap Mapnik":"osm_mapnik", "Thunderforest Opencycle":"thunder_cycle", "Thunderforest Outdoors":"thunder_outdoors", "Thunderforest Pioneer":"thunder_pioneer",};
var map = L.map ( 'map', { center: [47, 15], zoom: 11, layers: [thunder_cycle] } );
var overlayMaps = {
"Hiking Routes": wmt_hiking,
"Boundaries": heidel_bound,
};
var ctr_mapLayers = L.control.layers(baseMaps, overlayMaps).addTo(map);
var fgLayerControlname = "Thunderforest Opencycle"; // default foreground-Layer*Controlname*
var fgLayer = window [layerLookup [fgLayerControlname]]; // default foreground-Layer Object
var bgLayerName = 'thunder_pioneer_bg'; // default background-Layer*Objectname*
var bgLayer = thunder_pioneer_bg; // default background-Layer Object
map.addLayer(bgLayer);
function fct_blend() {
valBlend = document.getElementById("id_sliderBlend").value;
document.getElementById("id_valBlend").innerHTML = Number(valBlend).toFixed(1)
fgLayer.setOpacity(valBlend);
}
var ctr_blend = L.control({position:'bottomright'});
ctr_blend.onAdd = function (map) {
valBlend = 1.0;
this.div = L.DomUtil.create('div');
this.div.innerHTML = '<span id="id_valBlend">1.0</span><input type="range" id="id_sliderBlend" min="0" max="1" step="0.1" value="1" style="width:100px;" oninput="fct_blend()">';
L.DomEvent.disableClickPropagation(this.div);
return this.div;
};
ctr_blend.addTo(map);
var fct_layerchange = function (e) {
map.removeLayer(bgLayer); // remove former bg-Layer
bgLayerName = [layerLookup [fgLayerControlname]] + '_bg'; // set Object*name* of new bg-Layer which is former fg-Layer
bgLayer = window[bgLayerName]; // set bgLayer-Object out of its Object*name*
map.addLayer(bgLayer); // add former foregroundmap-layer as backgroundmap-layer to map again.
fgLayerControlname = e.name; // get fg-Layer *Controlname* which is used in the Layercontrol-menu (its Objectname is not passed by the event)
fgLayer = window [layerLookup [fgLayerControlname]]; //set fgLayer-Object by the use of its Objectname which is derived from its *Controlname*
fgLayer.setOpacity(valBlend); // set opacity of the new foreground-layer to the actual blend-Value.
};
map.on('baselayerchange', fct_layerchange); // fired if a new maplayer is choosen by the Layercontrol
</script>
</body>
</html>
我想制作一张Leaflet地图，可以在不同的地图层之间切换。这当然没有问题。
但我想添加一个滑块，我可以在其中 混合 实际地图播放器 和 前地图播放器 方便比较这两张图的内容：
slider = right => 实际地图的 100% 不透明度
slider = left => 实际地图的不透明度为 0%，这意味着前地图的不透明度为 100%
slider = middle => 实际地图的不透明度为 50%，这意味着背景中的前一张地图也透出 50%
加载地图后，我设法让混合在初始情况下工作。但在我从地图选择器菜单中选择另一张地图后，我无法让它工作。应该在后台显示的前地图播放器似乎丢失了。
我认为问题在于函数 "fct_layerchange" 不仅被事件监听器调用 map.on 当我在地图播放器菜单中选择另一张地图时，以及当我通过 "map.addLayer(bgMap);" 将前一个地图播放器添加到背景时
我不知道如何解决这些不需要的 "multicall" 函数，因为我在选择新底图时依赖于 'baselayerchange' 事件。当处于事件函数内部时，此事件会再次触发一些 Leaflet-guru 知道如何解决这个问题吗？ :-)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blend 2 maps</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<style>
html, body, #map {height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
<script>
// 1.) BASEMAPS
var osm_mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.openstreetmap.org">Openstreetmap</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_cycle = L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_outdoors = L.tileLayer('https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_pioneer = L.tileLayer('https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
// 2.) OVERLAYMAPS
var heidel_bound = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/adminb/x={x}&y={y}&z={z}', {maxNativeZoom: 18, maxZoom:19, noWrap:true, attribution:'<a href="http://korona.geog.uni-heidelberg.de/contact.html">Uni-Heidelberg</a>' });
var wmt_hiking = L.tileLayer('https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png', {maxNativeZoom: 18, maxZoom:19, noWrap:true, attribution:'<a href="http://waymarkedtrails.org">Waymarkedtrails</a>' });
// LAYERMENU
var baseMaps = {
"OpenStreetMap Mapnik": osm_mapnik,
"Thunderforest Opencycle": thunder_cycle,
"Thunderforest Outdoors": thunder_outdoors,
"Thunderforest Pioneer": thunder_pioneer
};
var map = L.map ( 'map', { center: [47, 15], zoom: 11, layers: [thunder_cycle, wmt_hiking] } );
var overlayMaps = {
"Hiking Routes": wmt_hiking,
"Boundaries": heidel_bound,
};
var ctr_mapLayers = L.control.layers(baseMaps, overlayMaps).addTo(map);
var fgMap = thunder_cycle;
var bgMap = thunder_pioneer;
map.addLayer(bgMap); // add initial backgroundmap-layer to map
bgMap.bringToBack(); // move backgroundmap-Layer to to the background of the map
function fct_blend() {
valBlend = document.getElementById("id_sliderBlend").value;
document.getElementById("id_valBlend").innerHTML = Number(valBlend).toFixed(1)
fgMap.setOpacity(valBlend);
}
var ctr_blend = L.control();
ctr_blend.onAdd = function (map) {
valOpacity = 1.0;
this.div = L.DomUtil.create('div');
this.div.innerHTML = '<span id="id_valBlend">1.0</span><input type="range" id="id_sliderBlend" min="0" max="1" step="0.1" value="1" style="width:100px;" oninput="fct_blend()">';
L.DomEvent.disableClickPropagation(this.div);
return this.div;
};
ctr_blend.addTo(map);
var fct_layerchange = function (e) {
bgMap = fgMap;
bgMap.setOpacity(1); // set opacity of former foregroundmap-layer which is now background-layer to 1.0;
map.addLayer(bgMap); // add former foregroundmap-layer as backgroundmap-layer to map again.
fgMap = e.layer; // update fgMap-variable with the actual foregroundmap-layer
fgMap.setOpacity(valBlend); // set opacity of the new foregroundmap-layer to the actual blend-Value.
};
map.on('baselayerchange', fct_layerchange);
</script>
</body>
</html>
我想告诉你，我最终找到了一个可行的解决方案。经过数小时的反复试验和研究 Leaflet 的源代码，我发现了问题所在以及解决方法。
我的问题是 Leaflet 的图层控制对象严格管理它的每个底图和叠加图（= 同一时间只能显示一个底图播放器）如果我愿意添加另一个 baselayer 以供在后台使用，层控制对象将立即再次将其删除，即使我已将其放在另一个窗格中。
解决方法是：创建每个底图的 单独副本 （例如 "osm_mapnik" 将得到一个名为 "osm_mapnik_bg") 用于背景窗格。原因：图层控制对象只控制了 "osm_mapnik"，但我完全控制了 "osm_mapnik_bg" :- )
所以层控管理前景图的变化我管理背景图的变化——完美分工
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blend 2 maps</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<style>
html, body, #map { height: 100%; }
html, body, #map { margin: 0; padding: 0; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// 1.) BASEMAPS
var osm_mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.openstreetmap.org">Openstreetmap</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_cycle = L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_outdoors = L.tileLayer('https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_pioneer = L.tileLayer('https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png', {subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
// 1b.) BASEMAPS copies for use on background pane: use 'mapPane' which's z-index is lower (=behind) the 'tilePane' used by the layers in 1.)
var osm_mapnik_bg = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {pane:'mapPane', subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.openstreetmap.org">Openstreetmap</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_cycle_bg = L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', {pane:'mapPane', subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_outdoors_bg = L.tileLayer('https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', {pane:'mapPane', subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
var thunder_pioneer_bg = L.tileLayer('https://{s}.tile.thunderforest.com/pioneer/{z}/{x}/{y}.png', {pane:'mapPane', subdomains:'abc', maxZoom:19, noWrap:true, attribution:'<a href="http://www.thunderforest.com">Thunderforest</a> | <a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>' });
// 2.) OVERLAYMAPS
var heidel_bound = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/adminb/x={x}&y={y}&z={z}', {maxNativeZoom: 18, maxZoom:19, noWrap:true, attribution:'<a href="http://korona.geog.uni-heidelberg.de/contact.html">Uni-Heidelberg</a>' });
var wmt_hiking = L.tileLayer('https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png', {maxNativeZoom: 18, maxZoom:19, noWrap:true, attribution:'<a href="http://waymarkedtrails.org">Waymarkedtrails</a>' });
// LAYERMENU
var baseMaps = {
"OpenStreetMap Mapnik": osm_mapnik,
"Thunderforest Opencycle": thunder_cycle,
"Thunderforest Outdoors": thunder_outdoors,
"Thunderforest Pioneer": thunder_pioneer
};
// needed to get the layer's Objectname by its Layer-Controlname which is the only name passed by the 'baselayerchange'-event
var layerLookup = {"OpenStreetMap Mapnik":"osm_mapnik", "Thunderforest Opencycle":"thunder_cycle", "Thunderforest Outdoors":"thunder_outdoors", "Thunderforest Pioneer":"thunder_pioneer",};
var map = L.map ( 'map', { center: [47, 15], zoom: 11, layers: [thunder_cycle] } );
var overlayMaps = {
"Hiking Routes": wmt_hiking,
"Boundaries": heidel_bound,
};
var ctr_mapLayers = L.control.layers(baseMaps, overlayMaps).addTo(map);
var fgLayerControlname = "Thunderforest Opencycle"; // default foreground-Layer*Controlname*
var fgLayer = window [layerLookup [fgLayerControlname]]; // default foreground-Layer Object
var bgLayerName = 'thunder_pioneer_bg'; // default background-Layer*Objectname*
var bgLayer = thunder_pioneer_bg; // default background-Layer Object
map.addLayer(bgLayer);
function fct_blend() {
valBlend = document.getElementById("id_sliderBlend").value;
document.getElementById("id_valBlend").innerHTML = Number(valBlend).toFixed(1)
fgLayer.setOpacity(valBlend);
}
var ctr_blend = L.control({position:'bottomright'});
ctr_blend.onAdd = function (map) {
valBlend = 1.0;
this.div = L.DomUtil.create('div');
this.div.innerHTML = '<span id="id_valBlend">1.0</span><input type="range" id="id_sliderBlend" min="0" max="1" step="0.1" value="1" style="width:100px;" oninput="fct_blend()">';
L.DomEvent.disableClickPropagation(this.div);
return this.div;
};
ctr_blend.addTo(map);
var fct_layerchange = function (e) {
map.removeLayer(bgLayer); // remove former bg-Layer
bgLayerName = [layerLookup [fgLayerControlname]] + '_bg'; // set Object*name* of new bg-Layer which is former fg-Layer
bgLayer = window[bgLayerName]; // set bgLayer-Object out of its Object*name*
map.addLayer(bgLayer); // add former foregroundmap-layer as backgroundmap-layer to map again.
fgLayerControlname = e.name; // get fg-Layer *Controlname* which is used in the Layercontrol-menu (its Objectname is not passed by the event)
fgLayer = window [layerLookup [fgLayerControlname]]; //set fgLayer-Object by the use of its Objectname which is derived from its *Controlname*
fgLayer.setOpacity(valBlend); // set opacity of the new foreground-layer to the actual blend-Value.
};
map.on('baselayerchange', fct_layerchange); // fired if a new maplayer is choosen by the Layercontrol
</script>
</body>
</html>