那些遇到过的问题

Leaflet：在两个底图图层之间混合

Sam*_*myC 6 blending opacity leaflet

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

但我想添加一个滑块，可以在实际地图播放器和前一个地图播放器之间进行混合，以方便地比较这两个地图的内容：滑块 = 右=> 实际地图的 100% 不透明度滑块 = 左=> 实际地图的 0% 不透明度地图，这意味着前地图滑块的 100% 不透明度 = 中间=> 实际地图的 50% 不透明度，这意味着背景中的前地图也透光了 50%


加载地图后，我设法使混合在初始情况下工作。但从地图选择器菜单中选择另一张地图后，我无法使其工作。应该在后台显示的前地图播放器似乎迷失了。

我认为问题在于，当我在 Maplayers 菜单中选择另一个地图时，事件侦听器map.on不仅会调用函数“fct_layerchange” ，而且当我通过“map.addLayer”将前一个 maplayer 添加到背景时也会调用函数“fct_layerchange” （背景地图）；”

我不再知道如何解决这些不需要的函数“多重调用”，因为我在选择新底图时依赖于“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>
Run Code Online (Sandbox Code Playgroud)

Sam*_*myC 7

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

我的情况的问题是，Leaflet 的图层控制对象严格管理其每个底图和叠加图（=只能同时显示一个底图播放器））如果我添加另一个在后台使用的底图，图层控制对象将立即再次将其删除，即使我已将其放在另一个窗格上。

解决方法是：创建每个底图的单独副本（例如“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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

2405 次

最近记录：

8 年 前
相关归档
mapbox.js:设置地图限制范围 9
python KDE将轮廓和路径转换为特定的json格式的传单友好 8
在R中确定小册子中光标上单击的位置 7
小册子中经纬度的坐标 6
如何在折线上应用css:传单 6
css溢出的透明图像掩码 5
原生元素的大小为零 5
告诉leaflet.draw一个geojson多边形是一个矩形 4
在具有绝对位置的 div 中实现平滑过渡 2
Leaflet多边形对象属性 1
难疑归档
如何检测元素外部的单击？ 2367
如何使用Maven创建具有依赖关系的可执行JAR？ 2276
数据绑定如何在AngularJS中运行？ 1924
ListView中的图像延迟加载 1881
从C#中的枚举中获取int值 1698
const int*,const int*const和int const*之间有什么区别？ 1262
如何获得最近提交的Git分支列表？ 1197
.gitignore for Visual Studio项目和解决方案 1115
如何向给定元素添加类？ 1109
如何进行HTTP POST Web请求 1033