製作 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/1182.png

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

../_images/2147.png

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

../_images/385.png

  1. 在 ne_10m_airports 圖層上按右鍵，選擇 開啟屬性表格，

../_images/453.png

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

../_images/550.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/648.png

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

../_images/747.png

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

../_images/846.png

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

../_images/946.png

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

../_images/1053.png

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

../_images/1183.png

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

../_images/1255.png

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

../_images/1353.png

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

../_images/1449.png

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

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/1546.png

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

../_images/1643.png

  1. 現在請再次選擇 網路（Web） ‣ qgis2web ‣ Create web map。

../_images/1739.png

  1. 選擇和之前相同的選項。

../_images/1837.png

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

../_images/1929.png

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

../_images/2024.png

  1. 輸入如下所示的表達式，按下 選取 以選擇所有主要機場。

"type_code" = 3
../_images/2148.png

  1. 在 ne_10m_airports 圖層上按右鍵然後選擇 儲存選取區域為… （或是 存檔為…），

../_images/2225.png

  1. 在 儲存向量圖層為… 視窗中，把輸出檔命名為 major_airports.shp，然後勾選 加入儲存檔案至地圖中`（譯註：如果有 :guilabel:`儲存僅選取的圖徵，也應一併勾選），最後按下 確定。

../_images/2322.png

  1. 當 major_airports 已載入到 QGIS 中後，右鍵點選圖層然後選擇 開啟屬性表格。

../_images/2422.png

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

../_images/2521.png

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

'airport.svg'
../_images/2619.png

  1. 按下 切換編輯模式 以儲存剛才的更動。

../_images/2718.png

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

../_images/2817.png

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

../_images/2916.png

  1. 把圖示複製貼上到地圖的輸出資料夾，並把它重新命名為 airport.svg。

../_images/3015.png

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

../_images/3118.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