React中Highcharts地图geo-points显示异常问题排查与修复求助

问题描述 #

使用React + HighchartsReact开发地图时，尝试通过mappoint系列标记带经纬度的城市（如伦敦、伯明翰），但所有点都被定位到(0,0)坐标，无法正确显示在地图对应位置。代码如下：

import Highcharts from 'highcharts'
import * as HighchartsMap from 'highcharts/highmaps';
import HighchartsReact from 'highcharts-react-official'

//import mapDataWorld from 'https://code.highcharts.com/mapdata/custom/world.geo.json';
import mapDataWorld from '../jsons/maps/world.json';

const options: HighchartsMap.Options = {        
            title: undefined,
            legend: {
                enabled: false
            },
            tooltip: {
                enabled: false
            },
            series: [{
                type: 'map',
                mapData: mapDataWorld,
                name: 'Great Britain',
                borderColor: '#a0a0a0',
                nullColor: 'rgba(255, 255, 255, 0.3)',
                showInLegend: false
            }, {
                type: 'mappoint',
                name: 'Cities',
                dataLabels: {
                    format: '{point.id}'
                },
                data: [{
                    id: 'London',
                    lat: 51.507222,
                    lon: -0.1275
                }, {
                    id: 'Birmingham',
                    lat: 52.483056,
                    lon: -1.893611
                }]
            }]
        };

        return (
<div className="mymap">
    <HighchartsReact
        options = {options}
        highcharts = {HighchartsMap}
        constructorType = {'mapChart'}
    />
</div>);

错误原因 #

• Highmaps的mappoint系列不支持直接识别lat/lon字段，它需要的是地图投影坐标系下的x/y坐标。
• 你的地图数据采用Web墨卡托投影（EPSG:3857），而输入的经纬度属于WGS84坐标系（EPSG:4326），两者不兼容，直接使用会被解析为无效坐标，默认定位到(0,0)。

修复方案 #

利用Highmaps提供的latLonToProjectedUnits方法，将经纬度转换为地图对应的投影坐标，替换原数据中的lat/lon为转换后的x/y。

修改后的完整代码：

import Highcharts from 'highcharts'
import * as HighchartsMap from 'highcharts/highmaps';
import HighchartsReact from 'highcharts-react-official'

import mapDataWorld from '../jsons/maps/world.json';

// 封装坐标转换函数
const convertToMapCoords = (lat, lon) => {
  // 从地图数据获取投影信息，默认使用Web墨卡托
  const projection = mapDataWorld.crs?.properties?.name || 'EPSG:3857';
  return HighchartsMap.latLonToProjectedUnits({ lat, lon }, projection);
};

const options: HighchartsMap.Options = {        
  title: undefined,
  legend: {
    enabled: false
  },
  tooltip: {
    enabled: false
  },
  series: [{
    type: 'map',
    mapData: mapDataWorld,
    name: 'Great Britain',
    borderColor: '#a0a0a0',
    nullColor: 'rgba(255, 255, 255, 0.3)',
    showInLegend: false
  }, {
    type: 'mappoint',
    name: 'Cities',
    dataLabels: {
      format: '{point.id}'
    },
    data: [
      {
        id: 'London',
        // 转换经纬度为投影坐标
        ...convertToMapCoords(51.507222, -0.1275)
      },
      {
        id: 'Birmingham',
        ...convertToMapCoords(52.483056, -1.893611)
      }
    ]
  }]
};

return (
  <div className="mymap">
    <HighchartsReact
      options={options}
      highcharts={HighchartsMap}
      constructorType={'mapChart'}
    />
  </div>
);

补充说明 #

• 如果你的地图数据明确指定了其他投影（比如EPSG:4326），需要在转换函数中传入对应的投影名称，确保坐标匹配。
• 也可以手动计算投影坐标后直接传入x/y字段，效果一致。

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