Leaflet.js-在geojson图层上方可见的Tilelayer。 GeoJSON互动问题

Question

I have a leaflet.js project where I have a baselayer, a polygon geojson layer, and another tilelayer above the geojson layer which shows placenames. I've managed to get the placenames tilelayer to visualise above the geojson layer by adding it to a map pane. However, this has disabled click and hover events on the geojson layer. I'm thinking I probably have to add the goejson layer to it's own pane, or possibly the same pane as the placenames tilelayer, but I'm not sure.

Here's my code which add my placenames layer to a pane:

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

Here's my CSS code for the pane:

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

I've tried adding my geojson layer to the same pane, and changing the pointer-events option, but either it won't work, or I haven't hit on the right combination. Has anyone any ideas as to how I can resolve this so that I can have my tilelayer overlay above my geojson layer but still be able to interact with the geojson layer?

Answer 1

You're not using the Leaflet library properly (eg manually appending a layer to a HTML container), assuming you will know the CSS class of the pane, etc).

Use this instead:

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);

You can see a working example here .