OpenLayers 静态图（雷达拼图）叠加

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

1. 雷达拼图

《天气雷达拼图v3.0》系统中雷达拼图的展现效果以下图。

叠加的透明 PNG 拼图以下图。这是一张 extent 为 [73, 12.2, 135, 54.2]，projection 为 EPSG:3857 的静态图片，尺寸为 5545 × 4697 。

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: '' 便可。