highcharts 如何使用typescript和react在highmaps中为纬度/经度加载proj 4

ux6nzvsh 于 2022-11-10 发布在 Highcharts

关注(0)|答案(4)|浏览(318)

我想使用typescript在react中重现this highmaps示例。但是，纬度/经度点没有显示，这似乎与proj 4包有关，因为它在此javascript demo中工作。
我已经在live demo中尝试过了。如果我按如下方式加载包，它不会被使用，但我不知道应该在哪里调用它：

import * as proj4 from "proj4";

提前感谢！

highcharts

来源：https://stackoverflow.com/questions/52258361/how-to-load-proj4-for-lat-long-in-highmaps-using-typescript-and-react

4条答案

按热度按时间

2guxujil1#

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

赞(0）回复(0）举报 2022-11-10

yhived7q2#

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

赞(0）回复(0）举报 2022-11-10

xiozqbni3#

将 * 作为proj 4_从'proj 4'导入; const proj 4 =项目4_.默认值;

赞(0）回复(0）举报 2022-11-10

wfveoks04#

不管是好是坏，看起来Highmaps期望proj4在全局对象上定义。