先给结论： 通过在“点击”和“悬停高亮”两个入口增加“当前行政区前缀校验”，并修复事件监听使用旧状态的问题，解决了跨区 可点击、可高亮的 bug。

1. 问题现象

在市级视图下，仍然可以点击到其他市的区县； 并且鼠标悬停时也会高亮范围外的行政区。

2. 根因分析

地图上的行政区是一个个“要素（Feature）”，鼠标点击/移动时都会命中这些要素。 之前的逻辑只负责“高亮样式”显示，但没有限制点击/高亮必须属于当前行政区范围。

另外，点击事件监听没有随着“当前行政区”变化更新，导致使用的是旧状态。

3. 修复方案（核心思路）

思路一句话： 对行政区要素先做“编码前缀校验”，不属于当前范围的直接忽略。

3.1 点击逻辑限制范围

• 位置：地图点击事件处理
• 做法：
  • 获取当前行政区编码 currentArea.code
  • 获取要素编码 xzq_dm
  • 如果 xzq_dm 不以 currentArea.code 开头，则直接 return

3.2 事件监听更新

• 位置：点击事件的 useEffect
• 做法：
  • 把 currentArea 加入依赖
  • 确保监听器使用最新行政区状态

3.3 悬停高亮限制范围

• 位置：pointermove 高亮逻辑
• 做法：
  • 如果要素属于行政区，但编码不在当前范围内，则清除高亮并返回

4. 用到的 React 概念

4.1 useEffect 是什么？

简化理解： 当某些数据变化时，自动执行一段代码。 常用来做“绑定事件”“发请求”等副作用。

示例（简化）：

useEffect(() => {
  // 绑定事件/请求数据
  return () => {
      // 清理事件/请求
  };
}, [依赖列表]);

依赖列表告诉 React： 只有这些依赖变化时，useEffect 才会重新执行。

5. 修复流程图

flowchart TD
  A[鼠标移动] --> B[地图获取像素下的要素 Feature]
  B --> C{是否有要素?}
  C -- 否 --> D[清除高亮]
  C -- 是 --> E{是否为行政区要素?}
  E -- 否 --> F[允许高亮]
  E -- 是 --> G{要素编码是否以当前行政区编码开头?}
  G -- 否 --> D
  G -- 是 --> F

点击逻辑与上述一致，只是“高亮”变成“选中/下钻”。

6. 影响范围

• 点击事件处理模块
• 悬停高亮模块
• 事件监听逻辑