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

时间:2017-10-11 16:19:47

标签: javascript leaflet gis

我正在开发一个基于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';

我尝试过放置窗格:'标签'代码在这里,我格式化我的标签

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

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

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

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

1 个答案:

答案 0 :(得分:0)

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

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

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