第24章-WebGIS发布与在线分析

在把分析成果交付给业务方或公众时，你可能会问：怎样把地图做成可以点击、可以筛选、可以讲清楚的在线页面？如何让数据切片、图层组织与基本分析在浏览器里轻量运行，同时保持清晰的结构与可复现？本章从最小可运行示例出发，聚焦 WebGIS 的发布与交互表达：用脚本生成 HTML 地图、合理组织点/线/聚类图层、并在前端实现轻量的统计与筛选。读完后，你能把"数据→图层→交互→输出"串成一条稳定管线，既能快速预览，也能支撑后续扩展到服务端。

24.1 学习目标

• 理解WebGIS发布的基本构成（底图、数据图层、交互控件、样式）。
• 能以最小脚本生成可交互HTML地图并组织图层（点、线、聚类）。
• 了解在线分析的轻量实现方式（前端聚类、弹窗信息）。

24.2 先修要求

• 了解基础Web地图概念与坐标系统；具备Python与Folium的使用基础。

24.3 核心概念与原理

• 底图与坐标：Web常用EPSG:3857显示投影，Folium使用Leaflet生态。
• 图层组织：点标注、折线（轨迹）、聚类（MarkerCluster）、热力（可扩展）。
• 在线分析：前端聚类/筛选与弹窗属性展示；后端服务可进一步扩展为瓦片/矢量服务。

24.4 场景提纲（示例数据）

• 读取 gis_examples/datasets/ch10_bike_sample.csv 的轨迹点。
• 生成交互式地图：
  • 点聚类展示（MarkerCluster）
  • 按 object_id 生成简单折线（同一用户的时序段）
  • 弹窗展示时间戳与速度（基于最小计算）

24.5 代码示例（可运行）

# scripts/ch24/webgis_min.py
import argparse, os
import pandas as pd
import folium
from folium.plugins import MarkerCluster


def compute_speed_rows(df):
    df = df.sort_values(['object_id','timestamp']).copy()
    df['timestamp'] = pd.to_datetime(df['timestamp'])
    df['speed_kmh'] = 0.0
    for oid, sub in df.groupby('object_id'):
        idx = sub.index
        lats = list(sub['lat'])
        lons = list(sub['lon'])
        times = list(sub['timestamp'])
        sp = [0.0]
        for i in range(1, len(lats)):
            # 粗略Haversine（公里）
            import math
            R = 6371.0
            lat1, lon1 = math.radians(lats[i-1]), math.radians(lons[i-1])
            lat2, lon2 = math.radians(lats[i]), math.radians(lons[i])
            dlat = lat2 - lat1
            dlon = lon2 - lon1
            a = math.sin(dlat/2)**2 + math.cos(lat1)*math.cos(lat2)*math.sin(dlon/2)**2
            c = 2 * math.atan2(math.sqrt(a), math.sqrt(1-a))
            dist_km = R * c
            dt_s = (times[i] - times[i-1]).total_seconds()
            v_kmh = dist_km / dt_s * 3600 if dt_s > 0 else 0.0
            sp.append(v_kmh)
        df.loc[idx, 'speed_kmh'] = sp
    return df


def main():
    ap = argparse.ArgumentParser()
    ap.add_argument('--input', default='gis_examples/datasets/ch10_bike_sample.csv')
    ap.add_argument('--outputs_dir', default='outputs')
    ap.add_argument('--center_lat', type=float, default=39.90)  # 示例北京附近
    ap.add_argument('--center_lon', type=float, default=116.40)
    args = ap.parse_args()

    os.makedirs(args.outputs_dir, exist_ok=True)
    df = pd.read_csv(args.input)
    if 'timestamp' not in df.columns:
        raise ValueError('input must contain timestamp, lat, lon, object_id')

    # 地图中心（用均值更贴实际）
    center_lat = df['lat'].mean() if pd.notnull(df['lat']).all() else args.center_lat
    center_lon = df['lon'].mean() if pd.notnull(df['lon']).all() else args.center_lon

    m = folium.Map(location=[center_lat, center_lon], zoom_start=12, tiles='OpenStreetMap')

    # 点聚类
    mc = MarkerCluster()
    m.add_child(mc)

    df = compute_speed_rows(df)
    for _, row in df.iterrows():
        popup = folium.Popup(f"ID: {row['object_id']}<br>time: {row['timestamp']}<br>speed_kmh: {row['speed_kmh']:.1f}", max_width=250)
        mc.add_child(folium.Marker(location=[row['lat'], row['lon']], popup=popup))

    # 简单按 object_id 画折线（按顺序连接）
    for oid, sub in df.groupby('object_id'):
        sub = sub.sort_values('timestamp')
        coords = list(zip(sub['lat'], sub['lon']))
        folium.PolyLine(coords, color='blue', weight=3, opacity=0.6, tooltip=f'object {oid}').add_to(m)

    out_html = os.path.join(args.outputs_dir, 'ch24_webmap.html')
    m.save(out_html)
    print('Saved', out_html)

if __name__ == '__main__':
    main()

运行：

• python scripts/ch24/webgis_min.py --input gis_examples/datasets/ch10_bike_sample.csv
• 输出：outputs/ch24_webmap.html（用浏览器直接打开即可交互查看）

24.6 流程图（Mermaid）

flowchart TD
  A[轨迹点CSV] --> B[排序与速度计算]
  B --> C[点聚类图层]
  B --> D[按用户折线图层]
  C --> E[弹窗信息与交互]
  D --> E
  E --> F[HTML导出与发布]

24.7 知识点与学习目标（回顾）

• WebGIS的基本构成与Folium/Leaflet生态。
• 点聚类与折线图层的组织与交互弹窗。
• 轻量在线分析（浏览器侧）与进一步服务化思路（后端瓦片/矢量服务）。

24.8 总结

WebGIS发布强调"可读""可用""可交互"。最小方案能快速交付预览与内部评审；后续可对接成熟服务进行扩展与优化。

---

24.9 发布架构与方案选型

• 单页静态预览：Folium/Leaflet 直接输出 HTML，适合内部评审与原型演示。
• 服务化发布：引入 GeoServer/MapServer 发布 WMS/WMTS/MVT，前端以 Leaflet/Mapbox GL 消费服务。
• 反向代理与统一入口：Nginx/Traefik 提供统一域名与路径，启用 HTTPS 与 CORS。
• 缓存与CDN：GeoWebCache + 边缘CDN 提升热点访问性能，降低后端负载。

24.10 服务化案例：WMTS 与 MVT 发布与联调

• GeoServer 中配置：
  • Workspace/Datastore/Layer 命名规范：workspace:layer_name。
  • 启用 GeoWebCache 并发布 WMTS，tilematrixSet 统一为 EPSG:3857。
  • 若启用矢量切片（MVT），安装 MVT 插件，配置 application/vnd.mapbox-vector-tile。
• WMTS 示例 URL：

https://example.com/geoserver/gwc/service/wmts?
  layer=workspace:layer_name&style=&tilematrixset=EPSG:3857&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:3857:10&TileCol=684&TileRow=321

• 前端（Leaflet WMTS）示例：

<script>
const url = 'https://example.com/geoserver/gwc/service/wmts';
const wmtsLayer = L.tileLayer(`${url}?layer=workspace:layer_name&style=&tilematrixset=EPSG:3857&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:3857:{z}&TileCol={x}&TileRow={y}`, {
  tileSize: 256,
  crossOrigin: true
});
wmtsLayer.addTo(map);
</script>

• 前端（Mapbox GL MVT）示例：

map.addSource('mvt_src', {
  type: 'vector',
  tiles: ['https://example.com/mvt/workspace/layer_name/{z}/{x}/{y}.pbf'],
  minzoom: 0,
  maxzoom: 14
});
map.addLayer({
  id: 'mvt_layer',
  type: 'fill',
  source: 'mvt_src',
  'source-layer': 'layer_name',
  paint: { 'fill-color': '#2980b9', 'fill-opacity': 0.5 }
});

24.11 CDN 与缓存策略

• 热门图层开启 GeoWebCache 并预热关键缩放层级（如 Z=7--14）。
• 边缘CDN缓存策略：按 path + query 归一，避免不必要的参数变体导致未命中。
• 版本号/ETag：静态资源与样式 JSON 引入版本标识，客户端启用缓存与条件请求。
• 指标：命中率（Hit Ratio）、95/99 延迟、后端吞吐（TPS）、错误率（4xx/5xx）。

24.12 安全与鉴权

• 鉴权方式：Token（JWT）、Basic、IP 允许列表；敏感专题图层按角色授权。
• HTTPS 强制：全部服务通过 443 提供，禁用明文访问。
• CORS 控制：只允许可信前端来源；必要时提供后端代理统一出口。
• 日志与审计：记录访问主体、资源、时间与结果，支持追踪问题与合规审计。

24.13 监控与熔断设计

• 监控：接入 Prometheus + Grafana 或云监控，采集延迟、错误率与命中率。
• 健康检查：/health 或瓦片探针；异常时自动降级到缓存或低精度图层。
• 熔断与重试：后端错误率高时短时阻断或切换备份服务；客户端指数退避重试。

24.14 前端联调与降级策略

• 双地图对比：左侧生产，右侧预发布；切换不同缩放与图层进行比对。
• 降级：
  • MVT 加载失败 → 切换到 WMTS Raster；
  • WMTS 未命中 → 降级到静态瓦片或简化图层；
  • 样式冲突 → 降级到基础符号，保留核心表达。
• 错误提示：统一组件显示"加载失败/降级中"，输出 requestId 便于排障。

24.15 CI/CD 部署流程（示例）

• 过程：
  1. 构建后端镜像（GeoServer/MapServer）与前端资产；
  2. 执行单元测试与端到端冒烟测试（联调页）；
  3. 推送到测试环境，运行缓存预热与健康检查；
  4. 蓝绿或金丝雀发布，观察指标稳定后全量切换；
  5. 发布报告与变更日志归档。
• 示例 Nginx 反向代理：

server {
  listen 443 ssl;
  server_name maps.example.com;
  location /geoserver/ {
    proxy_pass http://geoserver:8080/geoserver/;
    proxy_set_header Host $host;
    add_header Access-Control-Allow-Origin '*';
  }
}

24.16 故障演练与回滚

• 演练场景：后端超时、缓存失效、样式加载异常、跨域阻断。
• 回滚清单：上一个稳定版本的镜像/配置/样式与缓存；切换DNS或入口。
• 复盘：记录触发原因、耗时与影响面，形成改进项与SOP更新。

24.17 文档与合规

• 文档清单：架构图、服务目录、样式说明、缓存策略、联调步骤、排障手册。
• 合规要点：隐私与授权、数据许可（ODbL/CC-BY）、访问审计与保留周期。
• 版本管理：CHANGELOG.md 与 metrics.json（延迟/命中率/错误率）。

24.18 常见坑与修复

• CRS 与网格：未统一导致偏移或空白瓦片 → 统一 EPSG:3857 与 tilematrixSet。
• 参数变体：随机 query 导致缓存碎片 → 归一化请求或后端忽略冗余参数。
• 样式规则冲突：比例尺可见性与分类覆盖不当 → 分层规则与过滤明确。
• CORS 阻断：跨域未配置 → 在反向代理或服务端启用 CORS 正确来源。

24.19 叙事案例：人口密集区专题发布（端到端）

• 问题引入：新片区人口密集，需发布人口密度与公共设施覆盖专题，面向规划部门与公众。
• 目标：
  • 公众端：瓦片热点展示与基础交互；
  • 内部端：矢量切片（MVT）支持筛选与属性分析；
  • 指标：95 延迟 ≤ 300ms，命中率 ≥ 85%。
• 数据与服务：
  • 人口网格（500m，字段 pop），WMTS 栅格热力；
  • 设施点（医院/学校），MVT 矢量切片；
  • 样式：人口热力色带与设施分类符号。
• 前端联调：

// 人口 WMTS 热力
const wmts = L.tileLayer('https://maps.example.com/geoserver/gwc/service/wmts?...', { tileSize:256 }).addTo(map);
// 设施 MVT 叠加
map.addSource('facility', { type:'vector', tiles:['https://maps.example.com/mvt/plan/facility/{z}/{x}/{y}.pbf']});
map.addLayer({ id:'facility-point', type:'circle', source:'facility', 'source-layer':'facility', paint:{ 'circle-radius':3, 'circle-color':'#e74c3c' }});

• 监控与发布：联调页冒烟通过，预热热点缩放层级，蓝绿发布，指标稳定后切换。
• 公示与反馈：公众端说明数据来源与更新频率，收集页面意见并回流。

24.20 本章小结

• 从最小可运行的静态 HTML 地图，扩展到服务化的 WMTS/MVT 发布与前端联调，覆盖架构、缓存、鉴权、监控与CI/CD部署，形成可复用的工程闭环。通过叙事案例展示面向公众与内部的双端发布实践，确保"可读、可用、可交互"，并以指标驱动持续优化。