Highcharts/Highmaps GeoJSON英国地图显示扭曲变形求助

我用Highcharts制作英国区域填充地图（包含英格兰东北、威尔士、西米德兰兹等地区），采用公开领域GeoJSON数据，但无论怎么设置容器div的宽高，地图投影始终扭曲、挤压。尝试在GeoJSON中添加hc-transform对象，复制了Highcharts官方英国地图的配置段，但问题仍未解决。不会用QGIS生成proj4格式字符串，寻求技术帮助。

附上代码：

(async () => {
    const data = [
        ['North East', 1536],
        ['North West', 3403],
        ['Yorkshire and the Humber', 629],
        ['East Midlands', 1120],
        ['West Midlands', 3562],
        ['East', 1239],
        ['London', 503],
        ['South East', 1632],
        ['South West', 972],
        ['Wales', 576],
        ['Scotland', 293],
        ['Northern Ireland', 269]
    ];

    const geojson = await fetch(
        'https://raw.githubusercontent.com/sophiemonk-cw/geojson/main/uk_regions.geojson'
    ).then(response => response.json());

  Highcharts.setOptions({
    lang: {
      thousandsSep: ','
  }
})
    Highcharts.mapChart('container', {
        chart: {
            map: geojson,
            style: {
              fontFamily: 'neue-haas-unica'
            }
        },
        title: {
            text: ''
        },
        colorAxis: {
            min: 269,
            max: 3562,
            tickPixelInterval: 50,
            minColor: '#CCF2ED',
            maxColor: '#5C328A'
        },
      
        tooltip: {
                pointFormat: '{point.name}{point.rgn19nm}: £{point.value}mn'
            },
      
        series: [{
            data: data.map(([name, value]) => ({ rgn19nm: name, value: value })),
            keys: ['rgn19nm', 'value'],
            joinBy: 'rgn19nm',
            name: 'GVA',
            mapData: geojson,
            borderWidth: 1,
            borderColor: '#fff',
            states: {
                hover: {
                    color: '#333',
                    borderWidth: 0,
                    animation: {
                      duration: 0
                },
                }
            },
            dataLabels: {
                enabled: false,
            }
        }]
    });
})();

地图扭曲的核心原因是GeoJSON的坐标系与Highcharts默认投影不匹配，英国区域常用的投影是OSGB 1936（EPSG:27700），而非默认的WGS84。以下是无需QGIS的解决步骤：

1. 引入proj4js库 #

Highcharts处理自定义投影需要依赖proj4js库，请自行在项目中引入该库的最新版本。

2. 配置投影并修改GeoJSON #

在获取GeoJSON后，手动添加正确的hc-transform配置，同时注册EPSG:27700的投影参数：

(async () => {
    const data = [
        ['North East', 1536],
        ['North West', 3403],
        ['Yorkshire and the Humber', 629],
        ['East Midlands', 1120],
        ['West Midlands', 3562],
        ['East', 1239],
        ['London', 503],
        ['South East', 1632],
        ['South West', 972],
        ['Wales', 576],
        ['Scotland', 293],
        ['Northern Ireland', 269]
    ];

    // 注册英国国家网格投影（EPSG:27700）
    proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs');

    const geojson = await fetch(
        'https://raw.githubusercontent.com/sophiemonk-cw/geojson/main/uk_regions.geojson'
    ).then(response => response.json());

    // 为GeoJSON添加Highcharts投影转换配置
    geojson['hc-transform'] = {
        default: {
            crs: 'EPSG:27700',
            scale: 0.0001,
            xOffset: 0,
            yOffset: 0
        }
    };

    Highcharts.setOptions({
        lang: {
            thousandsSep: ','
        }
    });

    Highcharts.mapChart('container', {
        chart: {
            map: geojson,
            style: {
                fontFamily: 'neue-haas-unica'
            }
        },
        title: {
            text: ''
        },
        colorAxis: {
            min: 269,
            max: 3562,
            tickPixelInterval: 50,
            minColor: '#CCF2ED',
            maxColor: '#5C328A'
        },
      
        tooltip: {
                pointFormat: '{point.name}{point.rgn19nm}: £{point.value}mn'
            },
      
        series: [{
            data: data.map(([name, value]) => ({ rgn19nm: name, value: value })),
            keys: ['rgn19nm', 'value'],
            joinBy: 'rgn19nm',
            name: 'GVA',
            mapData: geojson,
            borderWidth: 1,
            borderColor: '#fff',
            states: {
                hover: {
                    color: '#333',
                    borderWidth: 0,
                    animation: {
                      duration: 0
                    },
                }
            },
            dataLabels: {
                enabled: false,
            }
        }]
    });
})();

3. 调整容器宽高（可选） #

为了适配投影后的地图比例，建议给容器设置合适的宽高比，比如：

#container {
    width: 800px;
    height: 600px;
    margin: 0 auto;
}

关键说明 #

• hc-transform中的scale参数用于控制地图的缩放比例，可根据实际显示效果微调（比如0.00008或0.00012）
• 若GeoJSON本身已经是EPSG:27700坐标系，可省略proj4注册步骤，但大部分公开GeoJSON默认是WGS84（EPSG:4326），因此需要上述转换

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