Как загрузить proj4 для lat/long в старших картах, используя машинопись и реагировать

Question

Я хотел бы воспроизвести этот пример highmaps в действии, используя машинопись. Тем не менее, точки lat/long не отображаются, что связано с пакетом proj4, так как он работает в этой демонстрации javascript.

Я попробовал это в живом демо. Если я загружаю пакет следующим образом, он не используется, но я не знаю, где он должен быть вызван:

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_ из 'proj4';const proj4 = proj4_.default;

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,                
            }
};

Answer 4

Хорошо это или плохо, но похоже, что Highmaps ожидает, что proj4 будет определен для глобального объекта. Просто добавьте эту строку кода:

(window as any).proj4 = proj4;