我想创建一个 Leaflet map ，它能够在不同的 map 层之间切换。这当然没有问题。
但我想添加一个 slider ，我可以混合 之间实际 map 播放器和 前 map 师 方便比较这两张 map 的内容:
slider = 右 => 实际 map 的 100% 不透明度
slider = 左 => 实际 map 的 0% 不透明度，这意味着之前 map 的 100% 不透明度
slider = 中间 => 实际 map 的 50% 不透明度，这意味着背景中的前一张 map 也透光 50%
加载 map 后，我设法让混合在初始情况下工作。但是在我从 map 选择器菜单中选择另一张 map 后，我无法让它工作。应该显示在背景中的以前的 map 播放器似乎迷路了。
我认为问题在于函数 “fct_layerchange”不仅由事件监听器调用 map .on 当我在 Maplayers 菜单中选择另一个 map 时，以及当我通过“map.addLayer(bgMap);”将前一个 maplayer 添加到背景时
我不知道如何解决这些不需要的函数“多重调用”，因为我在选择新 basemap 时依赖“baselayerchange”事件。当在事件的函数内时，这个事件会再次触发一些传单大师是否知道我该如何解决这个问题？ :-)
<!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 的图层控制对象严格管理其每个 basemap 和叠加图(= 只能同时显示一个 basemap )如果我要添加另一个 basemap 以在后台使用，图层控制对象将立即再次将其删除，即使我已将其放在另一个 Pane 中。
解决方法是:创建一个 每个 basemap 的单独副本 (例如“osm_mapnik”将获得一个名为“osm_mapnik_bg”的孪生)用于背景 Pane 。原因:图层控制对象只控制“osm_mapnik”，但我完全控制“osm_mapnik_bg”:-)
所以图层控制管理前景 map 的变化，我管理背景 map 的变化——完美的分工。
<!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>关于传单:两个 basemap 图层之间的混合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41909614/