React-Leaflet中GeoJSON工具提示点击时重复显示问题求助

问题原因 #

当给GeoJSON特征绑定bindTooltip并设置sticky: true时，Leaflet的默认行为存在两种触发逻辑：

• 鼠标悬停时，Tooltip会跟随鼠标指针（符合预期）
• 点击特征时，Leaflet会自动将Tooltip锚定到该特征的几何中心并显示——这是因为点击操作会触发特征的"激活"状态，强制Tooltip切换到锚定特征的模式。

解决方法 #

通过拦截特征的点击事件，主动关闭Tooltip即可避免该问题。修改你的onEachFeature函数：

function onEachFeature(feature, layer) {
  // 绑定Tooltip并设置sticky属性
  layer.bindTooltip(feature.properties.name, {
    sticky: true
  });

  // 点击特征时关闭Tooltip，阻止其在特征中心显示
  layer.on('click', (e) => {
    e.target.closeTooltip();
  });
}

如果你的业务需要点击特征执行其他逻辑，只需在关闭Tooltip的代码块后添加对应业务代码即可。

另一种可选方案是设置Tooltip的interactive: false来禁用交互响应，但这会同时取消悬停时的跟随效果，因此更推荐第一种方法。

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