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