如何使用打字稿在highmaps中加载经纬度的proj4并做出反应

Question

我想在使用打字稿的反应中重现 this highmaps 示例。但是，没有显示纬度/经度点，这似乎与 proj4 包有关，因为它在这个 javascript demo 中工作。

我已经在live demo 中尝试过。如果我按如下方式加载包，它没有被使用但我不知道应该在哪里调用它：

import * as proj4 from "proj4";

提前致谢！

Answer 1

Highcharts 需要 proj4 库应在 window 上可用，因此您可以创建自己的文件，将该包导出为模块，并包含以下代码：

import proj4 from 'proj4';

if (typeof window !== 'undefined') {
  window.proj4 = window.proj4 || proj4;
}

export default proj4;

将其保存到其他文件，例如'proj4-module.js' 然后像这样导入它：

import './proj4-module'

现场示例： https://codesandbox.io/s/m4o2q0pzzy

Answer 2

您可以使用 proj4 属性 https://api.highcharts.com/highmaps/chart.proj4

例子：

import proj4 from "proj4";
import highcharts from "highcharts";
import mapInit from "highcharts/modules/map";

mapInit(highcharts);

const chartOptions: highcharts.Options = {
            chart: {
                type: "map",
                map: "mexico",
                proj4: proj4,                
            }
};

Answer 3

无论好坏，Highmaps 似乎都希望在全局对象上定义 proj4。只需添加这行代码：

(window as any).proj4 = proj4;