Leaflet Choropleth地图自定义信息控件及悬停交互失效问题求助

• 冗余图层叠层拦截交互
  • 代码里一共建了3个同范围的国家矢量图层，只有最后创建的1个图层绑定了鼠标交互事件，另外2个完全没有事件绑定。
  • 异步回调里反复调用geo.addData(statesData)加载地理数据，无事件的图层要素不断叠加，只要层级顺序上移，就会完全挡住下方带事件图层的所有鼠标点击、滑过交互，直接导致监听器没反应。
• 异步数据加载流程断裂
  • 写了setup()函数用来拉取疫情接口数据，但整个代码块从头到尾没调用过这个函数，疫情数据根本没被写到地理要素的属性里，所有和cases相关的配色计算、信息展示逻辑都没有实际数据支撑。
• 变量作用域混乱
  • 全局用var重复声明geojson、covid变量，受var的变量提升规则影响，全局变量指向的图层实例、数据实例和实际预期完全不符；触发resetHighlight逻辑时，会因为调用了错误实例的resetStyle方法直接抛错，中断事件执行流程，表现出来就是监听器“失效”。
• 图层数据不同步
  • 带交互事件的GeoJSON图层初始化时加载的是不带cases属性的基础地理数据，后续匹配完疫情数据的地理要素全被加到了无交互的geo图层上，带事件图层上的要素没有匹配数据，就算触发了事件，更新出来的信息内容也是空的，进一步让人觉得事件没运行。
• 国家匹配逻辑不兼容
  • 国家名称比对时直接做全等判断，没处理字符串空格、大小写、官方全称和通用简称的差异，大部分国家都匹配不到对应的疫情数据，cases属性是undefined，配色计算完全异常。

• 删掉所有冗余的GeoJSON图层实例，全局只留1个绑定了样式和交互事件的图层，所有数据加载、样式调整、事件绑定都在这一个实例上做，从根源上避免多图层叠层拦截交互。
• 补全异步流程的触发逻辑，确保拉取疫情数据的setup()函数被实际执行；数据匹配完成后，清空唯一图层的旧数据，重新加载更新后的地理要素。
• 修正变量作用域问题，不再用var重复声明全局变量，数据更新后同步刷新图层样式，确保交互逻辑里调用的图层实例是全局唯一的那个。
• 给国家匹配逻辑加基础的字符串兼容处理，提升匹配率，避免cases属性缺失导致的样式、信息展示异常。

// 全局唯一的交互图层实例
let covidMapLayer;
// 全局存储接口返回的疫情数据
let covidDataset = [];

// 地图初始化、底图加载、信息控件、图例、配色函数、事件处理函数的原有定义逻辑保持不变

// 初始化时创建唯一的GeoJSON图层，绑定样式与交互事件
covidMapLayer = L.geoJson(statesData, {
  style: style,
  onEachFeature: onEachFeature
}).addTo(map);

// 修正后的异步数据回调
function gotData(responseData) {
  covidDataset = responseData;
  // 给地理要素匹配对应的疫情数据
  statesData.features.forEach(feature => {
    const matchItem = covidDataset.find(item => {
      const geoName = feature.properties.ADMIN?.trim().toLowerCase() || '';
      const apiName = item.country?.trim().toLowerCase() || '';
      return geoName === apiName || feature.properties.ISO_A3 === item.countryInfo?.iso3;
    })
    if (matchItem) {
      feature.properties.cases = matchItem.cases;
    }
  })
  // 清空图层旧数据，重新加载更新后的地理要素
  covidMapLayer.clearLayers();
  covidMapLayer.addData(statesData);
}

// 修正resetHighlight逻辑，直接绑定全局唯一的图层实例
function resetHighlight(e) {
  covidMapLayer.resetStyle(e.target);
  info.update();
}

// 确保异步拉取数据的函数被实际执行
setup();

• 不要在其他图层上重复加载同范围的地理要素，所有数据更新操作都统一走唯一的交互图层，避免无事件要素挡住交互。
• 每次更新图层数据前调用clearLayers()清空旧要素，不要反复叠加同范围的矢量内容。
• 不需要单独建无交互的图层承载样式数据，唯一的交互图层本身就可以通过style函数读取要素属性计算配色。

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