如何私人定製一幅可以交互的《權力的遊戲》地圖？

最近權力的遊戲熱播，作為一個美劇迷＋地圖控，搜集了好多相關的地圖。

有HBO出品的

有黑白畫風的

有google風格的

還有劇迷用openlayers開發的 GaoHR | 冰與火之歌電子地圖

那麼，如果你想自己私人定製一套屬於自己的地圖，又不想寫代碼，有辦法么？

當然有～

＊這裡首先要感謝GaoHR前期做的數據處理工作，這裡借用了GaoHR此前處理過的數據，節省了大量的工作量，再次感謝！

在開始之前，我們先科普一個概念，地圖圖層。

我們平時所用到的地圖，是分為很多圖層的。比如我們平時用的高德地圖，上面會有很多酒店，公園，餐廳，道路信息，每一類主題的信息，為方便後續的管理，都單獨列為一個圖層。

大致了解了圖層的概念之後，我們先梳理一下，權力的遊戲里，會有哪些地圖數據類型？

1 行政區劃地圖，區分出海域和陸地，以及各個國家的領域。

2 地形地貌，描繪出主要的森林，山脈，河流等。

3 城市，劇中提到的主要城市，如君臨，臨冬城，蘭尼斯港等。

4 城堡，劇中涉及的大事件要城堡，如恐怖堡，蜂巢城，海疆城等。

5 事件，劇中涉及的大事件，戰爭等。

梳理完畢之後，我們著手準備製圖。

Step1:確定製圖的工具

這裡我們將借用GaoHR前期處理過的數據，數據格式為geojson。如果還需要將數據做進一步的處理，這裡推薦QGIS或ArcGIS。

製圖工具，考慮到地圖是虛擬的，需要使用自己製作行政區劃底圖，並且希望不寫代碼還能夠有一些交互功能，綜合對比類似的工具產品之後，決定使用智圖交互地圖（media.geoq.cn）。

Step2:整理數據

根據前面的圖層梳理，我們將數據整理為三份數據文件。

第一份數據，是行政區劃的面數據，這個數據將作為整個地圖的底圖使用。

第二份數據，是城市，城堡，和一些標誌建築的點數據，將用於位置的標示。

第三份數據，是事件，將用時間軸播放的形式，帶我們探索整個劇情。

Step3:劇情底圖製作

這裡，底圖指的是對整個行政區劃和地形地貌等整體區域情況的描繪。

點擊左下角的底圖，選擇最下層邊界地圖的鉛筆形狀的編輯按鈕，進入邊界地圖界面。

邊界地圖可以選擇已存在的國內各個城市範圍，但這裡，我們希望製作的底圖是虛擬邊界，因此這裡需要點擊【上傳geojson】，選擇我們準備好的邊界的geojson數據。

同時，自己搭配一下背景和填充的顏色和線段顏色，顯示標註的欄位，初步效果如下圖。

點擊保存，關閉邊界地圖，應用到當前地圖上，我們來看一下效果吧。

Step4:製作標誌地物圖層。

底圖有了之後，我們將在底圖上添加一些城市，城堡，標誌建築等。

對於這一類的數據，我們可以用excel表來做整理。表格需要包括標誌地物的名稱，經度，緯度，類型，和一些描述欄位。

數據整理好之後，我們選擇第三個點分類模版，點擊添加數據，添加我們整理好的excel文件。

我們可以在上傳數據頁面進行欄位類型的調整和查看。

數據上傳完畢之後，我們將通過分類欄位，去標示不同類型的標誌地物。比如，城堡我們可以使用城堡的icon去展示，城市可以用一些代表城市的icon。

這裡還可以增加一些互動效果，使用彈出框設置，點擊標誌地物的時候，會彈出一個彈窗，顯示這個地點的一些描述。可以設置顯示彈窗的標題，顯示的欄位，以及彈窗的顏色樣式等。

為了地物方便查看，這裡我們可以設置在地圖上標註地物名稱，只需要在標註下拉框中選擇名稱欄位，並設置標註的背景和填充顏色，利用標註偏移，將標註放置在合適的位置。

地物較多的情況下，標註擠在一起會顯得十分擁擠，因此我們設置一下標註的級別，使其只能在地圖放大之後，才能夠看到標註。

到此位置，標誌地物的圖層大致完成。

Step5:劇中大事件播放

為了增加地圖的趣味性，方便探索整個故事劇情，我們在這裡增加一個劇中大事件播放的圖層。

同樣的，對這一類數據，我們也可以採用excel來進行整理。表格包括時間，事件名稱，經度，緯度，事件的類型，描述等。劇中很多事件的時間不方便整理，這裡我們用數值格式的數字來代替，也就是下表中的編號欄位。

這裡，我們新建一個圖層，點擊分類模版，並上傳這份事件數據。同樣，我們以圖標的形式，展示這些事件。

並以彈出框的方式，增加這幅地圖的交互趣味性。

那麼，最重要的一個問題，如何實現大事件的時間播放功能呢？

還記得之前我們整理數據的時候，增加了一個用編號代替的時間欄位嗎？我們就用這個欄位，來完成時間軸的功能。

在這一個圖層，開啟時間軸設置，並將編號欄位設置為時間欄位，設置合適的播放時間，播放方式，就開啟了大事件播放的功能。

點擊播放，就可以看到整幅地圖，隨著事件的發生，不斷的帶著你去探索。

Step6:發布地圖

所有這些工作完成之後，我們只需要點擊左下角的保存／分享，輸入我們希望發布的地圖名稱，即可完成整個地圖的製作和發布。

發布之後，可以通過地圖鏈接，或用手機掃描二維碼，就可以非常容易的查看所製作的地圖～

全部製作完成，讓我們欣賞一下剛才的勞動成果吧～

https://www.zhihu.com/video/890606020727037952
推薦閱讀：