基于openlayers雷达图的叠加显示

时间:2024-04-04 07:28:09

本文介绍雷达拼图在 OpenLayers 上的叠加显示,雷达拼图是由中国气象局气象探测中心在《天气雷达拼图v3.0》系统中发布的,每个观测时次一幅 PNG 透明图片。对于静态图片加载,OpenLayers 提供了 ol.source.ImageStatic 来支持,可以参考官方的 demo Image Reprojection,demo 演示了图片叠加以及投影调整的具体实现。在具体实现雷达拼图的过程中,还是遇到一些特殊场景产生的问题,本文对这些问题的产生和解决方法做一些介绍。

1. 雷达拼图

《天气雷达拼图v3.0》系统中雷达拼图的展示效果如下图。
基于openlayers雷达图的叠加显示
叠加的透明 PNG 拼图如下图。这是一张 extent 为 [73, 12.2, 135, 54.2],projection 为 EPSG:3857 的静态图片,尺寸为 5545 × 4697 。
基于openlayers雷达图的叠加显示

2. ol.source.ImageStatic

A layer source for displaying a single, static image.

完整属性请查阅官方 API 文档。两个属性较为重要 imageExtent 、 projection 。

  • imageExtent 需要给出图片的矩形经纬度范围,与 GIS 工具里的配准操作相似。
  • projection 需要给出图片默认投影。

3. 叠加效果

codepen点击预览

4. 性能

在实践中,雷达拼图的图片的尺寸较大,如果图片与底图的投影不一致,图片就需要做 reprojection ,整体性能出现严重下降,参考下面的例子,略耗电[捂脸]。所以如果有必要,还是应该在服务器端将投影调整一致,客户端不适合做这样的“差事”。

codepen点击预览

5. 跨域

如果在 OpenLayers 中启动 webgl 渲染引擎,则需启动 ol.source.ImageStatic 的跨域支持,否则会收到异常

Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.

简单的添加 crossOrigin: '' 即可。

6.截图

对于实现图片叠加很简单,png,jpg图片格式应该都可以叠加。若要对其在网络客户端截图,尤其是用html2canvas.js,要将图片的格式改成.png即可。