角度和迁移开放层到 ol 和 proj4js答案

【问题标题】：angular & migration openlayers to ol & proj4js角度和迁移开放层到 ol 和 proj4js
【发布时间】：2019-02-11 10:52:53
【问题描述】：

尝试使用 openlayers 将基于角度的项目从弃用的 openlayers-npm-package 迁移到推荐的 ol-npm-package。通过调试，我意识到我之前仍然有效的 proj4 集成存在问题。

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

我现在可以确认 - 并希望它对其他人有所帮助（我还不能对 SO-Answer 发表评论） - 对 proj4 的支持在 @types/ol:'4.6.2' 中尚不存在，但在 @types/openlayers:'^4.6.12' 中。

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

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

将适用于以下代码-sn-p，但 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);

【问题讨论】：

标签： angular html-lists openlayers proj4js proj

【解决方案1】：

试图完全避免 @types/openlayers 并诉诸 @types/ol 我最终想出了以下内容：

package.json

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

app/.../@types/ol/proj/proj4.d.ts（在 app-folder 下手动创建另一个类型文件）

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

【讨论】：

【解决方案2】：

OpenLayers 5 不再有 setProj4 方法，而是 ol/proj/proj4 模块中的 register 方法。因此，我遵循@user10324080 的解决方案并讨论here 并使用Angular 6 得出以下解决方案：

在 tsconfig.js 文件的 CompilerOptions 末尾添加以下行：

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

【讨论】：