Угловые и миграционные открытые слои в ol & proj4js

Попытался перенести проект на основе углов, используя openlayers, из устаревшего пакета openlayers-npm-package в рекомендованный ol-npm-package. После отладки я понял, что у меня проблема с ранее работающей интеграцией proj4.

После двух дней использования различных подходов, пробуя то и другое, понимая, что в этой специальной комбинации библиотек проблема, похоже, возникает из-за отсутствия типизаций для нового ol-пакета.

Теперь я могу подтвердить - и надеюсь, что это поможет другим (я пока не могу комментировать SO-Answer) - что поддержка proj4 еще не существует в @ types / ol: '4.6.2', но в @ типы / открытые слои: '^ 4.6.12'.

Таким образом, используя proj4 для предоставления различных проекций для открытых слоев, используя зависимости

"ol": "5.2.0",
"@types/openlayers": "4.6.12",

будет работать для следующего фрагмента кода, но ol в сочетании с @types/ol не будет:

импорт

import * as ol from 'openlayers';
import * as proj4x from 'proj4';
const proj4 = (proj4x as any).default;
proj4.defs([
  [ 'EPSG:25832', '+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs' ],
    ...
]);

конструктор

ol.proj.setProj4(proj4);
Источник

2 ответа

Решение

Пытаясь полностью избежать @types/openlayers и прибегнуть к @types/ol, я в итоге придумал следующее:

package.json

"dependencies": {
    ...
    "proj4": "2.4.4",
    ...

app /.../@types/ol / proj / proj4.d.ts (вручную создал еще один файл типов в папке app)

export namespace ol {
    namespace proj {
        function setProj4(proj4: any): void;
    }
}

импорт и определения в пределах, например. компонент

import proj from 'ol/proj';
import * as proj4x from 'proj4';
const proj4 = (proj4x as any).default;
// Two example-projections (2nd is included anyway)
proj4.defs([
    [ 'EPSG:25832', '+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs' ],
    [ 'EPSG:4326',  '+proj=longlat +datum=WGS84 +no_defs' ]
]);

в конструкторе - наконец регистрация proj4 с помощью ol

proj.setProj4(proj4);
Источник

OpenLayers 5 больше не имеет метода setProj4, а использует метод register в модуле ol/proj/proj4. Итак, я последовал за решением @user10324080, а также обсудил здесь и пришел к следующему решению с Angular 6:

  1. Добавлены следующие строки в конец CompilerOptions в файле tsconfig.js:

    "allowSyntheticDefaultImports": true, "esModuleInterop":true

  2. Я создал файл @types/ol/proj/proj4.d.ts и добавил в него:

    export function register(proj4: any): void;

  3. В файл.ts, где была создана карта, я добавил:

    import { fromLonLat } from 'ol/proj.js' import {register as proj4register } from 'ol/proj/proj4' import proj4 from 'proj4'; proj4.defs([[ 'EPSG:3067', '+proj=utm +zone=35 +ellps=GRS80 +units=m +no_defs']]); // Constuctor: proj4register(proj4); // ngOnInit: var view = new View({ projection: 'EPSG:3067', center: fromLonLat([27.47, 64.88], 'EPSG:3067'), zoom: 5 });

Я установил следующие версии библиотек и определений типов:

"ol": "^5.2.0",
"proj4": "^2.5.0",
"@types/ol": "^4.6.2",
"@types/proj4": "^2.3.4"
Источник
Другие вопросы по тегам