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';

我尝试过放置窗格：＆＃39;标签＆＃39;代码在这里，我格式化我的标签

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

以及我在这里创建图层组。

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

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

Answer 1

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

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

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

小册子层中断基础层的交互性

1 个答案: