製作 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/180.png
  1. 解壓縮剛下載的 ne_10m_airports.zip,然後開啟 QGIS,選擇 圖層 ‣ 加入向量圖層,找到剛解壓縮的 ne_10m_airports.shp 檔案,按下 開啟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

../_images/3110.png

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

comments powered by Disqus

This work is licensed under a Creative Commons Attribution 4.0 International License