Leaflet中添加地理编码圆圈后GeoJSON图层点击与悬停交互失效问题求助

Got it, let's sort out this issue. Even though you set up a custom pane with pointerEvents: 'none', the Leaflet Circle layer still has its default interactive: true property enabled — that means it's still grabbing mouse events and blocking the underlying GeoJSON layer from responding.

Here's the simple fix: add interactive: false to your Circle options. This explicitly tells Leaflet not to let the circle react to any mouse interactions, so clicks and hovers will pass straight through to the GeoJSON layer below.

Modified Code #

// Search
map.createPane('searchradius');
map.getPane('searchradius').style.zIndex = 650;
map.getPane('searchradius').style.pointerEvents = 'none';
var geocoder = L.Control.geocoder({ defaultMarkGeocode: false })
  .on('markgeocode', function(e) {
    console.log(e.geocode);
    var center = e.geocode.center;
    var circle = L.circle(center, {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0,
      radius: 15000,
      pane: 'searchradius',
      interactive: false // This is the key fix
    }).addTo(map);
    map.fitBounds(circle.getBounds());
  })
  .addTo(map);

Why This Works #

Leaflet's vector layers (like L.circle) default to interactive: true, which can override the pane's pointerEvents setting in some scenarios. By setting interactive: false, you're directly turning off all mouse event handling for the circle. Pair this with your custom pane's pointerEvents: 'none', and you ensure the circle is just a visual element that doesn't interfere with your GeoJSON states layer's interactivity.

After making this change, when you search for "New York" and the circle draws, you'll be able to hover over the state underneath and see the highlight work as expected.

内容的提问来源于stack exchange，提问作者thekingofwallstreet