openlayers-5 - 使用 OpenLayers 5 显示地理参考图像
问题描述
我正在尝试制作一个应用程序,用户可以在其中对扫描的地图进行地理参考。您可以在这里查看一个示例:https ://codesandbox.io/s/2o99jvrnyy 有两个图像:
- assets/test.png - 没有旋转
- assets/test_rotation.png - 带旋转
第一个图像在地图上正确加载,但带有旋转的图像不是。
我找不到有关 OpenLayers 5 是否可以处理带有存储在 world file 中的转换参数的图像的信息。可能我错过了一些东西,但不知道是什么。
这就是我的逻辑的工作原理:
使用 4 个点通过仿射变换计算变换参数。您可以在Affine.js文件中看到逻辑。从源图像和地图中至少拾取 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];
世界文件参数按此处定义计算。
可能的问题是,当在 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
解决方案
我意识到我的方法是错误的。在地图投影中无需计算图像的范围并将其设置在图层中。我可以简单地添加一个转换函数,负责转换图像投影和地图投影之间的坐标。这样,图像层始终将其投影设置为图像投影,并将范围设置为图像大小(以像素为单位)。
转换函数是这样添加的:
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/
推荐阅读
- php - 需要一个字段单独的条件验证器
- angular - 在来自数组的按钮的 ngFor 循环中生成不同的(单击)属性
- amazon-web-services - 难以理解 AWS cloudwatch 警报
- javascript - 使用 JQuery 从串联输入值的字符串中搜索并返回 JSON 文件值
- angular - 访问被 CORS 策略阻止:对预检请求的响应未通过访问控制检查
- kubernetes - Kubernetes 在使用 Helm 安装包时请求凭据
- javascript - 为什么当我触发函数时输入类型=数值为空
- html - 检查是否在 Div 区域内 onclick 事件
- swift - 使用 SwiftUI 呈现 ActionSheet 的正确方法
- c - 关于删除/替换结构