leaflet - 当图层在控件中更改时，绑定弹出窗口被删除

Question

我有一个带有图层控件的地图，该图层控件具有在 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

Answer 1

我看没有人给出答案。有点周围，但它的工作原理。
你添加id: x到每一层。稍后在循环中检查哪个图层处于活动状态，以及添加样式的所有其余图层display: none。

window.addEventListener('DOMContentLoaded', () => {
  let tiles = L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points &copy 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, // required
    simplifyFactor: 0.25,
    precision: 5,
    fields: ['OBJECTID'],
    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>