Question

我有一个leaflet.js项目，其中我有一个基础层，一个多边形geojson图层，另一个瓦片层上面显示地名的geojson图层。我已经设法通过将地图名称瓦片层添加到地图窗格来使其可视化在geojson图层上方。但是，这已禁用geojson图层上的单击和悬停事件。我想我可能不得不将goejson图层添加到它自己的窗格，或者可能与placenames 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类等。）

请改用：

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 - 在geojson层上方可见的Tilelayer。 GeoJSON交互性问题

1 个答案: