Угловые и миграционные открытые слои в 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:
Добавлены следующие строки в конец CompilerOptions в файле tsconfig.js:
"allowSyntheticDefaultImports": true, "esModuleInterop":true
Я создал файл
@types/ol/proj/proj4.d.ts
и добавил в него:export function register(proj4: any): void;
В файл.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"