共機軌跡怎麼處理？地理圖資後製小祕技：空間對位（Georeferencing）
在最近發表的中國軍演專輯《共機、軍艦、飛彈 圖解72小時「封台」軍演》中，我們用了許多地圖來敘事，圖資部份除了前次台海專輯《最危險的海峽》出現過的共機軌跡外，這次也多了軍演區域、飛彈落點以及雷根號軌跡等資訊需要呈現。
在呈現手法上，也希望能以滾動敘事字卡搭配地圖縮放、重點區塊淡入淡出等效果，讓讀者能更好理解我們想說的故事。
因此在後製圖資時，除了請設計師重新描圖外，如何讓這些品質參差不齊的圖資能在網頁上呈現，是前端工程師另外要去思考的。
而在整個流程中最重要的步驟就是「空間對位」（Georeferencing）。
這篇文章將會手把手教大家如何用 QGIS 空間對位功能，並從中介紹敝組處理棘手圖資的流程，讓我們能夠進一步高度客製化網頁上的地圖、增加敘事手法的彈性。
先來看看資料
嗯，先來了解一下這次軍演專輯中，短時間內所能拿到的圖資類型：
.geojson / .shp …：結構化的圖資檔案，能匯入 GIS 軟體進行編修，也可直接導入網頁中做客製化（地圖樣式、互動效果），檔案再利用性高，絕對是工程師最希望能在一開始就拿到的檔案格式。.pdf / .png / .jpg …：非結構化的圖資檔案，嗯，就是圖檔，大多時候只能透過描圖的方式做客製化（地圖樣式），最終成品可能只能是靜態圖片，檔案再利用性低。
所以我們的目標是要利用空間對位功能，將地理資訊附加在圖檔上，提升圖檔資源的再利用性。
廢話不多說，我們直接以 「南海戰略態勢感知計劃」（SCSPI） 發布的雷根號軌跡為例，馬上開始操作！
步驟1：打開 QGIS，放好底圖！
為了讓圖片能空間對位，我們必須先放置一張底圖當作對位的基準，底圖的範圍、比例尺大小，可依手上的圖片去做調整，這次的情境（第一島鏈）可直接使用 Natural Earth 提供的圖資就好。
在一開始時，也要特別留意 GIS 軟體內的座標參考系統（CRS）設置，最理想的狀況是圖片、底圖、網頁上的 CRS 都要一致（以這次來說是統一使用 WGS84 經緯度），這樣才比較容易對位，對位結果的誤差也會非常小。
但有時並不清楚圖片是使用何種 CRS ，這時只能多花費一些時間，比對周遭地形形狀、地標來做更多的調整。
這邊 CRS 一定要確認好！如果設計師拿到 CRS 不對的底圖，是有可能讓設計做描圖白工的。（先向我們設計師道歉一次 XD）
步驟2：開啟空間對位視窗、導入圖檔
QGIS 工具列 > Raster > Georeferencer > Open Raster (左上角) > 選取圖片圖資
步驟3：開始對位
Georeferencer視窗 > Add Point > 選取圖資圖片中一個點位 > From Map Canvas> 點選底圖中相對應的點位
每一個圖資，至少要 4 個點、重複執行上面步驟 4 次，QGIS 才能幫我們進行空間對位。當然如果對的點位愈多愈分散，最後對位出來的結果也能幫助圖片更貼近底圖。
步驟4：輸出！
到步驟 3 基本上已經完成空間對位了，接著就是要把我們的圖片圖資輸出成可匯入 GIS 軟體中的 GeoTIFF 檔案，在此之前有一項重要的設定必須先做！
Georeferencer 視窗 > Transformation Settings
打開設定視窗後，除了設定輸出檔案的位置外，最重要的是 Tranformation type 的設定，我們要選擇一個對我們的圖片圖資進行轉換的算法。
在 QGIS 文件中有對每個算法做簡單的介紹，而其中 Thin Plate Spline 及 Polynomial 算法在空間對位中較常使用的，輸出結果相較於其他算法也比較精確，至於要選哪一種可能需要考量圖片圖資的品質，或是都選選看觀察一下 Georeferencer 視窗中 Residual 欄位的數值大小（通常愈小愈好）。
完成設定後點選 Start Georeferncing ，並將輸出的 GeoTIFF 檔案拉近 QGIS 就大功告成啦！
因為原始圖片圖資的 CRS、截圖的視角可能跟底圖不同，而造成轉換過後的 GeoTIFF 圖片會變的有點歪斜，這些都是正常的。另外經過空間對位後的圖資，也非常難百分之百精準對到，精准度還是要根據原始圖片圖資的品質、資訊來決定。
拿到 GeoTIFF 檔案後，接下來能做什麼？
- 在 GIS 軟體中製作再利用性高的圖資：
我們可以直接在 GIS 軟體中建立新的圖層，疊著經過空間對位後的圖片圖資（GeoTIFF）進行描圖，最後輸出成.geojson / .shp檔案，這樣就能在網頁上對圖層做更多的調整。這次軍演專輯中，飛彈落點圖資就是依照此方法產出的。 - 取得圖片的邊界 bounding box（bbox） 資訊與設計一起協作：
另一種利用 GeoTIFF 圖資的方式是取得邊界資訊，有了邊界資訊後就能直接在前端程式中再進行一次空間對位。
這種方法的好處是當遇到資訊量較多的圖資時，不一定要在 GIS 軟體中製圖，可以讓設計同事在較熟悉的軟體（像是 Figma）中描好圖，直接輸出成 .svg / .png 圖檔並搭配邊界資訊在網頁上對位。而壞處就是最後比較難輸出成 .geojson / .shp 檔案，做為下次使用。共機動態軌跡其中一個資料加工流程就是用這種方法。
這次的軍演專輯我與設計師重複以上流程不下數十次，資訊每天不斷更新，共機軌跡、雷根號動態只要範圍有變化，圖片就要重新對位一次。
「不寫下來分享就太可惜了」，是做完這次專輯後的第一個想法。
希望這次的分享有幫助到大家，如果有任何建議，或是作法上有什麼更好的地方，歡迎大家與我們交流（在 medium, twitter 上都可以找到我們）！
題外話，除了圖資的更新外，還需要依每日情勢的不同不斷調整製作方向，相當好玩刺激🙂，有機會（可能不會）再來分享。
