如何在页面刷新时保留amCharts 5地图的国家点击状态？

实现方案 #

利用localStorage存储已激活国家的ISO代码列表，页面加载时读取并恢复状态，点击操作时同步更新存储内容。

修改后的完整代码 #

<html>
<head>
    <meta charset="UTF-8">
    <title>Interactive Polygon Map</title>
    <!-- Styles -->
    <style>
        #chartdiv {
            width: 100%;
            height: 500px;
        }
    </style>

    <!-- Resources -->
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/map.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/geodata/worldLow.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
</head>
<body>
    <div id="chartdiv"></div>
    <script>
    
        am5.ready(function () {
            var root = am5.Root.new("chartdiv");

            root.setThemes([am5themes_Animated.new(root)]);

            var chart = root.container.children.push(am5map.MapChart.new(root, {
                panX: "rotateX",
                panY: "translateY",
                projection: am5map.geoNaturalEarth1()
            }));

            var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
                geoJSON: am5geodata_worldLow,
                exclude: ["AQ"]
            }));

            chart.chartContainer.set("background", am5.Rectangle.new(root, {
                fill: am5.color(0x191919),
                fillOpacity: 1.0
            }));

            polygonSeries.mapPolygons.template.setAll({
                tooltipText: "{name}",
                toggleKey: "active",
                interactive: true,
                fill: am5.color("#FFD6E6"),
            });

            polygonSeries.mapPolygons.template.states.create("hover", {
                fill: am5.color("#DEB4C6")
            });

            polygonSeries.mapPolygons.template.states.create("active", {
                fill: am5.color("#B9CCB1")
            });

            // 从localStorage读取已激活国家列表
            function getActiveCountries() {
                const stored = localStorage.getItem('activeCountries');
                return stored ? JSON.parse(stored) : [];
            }

            // 保存激活国家列表到localStorage
            function saveActiveCountries(list) {
                localStorage.setItem('activeCountries', JSON.stringify(list));
            }

            // 初始化时恢复激活状态
            function restoreActiveStates() {
                const activeList = getActiveCountries();
                activeList.forEach(countryId => {
                    const polygon = polygonSeries.getPolygonById(countryId);
                    if (polygon) {
                        polygon.isActive = true;
                    }
                });
            }

            // 处理国家点击事件
            function handleCountryClick(event) {
                var polygon = event.target;
                var countryId = polygon.dataItem.dataContext.id;
                var activeList = getActiveCountries();
                
                // 切换激活状态
                polygon.isActive = !polygon.isActive;
                
                // 更新激活列表
                if (polygon.isActive) {
                    if (!activeList.includes(countryId)) {
                        activeList.push(countryId);
                    }
                } else {
                    activeList = activeList.filter(id => id !== countryId);
                }
                
                // 保存到localStorage
                saveActiveCountries(activeList);
            }

            // 绑定点击事件
            polygonSeries.mapPolygons.events.on("hit", handleCountryClick);

            // 点击水域返回初始视角
            chart.chartContainer.get("background").events.on("click", function () {
                chart.goHome();
            });

            // 添加缩放控制
            var zoomControl = chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
            var homeButton = zoomControl.children.moveValue(am5.Button.new(root, {
                paddingTop: 10,
                paddingBottom: 10,
                icon: am5.Graphics.new(root, {
                    svgPath: "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8",
                    fill: am5.color(0xffffff)
                })
            }), 0);

            homeButton.events.on("click", function () {
                chart.goHome();
            });

            // 地图加载完成后恢复激活状态
            chart.appear(1000, 100).then(() => {
                restoreActiveStates();
            });

        });
    </script>
</body>
</html>

关键代码说明 #

1. 存储与读取逻辑：

   • getActiveCountries()：从localStorage读取激活列表，无数据则返回空数组
   • saveActiveCountries(list)：将数组转为JSON字符串存入localStorage（localStorage仅支持字符串类型存储）

2. 状态恢复：

   • restoreActiveStates()：遍历激活列表，通过polygonSeries.getPolygonById(countryId)获取对应国家图形元素，设置激活状态
   • 在chart.appear()的回调中执行恢复，确保地图元素已完全加载

3. 点击事件更新：

   • 从polygon.dataItem.dataContext.id获取国家ISO代码（amCharts geoJSON数据自带的唯一标识）
   • 根据当前激活状态更新列表，同步到localStorage

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