一直想写一个耦合多端的 tiny 的 web 应用，这两天刚好周末，有时间干点乱七八糟的，于是简单摸了一下 GeoServer+FastAPI+Leaflet 的技术路径。终于，一个无限接近于 Hello World 版本的交互式web端地图应用被手搓了出来。

项目说明：

内容：完成一个Web端的地图服务小案例。

目标：

• 了解地图服务；
• 了解Web应用的概念、前后端和网页服务；
• 简单学习前后端的技术框架并进行编程实现。

技术路线：GeoServer + FastAPI + Leaflet

代码库：https://github.com/Bill-Cai/web-map-demo

1 背景介绍

随着地理信息技术的快速发展，Web地图服务已经成为各种应用的核心组成部分。Web地图通过将地图数据与Web前端技术结合，向用户展示动态、交互式的地理信息。

本项目将使用GeoServer、FastAPI和Leaflet技术构建一个Web地图服务，提供地理数据的可视化展示。通过这一过程，展示如何搭建一个Web端地图应用，以提供对地图服务和前后端开发的基本认识。

该案例的目标是让用户熟悉Web地图服务的基本工作原理，掌握如何通过GeoServer发布地图服务，通过后端提供空间数据，通过前端地图框架展示数据，并实现简单的交互功能。

2 相关技术

2.1 GeoServer

GeoServer 是一个开源的地图服务器软件，用于发布、共享、编辑和处理地理空间数据。GeoServer支持多种标准数据格式，如Shapefile、PostGIS数据库、GeoTIFF等，并通过标准的Web服务协议（如WMS、WFS、WCS）向客户端提供地图服务。在本案例中，GeoServer将用于发布地图数据并通过Web接口提供给前端进行显示。

2.2 B/S Architecture & Web Application

有关 B/S 架构的定义、概念、优势和应用常见等，可以自行百度，对网页应用和前后端有个基本认识即可。

2.3 FastAPI

FastAPI 是一个用于构建现代Web APIs的高性能框架，基于Python语言构建，能够快速开发高效且易于使用的API。在本案例中，FastAPI将作为后端服务框架，用于提供空间数据查询接口，并将其传递到前端进行展示。

2.4 Leaflet

Leaflet 是一个轻量级、开源的JavaScript库，用于构建交互式地图应用。它支持从多个来源加载地图数据（包括GeoServer、OpenStreetMap、Google Maps等），并能够在地图上进行标记、绘制图形等操作。在本案例中，Leaflet将用于构建前端地图应用，向用户展示GeoServer提供的地图数据和FastAPI提供的后端数据，并提供交互式的地理信息浏览体验。

3 案例实现

本案例：

1. 通过 GeoServer 发布一个 Shapefile 文件为网页地图服务（Web Map Service，WMS）；
2. 通过 Python 的 FastAPI 库进行后端搭建，提供空间数据的查询API；
3. 通过前端三件套（HTML+CSS+JS）和 Leaflet 组件完成前端交互地图网页的制作。

3.1 GeoServer 使用

GeoServer 使用，见：Bill-Cai/web-map-demo: Web Map Demo (GeoServer+FastAPI+Leaflet)

3.2 FastAPI 后端

案例的后端代码，见：web-map-demo/Part2_Backend/backend.py at main · Bill-Cai/web-map-demo

3.3 Leaflet 前端

案例的前端代码，见：web-map-demo/Part3_Frontend at main · Bill-Cai/web-map-demo

直接使用浏览器打开 index.html 即可。当设备本地的 GeoServer 和 FastAPI 后端都正常运行使，打开 index.html 如下：

点击网页中 Control Panal 的按钮，可以 加载 / 移除 相关的图层；点击地图中城市的标记点，可以在 Information Panal 中显示对应的信息：

4 拓展

1. GeoServer 更多的功能，例如自定义样式、瓦片地图发布等。
2. Web 后端开发，可以尝试写数据库的 CURD，参考：Building a CRUD Application with FastAPI and PostgreSQL | by Shubham Adhikari | Medium
3. 优化前端 UI 设计。
4. 添加地图交互功能。