角度和遷移openlayers到ol＆proj4js

Question

嘗試使用openlayers將基於角度的項目從已棄用的openlayers-npm-package遷移到推薦的ol-npm-package 。 通過調試我意識到我有一個問題，以前仍在工作的proj4集成。

經過兩天遵循不同的方法，嘗試這個和那個，意識到在這個特殊的庫組合中，問題似乎是由於缺乏新的ol包裝的類型。

我現在可以確認 - 並希望它能幫助其他人（我不能評論SO-Answer ） - 是，對於proj4的支持還沒有出現在@ types / ol：'4.6.2'中 ，但在@中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 （在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);

Answer 2

OpenLayers 5不再具有setProj4方法，而是ol / proj / proj4模塊中的register方法。 所以，我按照@ user10324080的解決方案進行了討論，並在此討論並使用Angular 6進行以下解決方案：

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

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