javascript - Leaflet.js - Tilelayer 在 geojson 层上方可见。 GeoJSON 交互性问题

Question

我有一个 leaflet.js 元素，其中有一个 baselayer、一个多边形 geojson 层和另一个显示地名的 geojson 层 上方 tilelayer。通过将地名 tilelayer 添加到 map Pane ，我设法让地名 tilelayer 在 geojson 层上方可视化。但是，这已禁用 geojson 层上的单击和悬停事件。我想我可能必须将 goejson 层添加到它自己的 Pane ，或者可能与地名 tilelayer 相同的 Pane ，但我不确定。

这是将我的地名图层添加到 Pane 的代码:

var topPane = map.createPane('leaflet-top-pane', map.getPanes().mapPane);
    topPane.appendChild(CartoDB_PositronOnlyLabels.getContainer());

这是我的 Pane CSS 代码:

    .leaflet-top-pane {
    pointer-events: none;
}

我已经尝试将我的 geojson 层添加到同一个 Pane ，并更改指针事件选项，但要么它不起作用，要么我没有找到正确的组合。有没有人对我如何解决这个问题有任何想法，以便我可以将我的 tilelayer 覆盖在我的 geojson 层之上，但仍然能够与 geojson 层交互？

Answer 1

假设您知道 Pane 的 CSS 类等，您没有正确使用 Leaflet 库(例如手动将层附加到 HTML 容器)。

改用这个:

map.createPane('labels');    
map.getPane('labels').style.zIndex = 1000;
map.getPane('labels').style.pointerEvents = 'none';

var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);

var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
    pane: 'labels'
}).addTo(map);

你可以看到一个working example here .