如何用Highcharts实现加州特定县（如萨克拉门托县）的独立地图展示

完全可以实现只展示选中县的地图效果，核心思路是通过下拉选择框触发事件，动态过滤地图拓扑数据和对应的数据系列，再更新Highcharts实例。以下是修改后的完整实现：

步骤说明 #

• 添加下拉选择框，列出目标县及其对应的Highcharts地理编码
• 编写切换函数，根据选中的编码过滤拓扑结构中的县数据，同时匹配对应的数据项
• 调用chart.update()方法刷新地图，只渲染选中的县

完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>California County Map</title>
    <!-- Include Highcharts library and modules -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/maps/modules/map.js"></script>
    <script src="https://code.highcharts.com/mapdata/countries/us/us-ca-all.js"></script>
</head>

<body>
    <!-- 添加下拉选择框 -->
    <div style="text-align:center; margin:10px 0;">
        <select id="county-select">
            <option value="all">所有县</option>
            <option value="us-ca-067">萨克拉门托县</option>
            <option value="us-ca-037">洛杉矶县</option>
            <option value="us-ca-075">圣迭戈县</option>
        </select>
    </div>

    <div id="ca-map" style="height: 600px; min-width: 310px; max-width: 800px; margin: 0 auto;"></div>

    <script>
        let chart;
        let originalTopology;
        const originalData = [
            ["us-ca-083", 10], ["us-ca-111", 11], ["us-ca-071", 12],
            ["us-ca-115", 13], ["us-ca-101", 14], ["us-ca-031", 15],
            ["us-ca-053", 16], ["us-ca-057", 17], ["us-ca-059", 18],
            ["us-ca-065", 19], ["us-ca-073", 20], ["us-ca-041", 21],
            ["us-ca-075", 22], ["us-ca-095", 23], ["us-ca-097", 24],
            ["us-ca-055", 25], ["us-ca-013", 26], ["us-ca-009", 27],
            ["us-ca-077", 28], ["us-ca-035", 29], ["us-ca-091", 30],
            ["us-ca-067", 31], ["us-ca-017", 32], ["us-ca-099", 33],
            ["us-ca-061", 34], ["us-ca-043", 35], ["us-ca-063", 36],
            ["us-ca-049", 37], ["us-ca-089", 38], ["us-ca-109", 39],
            ["us-ca-039", 40], ["us-ca-003", 41], ["us-ca-069", 42],
            ["us-ca-047", 43], ["us-ca-079", 44], ["us-ca-011", 45],
            ["us-ca-007", 46], ["us-ca-081", 47], ["us-ca-087", 48],
            ["us-ca-085", 49], ["us-ca-029", 50], ["us-ca-005", 51],
            ["us-ca-113", 52], ["us-ca-033", 53], ["us-ca-045", 54],
            ["us-ca-103", 55], ["us-ca-023", 56], ["us-ca-093", 57],
            ["us-ca-027", 58], ["us-ca-001", 59], ["us-ca-037", 60],
            ["us-ca-025", 61], ["us-ca-021", 62], ["us-ca-107", 63],
            ["us-ca-019", 64], ["us-ca-015", 65], ["us-ca-105", 66],
            ["us-ca-051", 67]
        ];
        const initialMarkerData = [];

        (async () => {
            originalTopology = await fetch(
                "https://code.highcharts.com/mapdata/countries/us/us-ca-all.topo.json"
            ).then(response => response.json());

            // 创建图表
            chart = Highcharts.mapChart("ca-map", {
                chart: {
                    map: originalTopology,
                    backgroundColor: "rgba(0, 0, 0, 0)"
                },
                credits: {
                    enabled: false
                },
                mapNavigation: {
                    enabled: true,
                    buttonOptions: {
                        verticalAlign: "bottom"
                    }
                },
                title: {
                    text: undefined
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    mappoint: {
                        dataLabels: {
                            enabled: false
                        },
                    }
                },
                series: [{
                    data: originalData,
                    name: "County",
                    color: "#609DCF",
                    allowPointSelect: false,
                    cursor: "pointer",
                    states: {
                        select: {
                            color: "#609DCF"
                        }
                    },
                    tooltip: {
                        pointFormat: "{point.name}"
                    }
                },
                {
                    type: "mappoint",
                    name: "Event",
                    data: initialMarkerData,
                    tooltip: {
                        pointFormat: "{point.name}"
                    }
                }],
            });

            // 绑定下拉框切换事件
            document.getElementById('county-select').addEventListener('change', function() {
                const selectedCounty = this.value;
                let filteredTopology = {...originalTopology};
                let filteredData = originalData;

                if (selectedCounty !== 'all') {
                    // 过滤拓扑结构，只保留选中的县
                    filteredTopology.objects.default.geometries = filteredTopology.objects.default.geometries.filter(geo => {
                        return geo.id === selectedCounty;
                    });
                    // 过滤数据，只保留选中县的对应数据
                    filteredData = originalData.filter(item => item[0] === selectedCounty);
                }

                // 更新图表
                chart.update({
                    chart: {
                        map: filteredTopology
                    },
                    series: [{
                        data: filteredData
                    }]
                });
            });
        })();
    </script>

</body>

</html>

关键细节 #

• 保存原始的拓扑结构和数据，避免切换时重复请求
• 过滤拓扑时要操作objects.default.geometries数组，只保留目标县的地理信息
• 调用chart.update()时更新地图的拓扑和数据系列，Highcharts会自动重新渲染地图

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