如何在Highcharts中开发包含独岛（Dokdo）的韩国地图？

默认Highcharts提供的韩国地图（kr-all.topo.json）未包含独岛（Dokdo），可通过以下两种方案解决：

方案1：修改TopoJSON地图数据（推荐，地理完整性更好） #

1. 获取独岛的地理坐标数据，将其作为新的feature添加到原TopoJSON的objects.kr-all.geometries数组中
2. 为新feature设置唯一hc-key（例如kr-dk），并补充name等属性
3. 在地图数据中加入独岛对应的数据项，确保能和地图正常关联显示

修改后的核心代码示例：

(async () => {
    // 自定义包含独岛的TopoJSON（需提前完成拓扑数据修改）
    const topology = await fetch(
        '自定义的含独岛kr-all.topo.json地址'
    ).then(response => response.json());

    // 补充独岛的数据项
    const data = [
        ['kr-4194', 10], ['kr-kg', 11], /* 原有数据项 */, ['kr-dk', 28]
    ];

    // 补充城市代码和名称映射
    let city_code = ['kr-kg', /* 原有代码 */, 'kr-dk'];
    let city_name = ['경기도', /* 原有名称 */, '독도'];

    Highcharts.mapChart('container', {
        chart: {
            map: topology
        },
        // 其余配置保持原有逻辑不变，新增的独岛会自动被渲染
        series: [{
            data: data,
            dataLabels: {
                enabled: true,
                formatter: function() {
                    for (let i = 0; i < city_code.length; i++){
                        if (this.point['hc-key'] === city_code[i]){
                            return city_name[i];
                        }
                    }
                }
            }
        }]
    });
})();

方案2：通过额外系列添加独岛标记（快速实现） #

无需修改原TopoJSON，直接添加一个scatter系列，基于经纬度定位独岛并标记：

(async () => {
    const topology = await fetch(
        'https://code.highcharts.com/mapdata/countries/kr/kr-all.topo.json'
    ).then(response => response.json());

    const data = [
        ['kr-4194', 10], ['kr-kg', 11], ['kr-cb', 12], ['kr-kn', 13],
        ['kr-2685', 14], ['kr-pu', 15], ['kr-2688', 16], ['kr-sj', 17],
        ['kr-tj', 18], ['kr-ul', 19], ['kr-in', 20], ['kr-kw', 21],
        ['kr-gn', 22], ['kr-cj', 23], ['kr-gb', 24], ['kr-so', 25],
        ['kr-tg', 26], ['kr-kj', 27]
    ];

    let city_code = ['kr-kg', 'kr-cb', 'kr-so', 'kr-kn', 'kr-2685', 'kr-pu', 
    'kr-2688','kr-sj', 'kr-tj', 'kr-ul', 'kr-in', 'kr-kw', 'kr-gn', 'kr-cj', 
    'kr-gb', 'kr-tg', 'kr-kj']

    let city_name = ['경기도', '전북', '서울', '경상남도', '전라남도', '부산', 
    '경상북도', '세종', '대전', '울산', '인천', '강원도', '충청남도', '제주도', '충청북도',
    '대구', '광주광역시']

    Highcharts.mapChart('container', {
        chart: {
            map: topology
        },
        title: {
            text: 'Highcharts Korea Map'
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        colorAxis: {
            min: 0
        },
        series: [{
            data: data,
            name: 'Random data',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function() {
                    for (let i = 0; i < city_code.length; i++){
                        if (this.point['hc-key'] === city_code[i]){
                            return city_name[i]
                        }
                    }
                }
            }
        }, {
            // 添加独岛标记系列
            type: 'scatter',
            name: '독도',
            data: [
                {
                    // 独岛大致经纬度
                    lat: 37.2417,
                    lon: 131.8625,
                    name: '독도'
                }
            ],
            marker: {
                radius: 6,
                fillColor: '#BADA55',
                lineColor: '#000',
                lineWidth: 1
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }]
    });
})();

效果对比 #

• 当前无独岛效果：
  
• 目标含独岛效果：
  

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