AmCharts地图交互故障：悬停时误触发点击hit选中态颜色异常

预期交互规则 #

• 鼠标悬停地图区域时，区域切换为浅紫色hover态效果
• 点击任意区域时，将该区域固定为黑色active选中态，其余所有已选中区域重置为默认白色样式

实际故障表现 #

• 无点击操作仅悬停时，偶发区域显示为黑色active态，未呈现预期的浅紫色hover效果
• 完成一次区域点击选中后，再悬停相邻区域时，上述故障可稳定复现
• 切换至全屏展示模式时，故障表现更明显

可复现代码 #

JS 逻辑部分 #

var map = am4core.create("chartdiv", am4maps.MapChart);

    map.seriesContainer.events.disableType("doublehit");
    map.chartContainer.background.events.disableType("doublehit");
    map.seriesContainer.draggable = false;
    map.seriesContainer.resizable = false;

    map.geodata = am4geodata_slovakiaLow;
    var polygonSeries = map.series.push(new am4maps.MapPolygonSeries());
    polygonSeries.useGeodata = true;

    map.projection = new am4maps.projections.Mercator();

    var polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.tooltipText = "{name}";
    polygonTemplate.fill = am4core.color("white");
    polygonTemplate.stroke = am4core.color("black");


    var myEvent = polygonTemplate.events.on("hit", (ev) => {
        console.log("You clicked on :" + ev.target.dataItem.dataContext.name);

    }, this);

    // Create active state
   var activeState = polygonTemplate.states.create("active");
    activeState.properties.fill = am4core.color("black");

    // Create an event to toggle "active" state
    polygonTemplate.events.on("hit", function(ev) {
        polygonSeries.mapPolygons.each(function(polygon){
            polygon.setState("default");
        });

        ev.target.isActive = !ev.target.isActive;
    })


    var hs = polygonTemplate.states.create("hover");
    hs.properties.fill = am4core.color("#7660E6");

HTML 结构部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/slovakiaLow.js"></script>
<div id="chartdiv" style="width: 900px; height: 800px;"></div>

故障核心原因 #

1. Active状态标记残留
   现有代码在处理点击切换逻辑时，仅对所有多边形调用了setState("default")重置视觉样式，但没有同步将每个多边形的isActive标记显式设为false。setState("default")仅会切回默认填充样式，不会自动清除元素上残留的active状态标记。
   当鼠标再次移动到残留active标记的多边形上时，由于AmCharts 4的状态优先级规则中，active态优先级高于hover态，引擎会直接应用active态的黑色填充，不会渲染浅紫色的hover效果，视觉上就会表现为“仅悬停就触发了active选中态”。
2. 全屏模式下故障放大的原因
   全屏模式下地图的渲染尺寸变大，多边形的命中区域面积同步增加，鼠标移动时更容易接触到带有残留active标记的区域，因此故障触发概率更高。

修复方案 #

修改点击事件中的状态重置逻辑，在遍历多边形时同步清除active标记，同时移除无必要的toggle逻辑：

polygonTemplate.events.on("hit", function(ev) {
    polygonSeries.mapPolygons.each(function(polygon){
        polygon.isActive = false; // 显式清除active标记，避免状态残留
        polygon.setState("default");
    });
    ev.target.isActive = true; // 直接将当前点击区域设为选中态
})

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