Angular 6中如何导入Highmaps地图集

别担心，我帮你把Node.js里的require写法转换成Angular能用的ES模块导入方式，几步就能解决地图不显示的问题！

1. 正确导入Highmaps和地图数据 #

Angular使用ES模块系统，所以我们不用require，而是用import来导入地图JSON文件。以你提到的世界地图为例，代码如下：

// 导入Highmaps核心库
import * as Highmaps from 'highcharts/highmaps';
// 导入具体的地图数据文件
import worldMap from '@highcharts/map-collection/custom/world.geo.json';

2. 在组件中使用地图数据初始化图表 #

接下来在你的组件（比如ngOnInit钩子）里初始化地图时，把导入的地图数据赋值给配置项里的mapData属性：

ngOnInit(): void {
  // 渲染地图到指定容器（容器id为container）
  Highmaps.mapChart('container', {
    title: {
      text: '全球地图'
    },
    series: [
      {
        mapData: worldMap, // 这里传入我们导入的地图数据
        name: '国家/地区',
        color: '#f0f0f0',
        borderColor: '#ffffff',
        borderWidth: 0.5
      }
    ]
  });
}

3. 解决TypeScript导入JSON的报错 #

如果导入JSON文件时TypeScript提示“找不到模块”，你需要修改tsconfig.json的compilerOptions，开启JSON模块解析：

{
  "compilerOptions": {
    // 其他配置...
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

这样配置后，TypeScript就能正确识别并导入JSON格式的地图数据了。

简单来说，Node.js的require对应Angular里的import，只要把地图JSON文件用ES模块方式导入，再传给Highmaps的配置，就能正常显示地图啦！

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