如何解决当控制层发生变化时,绑定弹出窗口被移除
我有一个带有图层控件的地图,该图层控件具有在 baselayer 参数中指定的叠加层:
var overlays = {
'Layer 1': mylayer1,'Layer 2': mylayer2
};
L.control.layers( overlays,null,{ collapsed: false } ).addTo( map );
我指定我的层如下:
var mylayer1 = L.esri.featureLayer({
url: 'https://.../MapServer/5'
}).on( 'load',function ( e ) {
...
}).on( 'loading',function ( e ) {
...
}).bindPopup( function ( layer ) {
return L.Util.template( '<p>{_score}</p>',layer.feature.properties );
});
问题是,当我更改控件中的图层时,不再调用 bindPopup
事件。
这几乎就像层 z-index 没有更新。感谢您对我如何解决这个问题的任何见解。
见:https://codepen.io/jvanulde/pen/LYyOWZo
解决方法
我看到没有人给出答案。
有点绕,但它有效。
您将 id: x
添加到每一层。稍后在循环中检查哪个图层处于活动状态,以及添加样式 display: none
的所有其余图层。
window.addEventListener('DOMContentLoaded',() => {
let tiles = L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors,Points © 2012 LINZ'
});
let l1 = L.esri.featureLayer({
url: 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/nhsl_en/MapServer/1',id: 0,// required
simplifyFactor: 0.25,precision: 5,fields: ['OBJECTID'],renderer: L.canvas()
}).bindPopup(function(layer) {
return L.Util.template('<p>Layer 1: <strong>{OBJECTID}</strong></p>',layer.feature.properties);
});
let l2 = L.esri.featureLayer({
url: 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/nhsl_en/MapServer/2',id: 1,renderer: L.canvas()
}).bindPopup(function(layer) {
return L.Util.template('<p>Layer 2: <strong>{OBJECTID}</strong></p>',layer.feature.properties);
});
let map = L.map('map',{
center: [49.2827,-123.1207],zoom: 12,layers: [tiles]
});
let overlays = {
'Layer 1': l1,'Layer 2': l2
};
L.control.layers(overlays,null,{
collapsed: false
}).addTo(map);
l1.addTo(map);
map.on('baselayerchange',function(e) {
const layersCanvas = document.querySelectorAll('.leaflet-overlay-pane > canvas');
layersCanvas.forEach((layer,index) => {
layer.style.display = '';
if (index !== e.layer.options.id) {
layer.style.display = 'none';
}
});
});
});
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet@3.0.2/dist/esri-leaflet.js"></script>
<div id="map"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。