Question

使用this question中的代码，我成功地在我的覆盖层上方上方添加了一个地方/道路标签的tileLayer。但是，这会产生令人遗憾的副作用，即阻止对下方叠加层的任何点击。

从广义上讲，如何重新启用对顶层tileLayer下面的图层/对象的点击检测？

请参阅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);

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

我通过将标签tileLayer的ZIndex设置为5来修复此问题，使其位于覆盖层（zIndex：4）和标记层（zIndex：6）之间。然而，我仍然想知道在瓷砖铺层下是否有可点击的覆盖层。

Answer 1

我会在功能/叠加层之上尝试使用CSS规则pointer-events: none。当设置为none时，图像不应响应任何鼠标/光标事件，因此每个事件都应该委托给它下面的图层：

指针事件：

CSS属性指针事件允许作者控制特定图形元素在什么情况下（如果有的话）成为鼠标事件的目标。

无：

元素永远不是鼠标事件的目标;但是，如果这些后代将指针事件设置为某个其他值，则鼠标事件可能会以其后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间在发送/来自后代的路径上触发此父元素上的事件侦听器。

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

＆＃34;标签tileLayer＆＃34; hack导致无法覆盖的覆盖层

1 个答案: