Как загрузить proj4 для широты / долготы в HighMaps с помощью TypeScript и React

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

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

import * as proj4 from "proj4";

Заранее спасибо!


reactjs typescript highcharts proj
person Peterhack    schedule 10.09.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

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

person daniel_s    schedule 12.09.2018

arrow_upward
-1
arrow_downward

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

(window as any).proj4 = proj4;
person Matt McCutchen    schedule 10.09.2018
comment
Это работает в живой демонстрации. Однако локально возникает следующая ошибка: TypeError: v.proj4 is not a function - person Peterhack; 10.09.2018
comment
Попробуйте изменить импорт на import proj4 from "proj4" или import proj4 = require("proj4"). Надеюсь, один из этих двух будет работать в зависимости от конфигурации вашей сборки. Какой беспорядок ... - person Matt McCutchen; 10.09.2018
comment
Что ж, теперь я получаю: TS1192: Module '".../node_modules/@types/proj4/index"' has no default export.. Действительно кажется беспорядок ... - person Peterhack; 10.09.2018
comment
Вы пробовали import proj4 = require("proj4")? Также попробуйте установить для параметра компилятора esModuleInterop значение true или false. Найдем волшебное сочетание вариантов. Или опубликуйте репозиторий, а я буду с ним возиться. - person Matt McCutchen; 11.09.2018
comment
Я пробовал, но потом получается: TS1202: Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead. Установка esModuleInterop на true не помогает. - person Peterhack; 11.09.2018
comment
Другой ответ сработал для вас? (Я не вижу, чем это отличается.) Если нет, то еще одно предположение: вернитесь к import * as proj4 from "proj4", затем сделайте console.log(proj4) и посмотрите, что там внутри. Возможно, вам потребуется сделать что-то вроде (window as any).proj4 = proj4.proj4. Если это все еще не сработает, мне понадобится репозиторий, чтобы помочь в дальнейшем. - person Matt McCutchen; 12.09.2018
comment
Да, мне подходит другой ответ, поэтому я его принял. - person Peterhack; 13.09.2018