關鍵字: #WebGIS #GIS #QGIS #QGIS2WEB #Plugins
文章目錄
[QGIS教學系列]Qgis2Web套件教學:如何用QGIS製作Web地圖!
如果您想要將您的QGIS地圖製作成網頁地圖,您可以使用「Qgis2Web」套件,它可以將QGIS專案轉換成Leaflet或OpenLayers的web地圖,就可以在瀏覽器中預覽和匯出您的網頁地圖了。您可以調整各種設定,例如地圖大小、圖層順序、彈出視窗、底圖等可以讓您快速地將您的QGIS地圖分享到網路上,無需寫任何程式碼。您可以使用它來製作各種主題和互動的網頁地圖,例如展示您的研究成果、教育用途、旅遊指南等。
在本文中,我將介紹如何利用QGIS搭配「Qgis2Web」套件進行網頁地圖的製作,並實際利用wordpress進行地圖部屬。
[QGIS教學系列Qgis2WebQGIS製作Web地圖]
1. 功能介紹
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-1.png?resize=215%2C190&ssl=1)
![[QGIS教學系列]Qgis2Web套件教學:如何用QGIS製作Web地圖!](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-5.png?resize=900%2C574&ssl=1)
Qgis2web是一個用於將QGIS專案轉換為互動式網頁地圖的插件。它支持兩種主要的網頁地圖框架:Leaflet、OpenLayers以及Mapbox JS。使用Qgis2web,用戶可以在QGIS中設計和符號化地圖,然後將其導出為獨立的HTML文件,或者嵌入到現有的網站中。Qgis2web的優點是它可以保留QGIS中的大部分地圖樣式,並且可以自動生成圖層控制器、彈出窗口和圖例等元素。Qgis2web適合那些想要快速創建和分享網頁地圖的用戶,或者那些不熟悉網頁開發的用戶。
2. 適用情境
自製webgis地圖是一種利用網路技術和地理資訊系統(GIS)來製作和分享地圖的方法,最常見的應用是Google推出的「我的地圖」功能,提供使用者自製簡易的線上地圖。自製webgis地圖有許多適用情境,以下是其中五個例子:
- 環境監測:自製webgis地圖可以用來展示環境品質的數據,例如空氣汙染、水質、噪音等,讓使用者可以即時了解環境狀況和變化。
- 旅遊規劃:自製webgis地圖可以用來規劃旅遊路線和景點,例如標示交通方式、住宿、餐飲、文化、歷史等資訊,讓使用者可以方便地安排旅行計畫。
- 社區參與:自製webgis地圖可以用來增進社區的互動和參與,例如收集和反映社區的意見、需求、問題等,讓使用者可以共同改善社區的品質。
- 教育學習:自製webgis地圖可以用來支援教育學習的活動,例如提供地理、歷史、文化等主題的教材,讓使用者可以透過地圖來增加知識和興趣。
- 災害管理:自製webgis地圖可以用來協助災害的預防和應變,例如顯示災害的發生、影響、預警等資訊,讓使用者可以及時採取適當的措施
這邊推個目前上線運作的WebGIS地圖,有興趣的朋友可以使用看看
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-2.png?resize=900%2C393&ssl=1)
從數據看台灣: https://www.taiwanstat.com/
3. 練習資料介紹
本次練習會採用以下教學內容的成果檔案
[QGIS教學系列]QGIS Model Builder入門教學:打造屬於自己的GIS工作流程
4. Qgis2Web步驟教學
大致上可以分為以下步驟進行網頁地圖的製作
- 安裝QGIS和「Qgis2Web」套件。您可以從官方網站下載並安裝適合您作業系統的QGIS版本。安裝完成後,打開QGIS,然後在選單中選擇「外掛程式」->「管理和安裝外掛程式」,在搜尋欄中輸入「qgis2web」,然後點擊「安裝外掛程式」按鈕。
- 載入並設計您想要製作成網頁地圖的資料圖層。您可以使用QGIS內建的資料來源管理器或瀏覽器面板來載入各種格式的空間資料,例如shapefile、GeoJSON、KML等。您也可以使用QGIS提供的各種工具來編輯、符號化、分類、標註和製作圖例等操作,以便讓您的地圖更具表達力和美觀。
- 運行「Qgis2Web」套件並預覽網頁地圖。在選單中選擇「外掛程式」->「qgis2web」->「Create web map」,或者在工具列中點擊「Qgis2Web」套件的圖示,就會打開「Qgis2Web」的對話框。在這裡,您可以選擇要使用Leaflet還是OpenLayers作為網頁地圖框架,以及調整各種參數,例如地圖大小、底圖、彈出視窗、屬性欄位、比例尺等。您也可以在右側預覽您的網頁地圖的效果。
安裝完成「Qgis2Web」後,我們先載入「台中市事故路段圖」並且將事故總數小於20的進行過濾,增加網頁載入速度,底圖可以利用QuickMapService載入Google衛星圖,這邊再額外加入小台中的行政區圖,接下來打開「Qgis2Web」套件頁面(紅色方框處點擊)。
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-22.png?resize=307%2C413&ssl=1)
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-23.png?resize=307%2C311&ssl=1)
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-18.png?resize=645%2C347&ssl=1)
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-24.png?resize=900%2C485&ssl=1)
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-20.png?resize=900%2C577&ssl=1)
這邊簡單介紹我進行的地圖參數選擇,詳細介紹可以參考影片教學,首先我選擇「Leaflet」作為地圖框架,關於「Leaflet」和「OpenLayers」相關比較可以參考下方資料:
https://www.geoapify.com/leaflet-vs-openlayers
「Layers and Groups」中可以選擇要展示的圖層,藉由點選「Visiable」可以進行開關,接著可以點選下方的「Update Preview」進行地圖預覽。
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-25.png?resize=900%2C552&ssl=1)
地圖設定參數參考:
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-27.png?resize=644%2C855&ssl=1)
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-29.png?resize=637%2C866&ssl=1)
接著我們切換到「Export」頁面-選擇地圖輸出路徑,完成後按下方的「Export」進行輸出
,輸出完成後會有一個專案資料夾,此時可以直接點選「Index.html」查看地圖成果,也可以將專案資料夾利用不同的雲端服務或自行架站進行部屬
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-30.png?resize=900%2C551&ssl=1)
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-31.png?resize=644%2C327&ssl=1)
![](https://i0.wp.com/www.spatialgeolab.com/wp-content/uploads/2023/04/image-32.png?resize=900%2C438&ssl=1)
相關資料
Web Mapping with QGIS2Web — QGIS Tutorials and Tips