下面的流程圖總結了成為 Web GIS 開發人員的整個學習指南。
1. 從 GIS 和 GIS 軟件開始
Web-GIS 可以被視為 GIS 的變體，因此深入了解 GIS 本身的含義是很方便的。強烈建議您了解 GIS 軟件，因為這些軟件有助于使我們的開發工作更輕松、更快，它們還可以充當測試環境。大多數這些軟件的基本概念都是相同的，因此不要回避 GIS 的基礎知識，這一點很重要。它與學習編碼一樣重要，因為這些知識將幫助您做出決策、做正確的事情并遵循最佳實踐。建議：學GIS、玩QGIS一個月左右。
資源：
- QGIS教程 https://www.qgistutorials.com/en/docs/3/building_a_python_plugin.html
- 地理信息系統簡介 https://mgimond.github.io/Spatial/introGIS.html
- 書籍：GIS 基礎知識 https://www.amazon.com/GIS-Fundamentals-Geographic-Information-Systems/dp/1593995520
2.然后選擇HTML和CSS
HTML 是一種用于在 Web 瀏覽器中顯示的文檔的標記語言。HTML 用于創建頁面并使其發揮作用。CSS 是用于創建 HTML 視覺外觀的樣式表語言。HTML 和 CSS 易于理解，易于編輯，所有瀏覽器都支持。您可以使用 HTML 和 CSS 創建頁面（例如登錄/注冊頁面、聯系我們頁面）并在其上構建小型項目（例如 facebook 登錄頁面、youtube 克隆等）。建議： 在一兩周內學習 HTML 和 CSS 的重要概念。資源：以下是一些學習 HTML 和 CSS 的有用資源和項目：
- W3schools HTML （https://www.w3schools.com/html/default.asp）
- W3schools CSS https://www.w3schools.com/html/default.asp
- 創建聯系表格（YouTube 視頻）https://www.youtube.com/watch?v=Db5jCkrVgAw
- 使用 Flexbox 創建導航欄（youtube 視頻）https://www.youtube.com/watch?v=PwWHL3RyQgk
- 制作facebook登錄頁面（youtube教程）https://youtu.be/UqYjdaCfgvE
3.學習JavaScript
JavaScript 有助于向 HTML 和 CSS 頁面添加交互性。它主要用于客戶端目的。如今，人們在服務器端（NodeJs）、游戲開發（EaseJs）和移動應用程序開發（React Native）中使用它。但對于Web-GIS開發者路線圖，您只需要了解它在Web開發上的應用即可。這意味著僅限客戶端和服務器端。JavaScript 幫助我們將邏輯放入頁面的呈現中。單擊按鈕即可顯示或隱藏更多信息、放大或縮小地圖、在頁面上顯示動畫等是 JavaScript 的一些用例。建議： 再學習 2 周或更長時間的 JavaScript 基礎知識。以下是一些學習 JavaScript 的有用資源和項目：
- W3schools JavaScript https://www.w3schools.com/js/default.asp
- 17 個適合初學者的 JavaScript 項目 https://mikkegoes.com/javascript-projects-for-beginners/
- 學習 JavaScript 免費代碼營 https://www.youtube.com/watch?v=PkZNo7MFNFg
4. 了解地圖庫和其他所需的實用程序
Web GIS 門戶中最常見的需求是數據可視化界面。借助地圖庫可以輕松構建數據可視化界面。以下是一些最常用的地圖庫的列表；
- LeafletJs (https://leafletjs.com/)： 它是開源的、輕量級的 javascript 庫
- OpenLayers：(https://openlayers.org/) 它也是一個開源 JavaScript 庫（相關：OpenLayers：地理空間 JavaScript 庫(https://www.gislounge.com/openlayers-geospatial-javascript-library/)）
- Mapbox：(https://www.mapbox.com/) 這是一家美國網站定制在線地圖提供商。它不是完全免費的。
- Google Map API：(https://developers.google.com/maps) 是 google 提供的網絡地圖 API。它也不是完全免費的。
- Turf JS(https://turfjs.org/)：瀏覽器和 Node.js 的高級地理空間分析。
您可以選擇上述庫之一來實現空間數據的可視化。您不需要學習上面列出的所有庫。我們建議您學習leaflet或OpenLayers。除此之外，您還可以學習一些其他實用程序，例如 bootstrap、 jquery。這些實用程序是完全可選的。您也可以在僅閱讀地圖庫后繼續學習。但是，如果您了解這些實用程序，那么將有助于快速輕松地開發界面。建議：再學習 3 周的地圖庫。與其學習所有庫的基礎知識，不如掌握其中一個。如果您還考慮學習其他實用程序，請多花幾天時間來學習。以下是一些可以幫助您提高知識的項目想法
- 構建Web-GIS基本工具（例如獲取坐標、獲取當前位置、全屏視圖、自定義放大/縮小按鈕等）
資源：
- 從基礎到高級的leafletjs（YouTube 播放列表）https://youtube.com/playlist?list=PLyWyQBSWLw1NH1wsA0wkSMTlQ45P0AqCj
- leafletjs教程https://leafletjs.com/examples.html
- openlayers教程 https://openlayers.org/doc/tutorials/
- Qgis2Web教程 https://www.qgistutorials.com/en/docs/web_mapping_with_qgis2web.html
5. 現在是時候開始使用地圖服務器了
對于發布少量的地圖數據集，學習地圖庫就足夠了。但當您擁有來自不同來源的大量數據時，復雜性就會增加。為了解決這樣的問題，我們需要一個網絡地圖服務器。地圖服務器是能夠輕松管理大量地理空間數據集并提供網絡地圖服務（WMS）、網絡要素服務（WFS）、網絡覆蓋服務（WCS）等開放地理空間聯盟（OGC）標準服務的服務器。最常用的地圖服務器之一是 geoserver。geoserver是一個用于共享、處理和編輯地理空間數據的開源服務器。以下是一些最常用的地圖服務器的列表：
- GeoServer(http://geoserver.org/) ：用于共享地理空間數據的開源服務器。
- MapServer(https://mapserver.org/) ：Mapserver是一個開源平臺，用于發布空間數據和向網絡發布交互式地圖應用程序。
- GeoTool(https://geotools.org/) ：開源 java GIS 工具包。
- GeoNetwork(https://geonetwork-opensource.org/) ：用于管理空間參考資源的目錄應用程序。
- GLG 地圖服務器(http://www.genlogic.com/) ：Generic Logic Inc. 是為世界各地的軟件開發商提供實時圖形、數據可視化、HMI Scada 和定制 GIS 解決方案的主要提供商。
- Open Map Tiles(https://openmaptiles.org/) ：一個自行托管開源地圖的平臺。
- Deegree(https://www.deegree.org/) ：用于空間數據基礎設施和地理空間網絡的開源軟件。
在這個階段最好也了解 OGC 標準。(https://www.ogc.org/docs/is)只有了解 OGC 定義的標準后，您才能構建更好的 Web GIS 平臺。建議：您應該花費至少 3 周的時間來學習 Web 地圖服務器。花更多時間了解 OGC 標準及其使用。詳細學習geoserver及其應用。
資源：
- GeoServer 和 Leaflet Web-GIS（Youtube 播放列表）(https://youtube.com/playlist?list=PLyWyQBSWLw1OS7HojnpX6aogfm7LtF39S)
- GeoServer 文檔（推薦）(https://docs.geoserver.org/)
- GeoNetwork文檔(https://geonetwork-opensource.org/docs.html)
- OGC標準(https://www.ogc.org/docs/is)
6.了解數據庫和后端
對于網絡地圖和簡單的應用程序，最多執行第 5 步就可以了。但如果是大型應用程序，您還需要數據庫和后端。一般來說，數據庫用于存儲地理空間數據，后端用于查詢和獲取任何 Web 應用程序中所需的信息。后端可以控制邏輯并將其發送到 Web 應用程序。有許多專門用于后端的編程語言和框架。最流行的語言是 python、php、javascript、java、ruby、rust 等。最流行的框架是 django、laravel、ruby on Rails、flask、expressjs、spring 等。您可以先選擇一種語言，然后再學習框架。假設你想學習django（Python框架），之前你需要花一些時間學習Python。在這個階段，你至少應該了解以下幾點：
- 關于 API（GET、POST、PUT、DELETE）請求
- 至少開發一個創建、讀取、更新、刪除 (CRUD) 項目
- 使用 PostGIS 及其擴展，例如 PG Routing
現在，您可以使用后端連接地圖服務器并創建交互式 Web-GIS 門戶。GeoJSON 序列化器、使用 PostGIS 數據庫的 GeoSpatial 數據可視化門戶等是 Web GIS 上的一些初級后端項目。建議：了解 Django。你應該花至少3周的時間學習數據庫（推薦PostGIS/PostgreSQL組合）、空間SQL和后端技術。
資源：
- Spatial bookmarking note（Youtube 播放列表）(https://youtube.com/playlist?list=PLyWyQBSWLw1OUfqcPzO6AceuGpC5gr-_n)
- Web 制圖和 Web GIS 簡介（Udemy 課程）(https://www.udemy.com/course/introduction-to-web-mapping-and-web-gis-2020-geodjango/?referralCode=72E09BDD6D9C8ECE2169)
- Web 地圖和 Web-GIS 從開發到部署 2021：GeoDjango（Udemy 課程）(https://www.udemy.com/course/web-mapping-and-web-gis-from-dev-to-deploy-2021-geodjango/?referralCode=14893C9BD7E7D959F865)
- 使用 Django 和 GeoDjango 制作基于位置的 Web 應用程序（博客）(https://realpython.com/location-based-app-with-geodjango-tutorial/)
- QGIS 和空間數據庫(https://jeafreezy.hashnode.dev/section-4-qgis-and-the-spatial-databasepostgis-ckoln6gzi0a5r2gs1axaocrm3)
- 偉大的 Quiseng Wu 的深入研究 Spatial SQL 和 PostGIS 的播放列表！(https://www.youtube.com/watch?v=fgS1eVPPBiElist=PLAxJ4-o7ZoPcvp0ETujkLVCmKIGj-YvlG)
- PostGIS官方介紹(https://postgis.net/workshops/postgis-intro/introduction.html)
- Crunchy Data 的互動學習平臺(https://learn.crunchydata.com/training/postgis)
- Geodjango 播放列表(https://www.youtube.com/watch?v=pxX6gI48eh4)
7.學習前端框架（附加）
前端框架有助于確定與 Web 應用程序交互時在屏幕上看到的每個元素的邏輯、結構、設計、行為和動畫。前端框架可以輕松更快地構建網頁。我們可以將其視為附加內容，因為我們無需學習任何前端框架即可構建 Web-GIS 應用程序。javascript 上最流行的前端庫如下，
- React(https://reactjs.org/)：React 以基于組件的結構構建 UI。它由 Facebook 支持和維護。
- Vue(https://vuejs.org/)：Vue 以模型-視圖-視圖模型結構構建 UI。它沒有得到任何大公司的支持，但世界各地的許多開發人員都在維護它。
- Angular(https://angularjs.org/)：Angular 以 MVC 模式構建 UI。它由谷歌支持和維護。
建議：應該花至少兩個月的時間來學習所選的前端框架。
資源：
- 2021 年 10 強 webGIS UI(https://youtu.be/KULAc4P1Sh4)
- reactjs文檔(https://reactjs.org/docs/getting-started.html)
- reactjs課程(https://reactjs.org/community/courses.html)
最后
我們整理的清單并不是全部。我們都知道地理空間行業每天都在不斷發展，有一些我們沒有發現到的新興技術，例如：數字孿生、增強現實 (AR)和虛擬現實 (VR)、時空資產目錄 (STAC)、云優化 Geotiffs (COG)、Google 地球引擎、微軟行星計算機以及更多地球觀測工具和技術。
本文的目的不是讓您對趨勢技術感到不知所措，我們相信您會隨著進步而了解它們。先開始吧！
