传单层中断基础层的交互性

Question

我正在开发一个基于Leaflet Choropleth Tutorial 的项目。

在我的地图中，用户可以在三个基础层之间切换

var basemaps= {
"layer1": layer1,
"layer2": layer 2,
"layer3": layer 3
};

这些层中的每一个都会像在 Choropleth 模板中一样突出显示并显示弹出信息。

我还有显示每个区域的标签（值）的图层，具体取决于哪个区域处于活动状态。

var activelabel = L.layerGroup();
var showlabels = {
  "labels": activelabel
};

map.on('baselayerchange', function (event) {
  activelabel.clearLayers();

  switch (event.layer) {
    case layer1:
      label1.addTo(activelabel);
      break;
    case layer2:
      label2.addTo(activelabel);
      break;
    case layer3:
      label3.addTo(activelabel);
      break;
  }
});

我的问题是，当标签处于活动状态时，如果用户将鼠标悬停在标签所在的区域部分上，突出显示功能和信息框不会显示任何信息。

我正在尝试找到一种方法使 activelabel 层不可见，以便悬停仍然有效。

我在Map Panes 上找到了教程，这似乎可以解决我的问题，但似乎没有任何作用。

我不确定我是否将窗格信息放在了错误的位置，或者这实际上并没有像我认为的那样工作？我尝试将 xIndex 从 0 更改为 700，但似乎没有什么不同？

map.createPane('labels');
map.getPane('labels').style.zIndex = 700;
map.getPane('labels').style.pointerevents = 'none';

我已经尝试将窗格：'labels' 代码放在这里，我在其中格式化我的标签

var createLabelIcon = function(labelClass,labelText){
return L.divIcon({ 
className: labelClass,
html: labelText
})
};

以及在这里创建图层组。

var label1 = new L.layerGroup();                        
makelabel1();

任何帮助将不胜感激。谢谢。

Answer 1

我想出了一个解决方案。我有三个单独的 .js 文件，我将所有包含标签的图层添加到我的图层组中。

如果我将 {interactive: false} 添加到每个文件中的每个 .addLayer 实例，标签不会中断鼠标悬停。

我不确定为什么当我将 interactive:false 添加到图层组而不是每个 addLayer 行时这不起作用，但它似乎正在工作。