自建地图服务架构图

Leaflet前端 + Nginx瓦片服务 + Node.js后端完整解决方案

1

前端层 (Frontend - Leaflet.js)

地图渲染引擎
  • 初始化地图容器和视图
  • 管理瓦片图层和叠加层
  • 渲染标记、弹窗和控件
  • 处理地图投影和坐标转换
地址搜索组件
  • 接收用户输入的地址
  • 调用地理编码API (/api/geocode)
  • 解析返回的坐标结果
  • 地图定位和标记显示
地图交互组件
  • 监听地图点击/移动事件
  • 获取点击位置的经纬度
  • 调用逆地理编码API (/api/reverse-geocode)
  • 显示地址信息和弹窗
↓
2

网关层 (API Gateway - Nginx)

静态瓦片服务
  • 路径: /tiles/{z}/{x}/{y}.png
  • 直接返回预生成的图片瓦片
  • 设置长期缓存头(1年)
  • Gzip压缩和高效传输
地理编码API代理
  • 路径: /api/geocode
  • 代理到Node.js后端服务
  • 请求限流和缓存
  • 负载均衡和高可用
逆地理编码API代理
  • 路径: /api/reverse-geocode
  • 代理到Node.js后端服务
  • 请求限流和缓存
  • 跨域请求处理
↓
3

应用服务层 (Application Layer)

瓦片文件服务 (Nginx)
  • 直接返回图片瓦片文件
  • 目录结构映射: /z/x/y.png
  • 缓存头设置和性能优化
  • 错误处理(返回空白瓦片)
地理编码服务 (Node.js)
  • 地址标准化和解析
  • 数据库模糊查询和全文搜索
  • 结果排序和置信度计算
  • 外部API降级策略
逆地理编码服务 (Node.js)
  • 坐标边界查询(所在行政区)
  • 最近POI查找和距离计算
  • 地址格式化和拼接
  • 空间索引优化查询
↓
4

数据层 (Data Layer)

瓦片文件系统 (本地存储)
  • 存储结构: /z/x/y.png
  • 多层级目录组织
  • 图片压缩格式(WebP/PNG)
  • 备份和同步策略
PostgreSQL (地址数据库)
  • 行政区划表(省市区)
  • 道路表和POI兴趣点表
  • PostGIS空间扩展
  • 全文搜索索引优化
Redis缓存 (缓存加速)
  • 缓存查询结果
  • 减少数据库压力
  • 会话和临时数据存储
  • 分布式锁和限流
地理编码流程
地址 → 前端API调用 → Nginx代理 → Node.js服务 → 数据库查询 → 返回坐标
逆地理编码流程
坐标 → 前端API调用 → Nginx代理 → Node.js服务 → 空间查询 → 返回地址
瓦片加载流程
地图视图 → 计算瓦片坐标 → Nginx静态服务 → 返回图片 → 前端渲染

技术栈

Leaflet.js
Node.js
Express
Nginx
PostgreSQL
PostGIS
Redis
Docker
前端组件
网关/代理
应用服务
数据存储