製作 Leaflet 線上地圖

警告

qgis2leaf 附加元件由於已不在開發階段,目前它的功能已經整合到另一個新的附加元件 qgis2web 中。

參見:doc:web_mapping_with_qgis2web 此教學文件的更新版本。

Leaflet 是個熱門的開源 Javascript 函數庫,用於線上製圖或其他相關聯的應用程式。qgis2leaf 附加元件提供簡單的方法,讓你可以把 QGIS 地圖輸出到基於 Leaflet 建構之下的線上地圖。此附加元件可以讓你快速開始線上製圖,或是由你的靜態 GIS 資料圖層製作互動式地圖。

內容說明

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

你還會學到這些

  • 在欄位計算機(Field Calculator)中使用 CASE 這個 SQL 陳述式,使用不同的條件敘述建立新欄位。

  • 在 QGIS 中尋找和使用自訂的 SVG 圖示

取得資料

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

下載 機場 shapefile

資料來源 [NATURALEARTH]

操作流程

  1. 選擇 附加元件 ‣ 管理與安裝附加元件,然後安裝 qgis2leaf``(譯按:現在已是 ``qgis2web)附加元件。(有關如何安裝 QGIS 的附加元件,請參考 使用附加元件 )

../_images/1201.png
  1. 解壓縮剛下載的 ne_10m_airports.zip,然後開啟 QGIS,選擇 圖層 ‣ 加入向量圖層,找到剛解壓縮的 ne_10m_airports.shp 檔案,按下 開啟

../_images/2162.png
  1. ne_10m_airports 圖層載入後,可使用 識別圖徵 工具點選任一圖徵,查看內含的屬性。我們要製作的地圖會把所有的機場分成 3 種類別,而分類的過程中需要使用到 type 這個屬性。

../_images/3101.png
  1. ne_10m_airports 圖層上按右鍵,選擇 開啟屬性表格

../_images/467.png
  1. 在屬性表格視窗中,按下 切換編輯模式 鈕以進入編輯模式,在此模式中,按下 開啟欄位計算 鈕。

../_images/560.png
  1. 接下來要做的是建立一個稱為 type_code 的新屬性,所有主要機場的屬性值是 3,中型機場的屬性值是 2,其餘的機場是 1。我們可使用 CASE 流程控制語法,然後撰寫表達式,藉由判斷 type 屬性的值來給定 type_code 的值。勾選 建立新欄位 方框然後在 輸出欄位名稱 填入 type_code,然後在 輸出欄位類別 選擇 數字 (整數)。接著在 表示式 視窗中,輸入以下數行。

CASE  WHEN "type" LIKE '%major%'  THEN 3
 WHEN "type" LIKE '%mid%' THEN 2
 ELSE 1
END
../_images/658.png
  1. 回到 屬性表格,新的欄位就會出現在表格最末端。檢查表達式有正確運作後,再次按下 切換編輯模式 以儲存剛才所做的修改。

../_images/757.png
  1. 讓我們來使用新建立的 type_code 屬性調整一下機場圖層的樣式。在 ne_10m_airports 圖層上按右鍵選擇 屬性

../_images/856.png
  1. 圖層屬性 視窗中切換至 樣式 分頁,在下拉選單中選擇 類別 樣式然後在 中選擇 type_code。選擇一個你喜歡的色彩映射表然後按下 分類,最後按下 :guilabel:`確定 回到 QGIS 主視窗。

../_images/956.png
  1. 現在機場地圖已經設定好不錯的樣式了,讓我們開始製作互動性網頁地圖吧。選擇 網路(Web) ‣ qgis2leaf ‣ Exports a QGIS Project to a working leaflet webmap。(譯按:現在路徑已更改為 網路(Web) ‣ qgis2web ‣ Create web map。以下操作的文字說明將以新版的 qgis2web 為主,因此可能會與舊版的 qgis2leaf 截圖不符。)

../_images/1063.png
  1. Export to web map 視窗中,點選下方左側的 Leaflet 以切換到 Leaflet 的製圖模式,Data export 中的 Export folder 選擇輸出檔存放的路徑,Scale/Zoom 中的 Extent 選擇 Fit to layers extentAppearance 中的 Template 選擇 full-screen,右下角的欄位選擇 OSM 作為底圖,最後按下 Export

../_images/11101.png
  1. 輸出完成後,打開瀏覽器,開啟在你剛剛選擇的輸出資料夾中的 Index.html 檔案,就可以看到你剛剛在 QGIS 中看到的地圖複製品。你可以縮放、移至地圖上的任意區域,而且只要點選任一圖徵,就會看到圖徵的屬性資訊顯示在跳出來的訊息框中。只要把資料夾內的所有內容複製起來,就能夠把此地圖移到網頁伺服器,當作線上展示的互動地圖。

../_images/1265.png
  1. 現在我們要來看看如何進一步使用此附加元件來調整、自訂我們的地圖。你可能已注意到,在網頁地圖跳出的視窗中,記載著圖徵所有屬性的資料,但其中某些屬性並沒有那麼重要,而且預設的跳出式視窗文字格式也實在不怎麼好看。因此我們接著要來換掉預設的格式,使用我們自己的 HTML 語法,讓它能夠漂亮地呈現資訊。具體來說,我們現在要把自訂的 HTML 加到一個新增的 html_exp 欄位內。在 ne_10m_airports 圖層上按右鍵,選擇 開啟屬性表格

../_images/1363.png
  1. 在屬性表格視窗中,按下 切換編輯模式 鈕以進入編輯模式,在此模式中,按下 開啟欄位計算 鈕。

../_images/1458.png
  1. 勾選 建立新欄位 方框,在 輸出欄位名稱 內輸入 html_exp,然後在 輸出欄位類別 內選擇 文字 (字串)。因為我們要建立的是很長的 HTML 字串,所以 輸出欄位寬度 要調成很大,例如 200。在 表示式 區塊中輸入如下的表達式,雖然表達式看起來很複雜,不過其實內容是在定義 HTML 的 table 元件,然後把 lata_codenametype 欄位的屬性值放到元件內。檢查一下 輸出預覽 以確認表達式是否正確。

concat('<h3>', "iata_code", '</h3><table>', '<tr><td>Airport Name: <b> ',
"name", '</b></td></tr><tr><td>Category: <b> ', "type",
'</b></td></tr></table>')

備註

shapefile 格式可在一個欄位內放上至多 254 個字元。如果你要在欄位中放入更長的字串,請使用其他格式儲存。

../_images/1552.png
  1. 回到 屬性表格,新的欄位就會出現在表格最末端。檢查表達式有正確運作後,再次按下 切換編輯模式 以儲存剛才所做的修改。

../_images/1649.png
  1. 現在請再次選擇 網路(Web) ‣ qgis2web ‣ Create web map

../_images/1746.png
  1. 選擇和之前相同的選項。

../_images/1842.png
  1. 當輸出完成後,前往輸出檔案的資料夾,其中會有一個子資料夾,名字包含了現在的時間戳記。使用瀏覽器打開此資料中的 Index.html,然後再點選任一圖徵查看跳出視窗。現在它提供的資訊看起來清楚多了。

../_images/1933.png
  1. qgis2leaf 附加元件的另一個好用功能是在線上地圖中使用自訂的圖示,做法是在新欄位 icon_exp 中指定自訂的圖示路徑。我們接著要建立只包含主要機場的新圖層,然後使用自訂的圖示來設定樣式。點選工具列上的 使用表示式選取圖徵 鈕。

../_images/2028.png
  1. 輸入如下所示的表達式,按下 選取 以選擇所有主要機場。

"type_code" = 3
../_images/2163.png
  1. ne_10m_airports 圖層上按右鍵然後選擇 儲存選取區域為… (或是 存檔為…),

../_images/2228.png
  1. 儲存向量圖層為… 視窗中,把輸出檔命名為 major_airports.shp,然後勾選 加入儲存檔案至地圖中`(譯註:如果有 :guilabel:`儲存僅選取的圖徵,也應一併勾選),最後按下 確定

../_images/2325.png
  1. major_airports 已載入到 QGIS 中後,右鍵點選圖層然後選擇 開啟屬性表格

../_images/2425.png
  1. 在屬性表格視窗中,按下 切換編輯模式 鈕以進入編輯模式,在此模式中,按下 開啟欄位計算 鈕。

../_images/2523.png
  1. 欄位計算器 視窗中,輸出欄位名稱 輸入 icon_exp,並選擇 文字 (字串) 的欄位類別。在 表示式 區塊中,輸入以下的表達式。

'airport.svg'
../_images/2620.png
  1. 按下 切換編輯模式 以儲存剛才的更動。

../_images/2720.png
  1. 再次選擇 網路(Web) ‣ qgis2web ‣ Create web map,在右下角你還會發現除了 OSM 以外,還有很多不同的底圖可供選擇。這次我們可以選選看不同的,例如 Stamen Watercolor。按下 Export

../_images/2819.png
  1. 接下來我們要找尋我們之前指定的 airport.svg 檔案作為機場的圖示,並手動把它添加到輸出資料夾中。QGIS 本身即帶有許多圖示,在 Windows 系統中,圖示的路徑在 (QGIS 安裝路徑)‣ apps ‣ qgis ‣ svg,不過會隨著安裝方式和作業系統版本而有些微的更改。你可以選擇資料夾中的任何圖示,不過在此教學中,我們可以試試看在 transport 分類中的 amenity=airport.svg

../_images/2918.png
  1. 把圖示複製貼上到地圖的輸出資料夾,並把它重新命名為 airport.svg

../_images/3016.png
  1. 現在打開資料夾中的 index.html ,這次我們就有了一張漂亮的地圖,使用自訂的圖示表達主要機場的位置。此外,注意右上角的面板,可以讓你控制兩個圖層的顯示設定。

../_images/3119.png

Hope this tutorial gives you a head start in creating web maps. Below is the live interactive map created for this tutorial.


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