"Label tileLayer" hack 导致无法点击覆盖层

Question

使用 this question 中的代码，我成功地在我的叠加层上方添加了 place/road 个标签的 tileLayer。然而，这有一个不幸的副作用，即阻止对下面的覆盖层的任何点击。

大体上，如何重新启用对顶部 tileLayer 下方 layers/objects 的点击检测？

参见 this example 我在顶部添加了一层标签：

var CartoDB_PositronOnlyLabels = {
    "tilejson": "2.0.1",
    "tiles":['http://c.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png'], 
    "attribution": '&copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
    "maxzoom": 19,
    "minzoom": 13       
};

var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
var labelLayer = L.mapbox.tileLayer(CartoDB_PositronOnlyLabels).addTo(map);
topPane.appendChild(labelLayer.getContainer());
labelLayer.setZIndex(9);

更新最初这是一个问题，因为我正在使用特殊的绘制功能通过单击将 waypoints 添加到路线来绘制路线。添加tileLayer后，用户仍然可以添加waypoints。但是他们不能拖动waypoints移动路线，也不能点击最后一个点结束路线。

我通过将标签 tileLayer 的 ZIndex 设置为 5 来修复此问题，这样它就会位于叠加层 (zIndex: 4) 和标记层 (zIndex:6) 之间。但是，我仍然想知道是否可以在 tilelayer 下有一个可点击的覆盖层。

Answer 1

我会在 features/overlays 之上的 tiles/tilelayer 上尝试 CSS 规则 pointer-events: none。当设置为 none 时，图像不应响应任何 mouse/cursor 事件，因此每个事件都应委托给它下面的层：

指针事件：

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.

None:

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

"Label tileLayer" hack 导致无法点击覆盖层

"Label tileLayer" hack leads to an unclickable overlay layer

javascript

leaflet