文章/答案/技术大牛

发布

社区首页 >问答首页 >传单:在两个基本地图层之间混合

问传单:在两个基本地图层之间混合
EN

Stack Overflow用户

提问于 2017-01-28 12:07:31

回答 1查看 2K关注 0票数 4

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

但是，我想添加一个滑块，在其中我可以混合之间的实际maplayer和前maplayer，以方便地比较这2张地图的内容：

滑块=真实地图的右=> 100%不透明度

滑块=实际地图的左=> 0%不透明度，这意味着以前地图的100%不透明度。

滑块=实际地图的中间=> 50%的不透明度，这意味着以前的地图在背景中的亮度也是50%。

在加载地图之后，我设法让混合在最初的情况下工作。但是，在我从地图选择器菜单中选择另一张地图后，它就无法工作了。应该显示在背景中的前一位球员似乎迷路了。

我认为问题在于，函数"fct_layerchange"不仅在我选择menu菜单中的另一张地图时被事件侦听器map.on调用，而且当我通过“map.addLayer(BgMap)”将前maplayer添加到后台时也会调用该函数；

我再也不知道如何解决这些不必要的“多功能”，因为我依赖于‘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>

blending

leaflet

opacity

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-01-30 14:09:18

我想告诉你，我最终可以找到一个可行的解决办法。经过几个小时的尝试和错误以及对传单源代码的研究，我发现了问题所在，以及如何解决它。

在我的例子中，问题是传单的层控制对象严格管理它的每个基本映射和覆盖图(= -只有一个basemaplayer可以同时显示)--如果我要添加另一个baselayer以供在后台使用，则层控制对象将再次将其移除，即使我已经将它放到了另一个窗格中。

解决办法是:为每个basemap创建一个独立副本(例如，"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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41909614

复制

相似问题

问传单:在两个基本地图层之间混合
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问传单:在两个基本地图层之间混合EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问传单:在两个基本地图层之间混合
EN