Leaflet / Leaflet.VectorGrid

Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0
591 stars 192 forks source link

why can't I click the feature when I add 2 Leaflet.VectorGrid layer? #242

Open liyihongcug opened 4 years ago

liyihongcug commented 4 years ago

I have to point out that Leaflet.VectorGrid is OK when Leaflet.VectorGrid handle with one vectorTile address. It can click all the feature's properties of the Leaflet.VectorGrid layer.

But when I add many Leaflet.VectorGrid layer. layers address (for examples ,2 Leaflet.VectorGrid layers). It fails that only one layer's feature can be clicked and others can't be clicked.

all the layers are configured with interactive: true by me. I want to know the reason and how to solve with it .

codes are below :(only one (pbfLayer1,pbfLayer2) can be clicked and the other can't be clicked ) var cs1TileOptions = { rendererFactory: L.canvas.tile,
vectorTileLayerStyles: { 'cs1: {
weight: 1....... } }, interactive: true, getFeatureId: function(f) { return f.properties.OBJECTID; } }; v ar pbfLayer1= L.vectorGrid.protobuf(...cs1TileOptions pbfLayer1.on('click', function (e) { var properties = e.layer.properties; //console.log(e); L.popup().setContent('lvhua'+properties.名称+properties.地址+''+ properties.OBJECTID) .setLatLng(e.latlng) .openOn(map); });

var cs2TileOptions = { rendererFactory: L.canvas.tile,
vectorTileLayerStyles: { 'cs2: {
weight: 1....... } }, interactive: true, getFeatureId: function(f) { return f.properties.OBJECTID; } }; v ar pbfLayer2= L.vectorGrid.protobuf(...cs2TileOptions pbfLayer2.on('click', function (e) { var properties = e.layer.properties; //console.log(e); L.popup().setContent( properties.OBJECTID) .setLatLng(e.latlng) .openOn(map); });

Hugi-R commented 3 years ago

Hi ! Your layers are canvases, and you can't click through a canvas. See https://github.com/Leaflet/Leaflet.VectorGrid/issues/88#issuecomment-284350575

If possible, use the SVG renderer for the layer with the least elements, and put it above the canvas layer.

mngyng commented 2 years ago

Actually you can. See my workaround here: https://gist.github.com/perliedman/84ce01954a1a43252d1b917ec925b3dd