使用 QGIS2Web 線上製圖

警告

This tutorial is now obsolete. A new and updated version is available at Web Mapping with QGIS2Web (QGIS3)

如果你想出版你的 GIS 資料並讓其他使用者存取，線上地圖是個非常好的媒介。但是，製作網頁地圖跟在 GIS 環境中製作地圖很不一樣。GIS 使用者通常都不是網頁設計師，所以要把線上地圖做得與 GIS 環境中的地圖一樣好是件挑戰。好消息是，在 QGIS 中有現成的工具可以讓你簡單地把你的資料轉換成線上地圖。在本教學中，你會學到如何運用 QGIS2Web 附加元件以及 OpenLayers 或 Leaflet 函式庫製作線上地圖。

內容說明

製作世界機場的 openlayers 線上地圖。

你還會學到這些

  • 如何使用 QGIS 的編輯器控制來隱藏屬性欄位或設定自訂的格式。

  • 如何使用欄位計算（Field Calculator）來建立虛擬欄位。

  • 建立只在某些縮放尺度之下出現的標籤或圖徵。

取得資料

本教學使用 Natural Earth 提供的 機場 資料集。

下載 機場 shapefile

為了方便起見，你也可以直接用下面的連結下載：

ne_10m_airports.zip

資料來源 [NATURALEARTH]

操作流程

  1. 開啟 QGIS，選擇 圖層 ‣ 加入向量圖層，找到剛下載的 ne_10m_airports.zip 檔案，然後按下 開啟。

../_images/1275.png

  1. 現在我們要做的是在 QGIS 中製作一個外觀跟操作方式都跟網頁地圖相似的地圖，然後 qgis2web 附加元件會複製 QGIS 的設定然後自動產生一個網頁地圖，在過程中我們完全不用了解背後的函式庫如何運作。我們的目標是當使用者點選機場標示的時候，會有個提示視窗出現然後秀出機場的資訊。這些資訊已經在 ne_10m_airports 圖層的屬性表格中了。右鍵點選 ne_10m_airports 圖層然後選擇 屬性。

../_images/2182.png

  1. 切換到 欄位 的分頁，然後就可看到圖層包含有不同屬性的欄位。部分的資訊跟我們想讓線上地圖使用者看到的資訊不相干，所以可以把這些資訊隱藏起來。我們在這邊只需要 type、name、iata_code 和 wikipedia 屬性，其他的都會藏起來。請點選在 scalerank 屬性右側，編輯器控制項 直欄下列的 文字編輯 按鈕。

../_images/3127.png

  1. 在 編輯控制項屬性 視窗中，選擇 隱藏 作為樣式，然後按下 確定。

../_images/478.png

  1. 使用同樣的方法把其他的屬性也設成隱藏。你可能已經發現，還有其他不同種類的樣式我們可以設定讓屬性要怎麼呈現在地圖上。現在點選在 wikipedia 屬性右側，文字編輯 按鈕。

../_images/572.png

  1. 選擇 網頁檢視 作為樣式。這個樣式是指本屬性的值其實是個 URL 網址。

../_images/669.png

  1. 我們也可以使用 別名 欄位來指定屬性而外的稱呼，這樣就不用改動到資料表中的內容了。當你想要使用一個對使用者更友善的屬性稱呼時，這招非常有用。根據你的偏好指定別名後，按下 確定。

../_images/768.png

  1. 回到 QGIS 主視窗，選擇 識別圖徵 工具然後點選地圖上的任意一個點，然後 結果 視窗就會出現，並且秀出剛才排版美化、運用別名後的內容。被隱藏的屬性也不會顯示出來。

../_images/866.png

  1. 雖然這是個很有用的方法，不會仍然有個限制，那就是我們沒辦法改變屬性的顯示順序。解決這個問題的其中一個方法是建立 虛擬欄位。在本例中，如果我們要把 type 屬性的內容移到資訊視窗最下方顯示的話，可以簡單的建立一個虛擬屬性欄位然後把原本的 type 屬性隱藏起來。在操作的過程中，我們還可以使用表達式來把 type 屬性值的呈現方式排版美化。右鍵點選 ne_10m_airports 圖層，選擇 屬性，切換至 欄位 分頁然後點選 欄位計算。

../_images/965.png

  1. 因為每個屬性的名字必須是獨一無二的，這裡我們使用首字母大寫的 Type 做為新屬性的名字。選擇 文字 (字串) 作為欄位類別，寬度設為 25 個字元。type 屬性的值是 small、mid、large 等等的東西，所以我們可以在之後加上 airport 來增加可讀性。在 表示式 格中輸入下列的表示式後，按下 確定。

concat( title("type"), ' Airport')
../_images/1073.png

  1. 現在昇級版的 Type 屬性設定完成，可以把 type 屬性的 文字編輯 改成 隱藏 了。

../_images/11111.png

  1. 來用 識別圖徵 工具看看屬性的輸出格式是不是我們期待的樣子…

../_images/1276.png

  1. 現在讓我們來設定圖層，讓他看起來更美觀且傳達更多資訊。右鍵點選 ne_10m_airports 圖層然後選擇 屬性，切換至 樣式 分頁，然後選擇 類別 的樣式。在 行 的選單中，選擇我們的虛擬欄位 Type，最後按下 分類。

../_images/1370.png

  1. 現在你可以看到不同顏色的圓圈被指定到不同種類的機場。這裡考慮到本教學的目標，我們將只選擇民用機場作為地圖上顯示的點。按住 Ctrl 鑑然後把所有軍用機場的分類選取起來，然後按下 刪除。

../_images/1467.png

  1. 除了指定不同顏色外，也可以指定不同尺寸的標記來幫助使用者識別機場的規模。右鍵點選任一類別然後按下 變更大小。

../_images/1561.png

  1. 把 Large Airport 類別的 大小 設為 3。

../_images/1658.png

  1. 運用相同方法把 把 Mid Airport 類別的 大小 設為 2，Small Airport 類別的 大小 設為 1。

../_images/1755.png

  1. 一個完整的地圖也要包含每個機場的標記。在 屬性 視窗中切換到 標記設計 分頁，然後選擇 Show labels for this layer，接著在 Label with 的下拉選單中選擇 iata_code。在 繪圖 分頁的區塊中，我們要設定的是讓這些標記只有在縮放到較小的尺度時才會顯現。在 標記選項 中勾選 依比例顯示，然後在 最小值 中輸入 1，在 最大值 中輸入 10000000。此設定會讓標記在比例尺設定介在 1:10000000 和 1:1 時顯現。

../_images/1852.png

  1. 因為我們使用圓圈來顯示機場的位置，在做標記時要注意不能讓標記擋到這些圓圈才行。在 標記設計 視窗中切換至 位置 分頁，然後選擇 Cartographic，以及 Distance offset from 選擇 From symbol bounds。完成後按下 確定。

../_images/1943.png

  1. 現在我們已經準備好要轉換的地圖，是時候存檔了。點選 專案 ‣ 儲存，然後輸入 Airports 當作檔名。

../_images/2038.png

  1. 現在匯出網頁地圖的準備已經完成。接下來我們要安裝 qgis2web 附加元件，請前往 附加元件 ‣ 管理與安裝附加元件 進行安裝。(請參考 使用附加元件 進行安裝相關細節操作。) 安裝後，選擇 網路 ‣ qgis2web ‣ Create a web map。

../_images/2183.png

  1. 在 Export to web map 視窗下半段的 Appearance 區塊勾選 Add layers list，然後 Label search 欄位選擇 ne_10m_airports: iata_code。勾選 Show popups on hover 就可以在滑鼠移至點上的時候顯示彈出式視窗。 我們也可以設定底圖，這樣一來使用者就更能了解這些機場的地理背景。選擇 OSM B&W 後就可以使用由 OpenStreetMap 資料提供的黑白色主題地圖。你也可以選擇要使用 OpenLayers 或是 Leaflet 函式庫來製作線上地圖。在本教學中，我們只會用到 OpenLayers 。點選 Update Preview` 就可以預覽輸出後的地圖樣式。在實際輸出之前，我們需要指定輸出資料夾 (要填 Export folder 欄位)。選擇你喜歡的輸出位址後，按下 Export。

../_images/2237.png

  1. 輸出完成後，你電腦的預設瀏覽器會開啟，互動式地圖就會顯現。

../_images/2333.png

  1. 現在你的網頁地圖已經完成出版的準備工作了。

../_images/2432.png

  1. qgis2web 附加元件有很多的限制，例如說他沒辦法把 OpenLayers and Leaflet 函式庫的強大功能發揮得淋漓盡致。但是，這個操作可以當作線上製圖的第一步，以避免花費你寶貴的時間在製作地圖範本上。這些時間可以花在進一步改造線上地圖上，這邊就提供一個例子來說明剛剛製作完成的地圖要怎麼修改來迎合你的需求。接下來，我們要改變使用者開啟線上地圖的時候，初始位置會鎖定在某個機場。在你電腦上，找到你用來儲存線上地圖的資料夾，然後前往裡面的 resources 資料夾，使用文字編輯器開啟 qgis2web.js 檔案。

../_images/2529.png

  1. 找到 map.getView().fit() 函式的位置然後在下方添加如下的程式碼。新程式碼會讓網頁瀏覽器把地圖的中心鎖定在巴黎。完成後存檔。

map.getView().setCenter(ol.proj.fromLonLat([2.35, 48.85]))
../_images/2627.png

  1. 重新載入你的瀏覽器後，地圖就會以巴黎為中心。這只是一個沒什麼大不了的例子，但是你可以看到我們到底可以怎麼利用在 OpenLayers 或 Leaflet 中的函式來修改我們的地圖。

../_images/2726.png

  1. 輸出的地圖會儲存在你電腦中。這時雖然你可以存取，但是卻沒辦法分享給任何人。你或許會想把它放到網路伺服器上以供他人存取，不過上傳的作業可能會依照你選擇的伺服器而不同。有個便宜又簡單的方式，就是把它放到公開的雲端儲存服務，譬如說 Amazon S3 就是一個熱門的例子。只要創造一個帳戶然後依照指示建立一個 Bucket 就可以了。Bucket 創建之後，你就可以上傳所有的網頁地圖資料夾，然後把它設為公開。這裡我創造了一個叫做 qgis-tutorials 的 bucket，而且已經把本章的完成版地圖上傳到一個叫做 qgis2web 的子資料夾了。你可以前往 http://s3.amazonaws.com/qgis-tutorials/qgis2web/index.html 查看。

../_images/2825.png

  1. Google 也有提供相似的服務，稱為 Google Cloud Storage。建立帳號並開啟付款選項後，你就可以建立一個 bucket 然後上傳東西到裡面。我使用了與 Amazon 相似的資料夾結構，並且已經把所有的線上地圖資料上傳到此處，最終的地圖可以在 https://storage.googleapis.com/qgis-tutorials/qgis2web/index.html 查看。

../_images/2922.png

If you want to give feedback or share your experience with this tutorial, please comment below. (requires GitHub account)