Angular 和迁移 openlayers 到 ol 和 proj4js

Question

尝试使用 openlayers 迁移基于 Angular 项目，远离已弃用的 openlayers-npm-package来推荐ol-npm-package .通过调试，我意识到以前仍在工作的 proj4 集成有问题.

在遵循不同的方法两天后，尝试了这个和那个，意识到在这种特殊的库组合中，问题似乎是由于缺少新 ol 包的类型造成的。

我现在可以确认的 - 并希望它能帮助其他人(我还不能对 SO-Answer 发表评论) - 是，@types/ol:'4.6.2' 中尚不支持 proj4| , 但在 @types/openlayers:'^4.6.12' .

因此利用 proj4 为使用依赖项的 openlayers 提供不同的投影

"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);

Answer 1

试图完全避免@types/openlayers 并求助于@types/ol 我最终想出了以下内容:

package.json

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

app/.../@types/ol/proj/proj4.d.ts(在应用程序文件夹下手动创建另一个类型文件)

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' ]
]);

在构造函数中 - 最后用 ol 注册 proj4

proj.setProj4(proj4);