如何实现标记覆盖层下的多边形可点击且保留点图层悬浮提示？

要实现多边形全区域可点击（含点覆盖区域）同时点图层保留悬浮提示，核心是让点图层仅响应悬浮事件，同时允许点击事件穿透到下方的多边形图层。具体修改如下：

修正后的代码 #

library(leaflet)
library(dplyr)
library(sf)
library(htmlwidgets)

# NC counties shp文件处理
shape <- st_read(system.file("shape/nc.shp", package ="sf")) %>% 
  st_transform(crs = 4326)

# 构造点数据
points <- data.frame(name = c("Raleigh", "Greensboro", "Wilmington"),
                     x = c(-78.633333, -79.819444, -77.912222),
                     y = c(35.766667, 36.08, 34.223333)) %>% 
  st_as_sf(coords = c("x", "y"), crs = 4326)

leaflet() %>% 
  addProviderTiles("Stamen.Toner") %>% 
  # 多边形图层：保持可点击，点击显示popup
  addPolygons(data = shape, 
              fillColor = "aliceblue", 
              color = "grey",
              popup = ~NAME,
              options = pathOptions(clickable = TRUE)) %>%  
  # 点图层：开启clickable以支持悬浮提示，再通过JS限制仅响应悬浮
  addCircleMarkers(data = points, 
                   fillColor = "red", 
                   color = NA,
                   radius = 10,
                   fillOpacity = 1,
                   label = ~name,
                   options = pathOptions(clickable = TRUE)) %>% 
  # 自定义JS：设置点标记仅响应悬浮事件，点击穿透到多边形
  onRender("function(el, x) {
    var markers = el.querySelectorAll('.leaflet-marker-icon, .leaflet-circle-marker');
    markers.forEach(function(marker) {
      marker.style.pointerEvents = 'hover';
    });
  }")

关键修改说明 #

1. 修正点图层的clickable设置：将clickable = FALSE改为clickable = TRUE，确保点图层能接收鼠标悬浮事件，正常显示label提示。
2. 通过CSS pointer-events控制事件响应：使用onRender添加自定义JS代码，给所有点标记设置pointer-events: hover——这个CSS属性让元素仅响应悬浮事件，点击事件会直接穿透到下方的多边形图层，实现点击点所在区域时触发多边形的popup。
3. 兼容多种点图层：JS选择器同时包含.leaflet-marker-icon（普通addMarkers生成的标记）和.leaflet-circle-marker（addCircleMarkers生成的标记），适配多点点图层需求。

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