openlayers-5 - 使用 OpenLayers 5 显示地理引用图像

Question

我正在尝试制作一个应用程序，用户可以在其中对扫描的 map 进行地理配准。您可以在此处查看示例:https://codesandbox.io/s/2o99jvrnyy
有两个图像:

assets/test.png - 不旋转

assets/test_rotation.png - 带旋转

第一张图像已正确加载到 map 上，但带有旋转的图像却没有。

我找不到有关 OpenLayers 5 是否可以处理具有存储在世界文件中的转换参数的图像的信息 .可能我错过了一些东西，但无法弄清楚是什么。

我的逻辑是这样工作的:

使用 4 个点通过仿射变换计算变换参数。您可以在 中看到逻辑Affine.js 文件。从源图像和 map 中至少选取了 4 个点。然后使用这 4 个点计算变换参数。之后，我正在计算图像的范围:

width = image.width in pixels
height = image.height in pixels
width *= Math.sqrt(Math.pow(parameters.A, 2) + Math.pow(parameters.D, 2));
height *= Math.sqrt(Math.pow(parameters.B, 2) + Math.pow(parameters.E, 2));

// then the extent in projection units is
extent = [parameters.C, parameters.F - height, parameters.C + width, parameters.F];

世界文件参数按定义计算 here .

可能的问题是，在 OpenLayers 5 中作为静态图像加载时，带有旋转的图像没有旋转，但找不到方法来做到这一点。

我尝试使用计算参数在 QGIS 和 ArcMap 中加载两个图像，并且它们都正确加载。您可以看到第二张图片的结果:



您可以在此处查看每个图像的参数:

Image: test.png
Calculated extent: [436296.79726721847, 4666723.973240128, 439864.3389057907, 4669253.416495154]
Calculated parameters (for world file):
3.8359372067274027
-0.03146800786355865
-0.03350636818089405
-3.820764346376064
436296.79726721847
4669253.416495154

Image: test_rotation.png
Calculated extent: [437178.8291026594, 4667129.767589236, 440486.91675884253, 4669768.939256327]
Calculated parameters (for world file):
3.506332904308879
-1.2831186688536016
-1.3644002712982917
-3.7014921022625864
437178.8291026594
4669768.939256327

Answer 1

我意识到我的方法是错误的。无需在 map 投影中计算图像的范围并将其设置在图层中。我可以简单地添加一个转换函数，负责在图像投影和 map 投影之间转换坐标。这样，图像层始终将其投影设置为图像投影，并将范围设置为以像素为单位的图像大小。

变换函数是这样添加的:

import { addCoordinateTransforms } from 'ol/proj.js';

addCoordinateTransforms(
  mapProjection,
  imageProjection,
  coords => {
    // forward
    return Affine.transform(coords);
  },
  coords => {
    // inverse
  }
)

仿射参数再次从至少 3 个点计算:

// mapPoints - coordinates in map projection
// imagePoints - coordinates in image projection
Affine.calculate(mapPoints, imagePoints);

你可以在这里看到一个完整的例子 - https://kw9l85y5po.codesandbox.io/