如何使用打字稿在高图中为 lat/long 加载 proj4 并做出反应

Question

我要复制this highmaps example in react using typescript. However, the lat/long points are not being displayed which seems related to proj4 package as it is working in this javascript demo。

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

import * as proj4 from "proj4";

提前致谢！

Answer 1

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

(window as any).proj4 = proj4;

Answer 2

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 3

你可以使用 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,                
            }
};

如何使用打字稿在高图中为 lat/long 加载 proj4 并做出反应

How to load proj4 for lat/long in highmaps using typescript and react

proj

highcharts

typescript

reactjs