QGIS_GIS2Web

[QGIS教學系列]Qgis2Web套件教學:如何用QGIS製作Web地圖!

關鍵字: #WebGIS #GIS #QGIS #QGIS2WEB #Plugins

[QGIS教學系列]Qgis2Web套件教學:如何用QGIS製作Web地圖!

如果您想要將您的QGIS地圖製作成網頁地圖,您可以使用「Qgis2Web」套件,它可以將QGIS專案轉換成Leaflet或OpenLayers的web地圖,就可以在瀏覽器中預覽和匯出您的網頁地圖了。您可以調整各種設定,例如地圖大小、圖層順序、彈出視窗、底圖等可以讓您快速地將您的QGIS地圖分享到網路上,無需寫任何程式碼。您可以使用它來製作各種主題和互動的網頁地圖,例如展示您的研究成果、教育用途、旅遊指南等。

在本文中,我將介紹如何利用QGIS搭配Qgis2Web套件進行網頁地圖的製作,並實際利用wordpress進行地圖部屬。

[QGIS教學系列Qgis2WebQGIS製作Web地圖]

1. 功能介紹

[QGIS教學系列]Qgis2Web套件教學:如何用QGIS製作Web地圖!

Qgis2web是一個用於將QGIS專案轉換為互動式網頁地圖的插件。它支持兩種主要的網頁地圖框架:Leaflet、OpenLayers以及Mapbox JS。使用Qgis2web,用戶可以在QGIS中設計和符號化地圖,然後將其導出為獨立的HTML文件,或者嵌入到現有的網站中。Qgis2web的優點是它可以保留QGIS中的大部分地圖樣式,並且可以自動生成圖層控制器、彈出窗口和圖例等元素。Qgis2web適合那些想要快速創建和分享網頁地圖的用戶,或者那些不熟悉網頁開發的用戶。


2. 適用情境

自製webgis地圖是一種利用網路技術和地理資訊系統(GIS)來製作和分享地圖的方法,最常見的應用是Google推出的「我的地圖」功能,提供使用者自製簡易的線上地圖。自製webgis地圖有許多適用情境,以下是其中五個例子:

  • 環境監測:自製webgis地圖可以用來展示環境品質的數據,例如空氣汙染、水質、噪音等,讓使用者可以即時了解環境狀況和變化。
  • 旅遊規劃:自製webgis地圖可以用來規劃旅遊路線和景點,例如標示交通方式、住宿、餐飲、文化、歷史等資訊,讓使用者可以方便地安排旅行計畫。
  • 社區參與:自製webgis地圖可以用來增進社區的互動和參與,例如收集和反映社區的意見、需求、問題等,讓使用者可以共同改善社區的品質。
  • 教育學習:自製webgis地圖可以用來支援教育學習的活動,例如提供地理、歷史、文化等主題的教材,讓使用者可以透過地圖來增加知識和興趣。
  • 災害管理:自製webgis地圖可以用來協助災害的預防和應變,例如顯示災害的發生、影響、預警等資訊,讓使用者可以及時採取適當的措施

這邊推個目前上線運作的WebGIS地圖,有興趣的朋友可以使用看看


從數據看台灣: https://www.taiwanstat.com/
168交通事故地圖
利用Google我的地圖服務進行測速照相地圖的建立

3. 練習資料介紹

本次練習會採用以下教學內容的成果檔案
[QGIS教學系列]QGIS Model Builder入門教學:打造屬於自己的GIS工作流程

點擊下載練習檔

4. Qgis2Web步驟教學

大致上可以分為以下步驟進行網頁地圖的製作

  1. 安裝QGIS和Qgis2Web套件。您可以從官方網站下載並安裝適合您作業系統的QGIS版本。安裝完成後,打開QGIS,然後在選單中選擇「外掛程式」->「管理和安裝外掛程式」,在搜尋欄中輸入「qgis2web」,然後點擊「安裝外掛程式」按鈕。
  2. 載入並設計您想要製作成網頁地圖的資料圖層。您可以使用QGIS內建的資料來源管理器或瀏覽器面板來載入各種格式的空間資料,例如shapefile、GeoJSON、KML等。您也可以使用QGIS提供的各種工具來編輯、符號化、分類、標註和製作圖例等操作,以便讓您的地圖更具表達力和美觀。
  3. 運行Qgis2Web套件並預覽網頁地圖。在選單中選擇「外掛程式」->「qgis2web」->「Create web map」,或者在工具列中點擊Qgis2Web套件的圖示,就會打開Qgis2Web的對話框。在這裡,您可以選擇要使用Leaflet還是OpenLayers作為網頁地圖框架,以及調整各種參數,例如地圖大小、底圖、彈出視窗、屬性欄位、比例尺等。您也可以在右側預覽您的網頁地圖的效果。

安裝完成Qgis2Web後,我們先載入「台中市事故路段圖」並且將事故總數小於20的進行過濾,增加網頁載入速度,底圖可以利用QuickMapService載入Google衛星圖,這邊再額外加入小台中的行政區圖,接下來打開Qgis2Web套件頁面(紅色方框處點擊)。

右鍵點選filter
只保留事故數大於20的路段
載入成果圖層(過濾前)
載入成果圖層(過濾後)

這邊簡單介紹我進行的地圖參數選擇,詳細介紹可以參考影片教學,首先我選擇「Leaflet」作為地圖框架,關於「Leaflet」和「OpenLayers」相關比較可以參考下方資料:

https://www.geoapify.com/leaflet-vs-openlayers

「Layers and Groups」中可以選擇要展示的圖層,藉由點選「Visiable」可以進行開關,接著可以點選下方的「Update Preview」進行地圖預覽。

地圖樣式預覽

地圖設定參數參考:

接著我們切換到「Export」頁面-選擇地圖輸出路徑,完成後按下方的「Export」進行輸出

,輸出完成後會有一個專案資料夾,此時可以直接點選「Index.html」查看地圖成果,也可以將專案資料夾利用不同的雲端服務或自行架站進行部屬

輸出地圖
專案資料夾
Web地圖成果

相關資料

Web Mapping with QGIS2Web — QGIS Tutorials and Tips


相關資料

分享

發表迴響