設計 3D Map Tour 導覽遊地圖

大家好！我是智多紛，紛仔！今天我會教大家如何設計一個以網絡地圖爲主軸的3D互動導覽遊地圖。我會帶大家遊走香港地質公園，透過地質旅程體驗及探索香港鮮爲人知的一面。製作這個網絡地圖是不需要任何程式編寫的知識，我們只需要用 ArcGIS 的 Story Map 應用程式便可以了！在製作地圖之前，我們首先要準備三件事：第一是 ArcGIS的賬號，第二是附有座標的空間數據，最後當然是製作 Story Map 的素材，例如圖片、影片等等的多媒體內容！如果你們還未有 ArcGIS 賬號的話，歡迎大家於GeoLab的網頁上登記做會員，我們便會安排一個 ArcGIS賬號給你們試用！

 

事不宜遲，一開始我們首先要登入 ArcGIS Online，在網址欄輸入網址 www.arcgis.com，瀏覽器便會自動載入畫面，按下 「Sign in」 輸入你的用戶名稱及密碼。而今次教學需要使用的素材我們已經提前爲你們準備好，一些關於香港地質公園的多媒體資料及數據的 ZIP 檔，也可以於 ArcGIS Online 這個雲端平台下載。我們只需要於網頁上方按「Groups」，ArcGIS 便會顯示你目前的賬號已加入那些 Group，你會發現有一個名為 「3D Map Tour Tutorial」的文件夾，再按下去你便會看到我們要下載的 zip 檔。下載完及解壓後，可暫時放於一邊，可在製作Map Tour 時再使用。

 

現在先讓我介紹什麼是Story Map，Story Map 的中文是故事地圖，是由美國環境系統研究所公司 ESRI開發的雲端製圖地理資訊系統 ArcGIS Online中的一個應用程式，其簡單的操作可以幫助用戶迅速地建立互動式的網絡地圖。Story Map 的最大特點是可以結合 Web Map網絡地圖、文字、圖片、影片及音訊，透過各種的content block內容構件，幫助你輕鬆整合並呈現精彩的故事！頭先亦有提及過， Story Map 是透過各式各樣的內容構件組成，而我們這次製作導覽遊地圖的主角就是一個叫 Map Tour 的內容構件。

 

先按右上角的鐘型圖標旁的應用程式目錄，你會發現除了 Story Map外，ArcGIS 還提供了很多不同款式的應用程式，每一款的 app 都有不同目的。而我們使用 Story Map 的目的是為了展示地圖上的旅遊景點及關於景點的有趣資訊，所以 Story Map 其實就像我們經常也使用到的 Power Point 或Google Slide，可以協助我們以最簡單、直接，但同時很奪目的地圖展示方式將資訊傳遞給讀者們。回到 ArcGIS Online 網頁版面，於應用程式目錄中選擇Story Map進入Story Map 的主頁，在版面右上角按下綠色 「New Story」，再選擇「Start from scratch」，打開一個新的 Story Map。

 

打開Story Map後，我們首先要設計一個可以吸引讀者的封面頁，封面頁共有三個部份，分別是標題、簡介及封面圖片或影片。我們先準備一個獨特的標題及故事簡介，標題、簡介及內容的文字可以於剛才解壓的 「3D Map Tour」資料夾中找到，你可以打開資料夾「1_create-cover-page」中名為「cover-page-text」的Excel表。用滑鼠標示出 欄C的文字，按鍵盤的 Ctrl+C 複製封面的標題，再回到Story Map 打標題的位置， 按鍵盤的 Ctrl+V 貼上。製作簡介也是同一做法，在同一個Excel表中複製文字再貼上Story Map 中。

 

完成文字的部份後，我們按一下右上角 「Add cover image or video」加入封面頁的背景影片，再按 「browse」上載文件夾中名為「video」的 MP4 影片。 Story Map 的主題多樣化及靈活，由背景、字體的大細及樣式、到故事章節的佈局，也可以自由選擇自己喜歡的款式。ArcGIS Story Map 亦提供不少預設的一鍵式主題，按自己喜好選擇合適的主題佈局，而我們這次就用這個黑色「Obsidian」的做導覽遊的主題。

 

下一步要做的就是加入網頁的內容文字，文字是組成 Story Map 的其中一大重點。回到 3D 的文件夾，我們可以打開「2_add-content」的文件夾，當中有一個「body-text」的Excel表。跟剛才製作封面一樣，複製欄C的文字，然後在 Story Map 中按加號，選擇 「Text」，再將我們複製好的文字貼上。但這次需要留意的是，複製好的文字是需要選擇Excel表中欄A 相應的文字類型，例如第一組是一個大段落類型的文字，我們便用滑鼠標示出整段文字，設置文字的選項便會出現。在這個小小的選項欄中，我們可以設置文字的類型、字體、連結及顏色等等。按下最左手邊的類型選項，選擇大段落，完成第一組的文字後，按鍵盤的 Enter 換行至新的 Text 構件，如此類推，用一樣的做法複製餘下的文字。

 

複製好這兩個 bulleted points 的句子後，我們可以為兩個園區名加上兩種不同的顏色 ，強調一個公園，兩個園區的概念。暫時整個 Story Map頁面都只有文字，略為有點單調，我們可以在段落之間加手插圖片增加趣味性及吸引讀者的眼球。在大段落下面按加號，選擇 「Image Gallery」，再按 「Browse」上載文件夾中所有的圖片。加好圖片後，移動滑鼠到圖片的位置，設置「gallery」的選項就會出現，按一按齒輪，在這個選擇的視窗我們會選「Jigsaw」方式去鋪排這四張圖片，之後按「Save」。

 

帶讀者進入 Map Tour 前，可以用一幅簡單的2D互動小地圖介紹我們今次旅程的路線，讓讀者有一個初步的概念，究竟地質公園在哪呢？導覽遊的每個景點又在公園中的哪個位置呢？我們先按加號，選擇 「Map」，在彈出的視窗按右上角 的「Express Map」，然後可以關掉開始的提示。首先在世界地圖中尋找香港的位置，我們可以在地圖用滑鼠拉移及放大，或直接在右上角的尋找工具輸入「Hong Kong」。找到位置後，我們可以調整地圖的設定，在頁面的左手面按下齒輪，再按最下面「Select Basemap」的部份，在這個時候可以見到 ArcGIS Online 所有預設的底圖，現在可以隨便選擇一個地形圖作為底圖。

 

轉好底圖後，我們便可以在小地圖中加插一塊地質公園邊界的多邊形、八個景點的位置、方向箭嘴及少量文字。打開「3_create-express-map」的文件夾，當中有一幅名為「geopark-boundary」的圖，我們可以參考圖中地質公園的邊界，再在自己地圖上繪製出來。地圖繪製的工具我們可以在頁面的頂部，按下製作多邊形的工具，然後將滑鼠移到地圖位置，你會發現滑鼠的遊標變成一個十字，代表繪製模式已經啟動。然後我們可以開始用多邊形包圍地質公園的範圍繪畫，如果一不小心點錯位置，我們可以按「Undo」還原上一步的動作。最後快按兩次滑鼠左鍵完成多邊形的繪製，再為它加上一個圖層名稱，而名稱亦可以在文件夾中「express-map-label」的文字檔中複製再貼上。

 

按左上角的圖層選項，再貼上剛才複製好的文字。我們亦可以調較多邊形的顏色。之後我們可以加插兩個園區名的標籤在多邊形範圍中，按下「T」字制，「新界東北沉積岩園區」的標籤放在北面，再在右上角位置設定文字的底色為透明。而「西貢火山岩園區」就在大約中間的位置，如果不太肯定自己做得正確與否，我們可以參考 geopark 的圖再確認。接著我們可以打開一個名為「poi-address」的表，我們需要複製欄 D 這一欄的地址，再貼在 Express Map 頁面右上角的尋找位置工具上，然後順序為每個景點加上數字符號，加完每一個景點都需要填回名稱一欄。至於名稱的文字都可以在同一份表的欄B複製，亦可調較符號的顏色。如此類推，每個景點都用相同做法，首先透過Search的功能找出景點的座標，然後用數字符號在地圖上紀錄位置，最後填回上景點名稱，是不是很簡單呢？

 

這個時候我已經標好八個景點的位置，之後我們亦可以加箭嘴符號標明路線圖的方向及景點的次序。在繪圖欄按箭嘴，畫一條由景點一到景點二的路線，箭嘴線中間有一點，我們可按實並輕輕拉動改變線的弧度，之後亦可以在地圖左上角位置設定箭嘴的顏色及線條的款式。我們將它設定成一條黑色虛線的箭嘴，接著便可如此類推完成餘下的路線。最後加回一個起點及終點的黑底白字標籤在景點一的旁邊及景點八的旁邊便大功告成了！

離開這個頁面前，我們要將圖例的窗格一直維持在打開的狀態，所以記得要啟動這兩個圖例的選項，最後就可以按右下角的「Done」離開。在 Story Map 的頁面也要確保 Express Map 視窗可以顯示所有圖層及地質公園的範圍，我會建議將地質公園的多邊形盡量移放在視窗的中心點。所以有需要的都可以按畫面上方的筆型工具，回到Express map 的介面調整地圖的縮放級別及位置。在 「caption」 的部份加上關於小地圖的說明。文字可以在 「caption」 的文字檔複製。

 

終於到了製作Map Tour 的部份。我們只需要按一下加號，頁面拉動至最下方選擇 Map Tour。在這個頁面選擇中間的選項，我們會同時上載所有景點的相片來製作今次的 Map Tour。然後不需要人手每張加上。這個方法可以節省很多時間。在素材文件夾裡面展開一個名為「4_build-map-tour」的文件夾，按進「photos」裡面，你會看到每張相片都有一個號碼標籤。這個是預先排列的導覽先後次序。由一號開始，直至八號景點來完成這次的導覽遊。使用滑鼠標示出全部8張相片，然後拉至上載空格。最後需要確保相片的先後次序是正確，可以按右下角的「Create Tour」完成構件的設置。

 

下一個步驟，是選擇Map Tour的佈局。預設顯示的佈局是用「Explorer」的形式呈現導覽遊，因爲我們景點不多，所以選擇「Guided」也可以，之後按 「Next」。這次會用3D地圖爲主軸，所以我們選擇「Map focused」比較合適。你們可以因自己的喜好嘗試不同的佈局。完成佈局後，我們要把Map Tour預設的底圖改為一個3D的衞星地圖。在右上角的「Map Options」，地圖類型選擇「3D」，然後 Base map 底圖我們今次選擇「Imagery」，亦即是衞星圖。景點符號方面可以選擇一個比較鮮艷及突出的顏色，這樣放在衞星圖上都有一個比較强烈的對比。最後這個設定都非常重要，這個部份是控制預設的地圖縮放級別。因爲是3D地圖的關係，我們要用近景來捕捉每個景點的模型，所以選擇「Custom」，再選擇「Streets」。完成所有設定便可以按右下角的「Done」。

 

最後一個步驟是我們要在Map Tour的每個景點裡面，加上相應的景點名稱、簡介，和最重要的是座標位置。首先，展開素材包的文件夾，在「photos」返回上一頁。展開一個名為「map-tou-poi」的Excel表格。在左邊綠色的欄位是景點名稱，我們須複製再貼在「Title」的位置。藍色的欄位就是描述景點簡介的文字，同樣地都是直接複製再貼上。然後，我們可以把頁面向下拉動，會看到一個「Add Location」的按鈕。顧名思義，我們可以透過這個功能找出景點的位置。其實這個步驟正正跟我們剛才做的2D小地圖當中「Add Location」 的步驟一模一樣，我們只需要把黃色欄C這一欄的地址，貼在地圖的搜尋器便可以。找到正確的位置後便可以按「Add to Map」，然後再按右下角的「Add Location」。這樣就完成一個景點了！如果需要控制3D場景的鏡頭，我們可以長按左鍵，再上下左右移動滑鼠，這就可以輕鬆地調整鏡頭的角度。

 

今次的教學先在止作結，大家都應該非常熟悉製作Map Tour的程序。各位同學可以嘗試自己完成其餘七個景點。讓我智多紛都能發揮自己的小宇宙！終於完成啦！我，智多紛完成了所有景點，不知道聰明的你們完成了嗎？我們的香港地質公園3D導覽遊就大功告成啦！在發布這個美麗的網頁前，可以先預覽作品，檢查網頁在不同的裝置上，地圖、圖片及文字會不會出現移位的情況。在上方位置按預覽的按鈕。除了可以在電腦裝置預覽外，我們還可以在平板及電話裝置進行預覽。在預覽完成後，感覺沒有問題的話，便可以分享你的作品給其他人欣賞。在預覽旁邊有一個「Publish」的按鈕，按下去便會看到發布的數個選項。我們在右方的 「Share」 部份選擇 「Everyone public」。這麼你的作品便可以分享給沒有 ArcGIS 賬號的人。這次紛仔的網頁地圖教學完結了，如果希望觀看更多的教學影片及追蹤 GeoLab最新的資訊，請記得訂閱我們的 Youtube 頻道，追蹤我們的IG及 Facebook！我們下次再見！