Question

我想创建一个Leaflet地图，它可以在不同的地图图层之间切换。这当然没问题。

但是我想添加一个滑块，我可以混合在实际的maplayer 和以前的maplayer 之间来方便地比较这些内容2张地图：
slider = right =＆gt;实际地图的100％不透明度 slider = left =＆gt;实际地图的0％不透明度，表示前地图的100％不透明度 slider = middle =＆gt;实际地图的50％不透明度，这意味着背景中的前地图也会照亮50％

我设法在加载地图后让混合工作在初始状态。但是，从地图选择器菜单中选择另一个地图后，我无法正常工作。应该在后台显示的前maplayer似乎迷路了。

我认为问题在于 “fct_layerchange” 功能不仅由事件监听器 map.on 当我在Maplayers菜单中选择另一个地图时，以及当我通过“map.addLayer（bgMap）;”将前一个maplayer添加到后台时，

我不知道如何解决这些不需要的“多功能”功能，因为我在选择新的底图时依赖'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>

Answer 1

我想告诉你，最终我找到了一个有效的解决方案。经过几个小时的反复试验和研究Leaflet的源代码后，我发现了问题所在以及如何解决。

我的案例中的问题是Leaflet的图层控制对象严格管理其每个底图和overlaymaps（= 只能同时显示一个basemaplayer ）如果我要为其添加另一个底层在后台使用，即使我把它放在另一个窗格上，图层控制对象也会再次移除它。

解决方法是：创建每个底图的单独副本（例如“osm_mapnik”将获得一个名为“osm_mapnik_bg”的双胞胎）在背景窗格上使用。原因：图层控制对象只能控制“osm_mapnik”，但我可以完全控制“osm_mapnik_bg”： - ）

因此图层控制管理forderground地图的变化，我管理背景地图的变化 - 完美的分工。

<!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：两个底图图层之间的混合

1 个答案: