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

Question

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

这是我将地名图层添加到窗格的代码：

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

这是我的 CSS 窗格代码：

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

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

Answer 1

你没有正确使用 Leaflet 库（例如，手动将层附加到 HTML 容器），假设你知道窗格的 CSS class，等等).

改用这个：

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.

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

Leaflet.js - Tilelayer visible above geojson layer. GeoJSON interactivity issue

javascript

css

leaflet