背景与目的

在内网或离线环境下互联网地图服务无法使用。说起来，这篇文章介绍如何通过 Nginx 部署离线地图瓦片服务。并支持 Cesium 和 Leaflet 两种前端地图引擎加载，实现从本地开发到生产环境的无缝迁移。

使用者痛点

• 缺乏可靠的离线地图方法，导致业务在无网络环境下无法正常运行。
• 数据量大，下载速度慢，部署过程繁琐。
• CORS 跨域、坐标偏移、瓦片层级不匹配等技术细节导致前端显示异常。其实，
• 前后端代码改动多，维护成本高。

与部署流程

1. 本地部署：Nginx 配置瓦片服务，前端通过 localhost 访问调试。
2. 调试验证：确认层级切换、坐标偏移等问题解决。其实，
3. 生产部署：将配置和瓦片复制到服务器。仅修改前端 URL 地址。

主要优势：代码逻辑完全不变，仅需更换服务地址就可以完成迁移。

Nginx 部署离线地图服务

准备工作

Nginx 安装包 + 瓦片数据目录示例：

/usr/local/nginx
└── tiles/
└── {z}/{x}/{y}.png

Nginx 配置示例

server {
listen 8001;老实说，server_name localhost;location ^~ / {
root /path/to/tiles;怎么说呢，}
# CORS 跨域配置
add_header 'Access-Control-Allow-Origin' '*' always;add_header 'Access-Control-Allow-Methods' 'GET。POST,OPTIONS' always;add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent。X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;说起来，add_header 'Access-Control-Expose-Headers' 'Content-Length。Content-Range' always;# 默认 Content-Type
default_type application/json;}

启动与验证

• 启动 Nginx：{% raw %}nginx.exe{% endraw %}
• 验证服务：浏览器访问测试 URL：
• If a tile image appears correctly → 服务已成功部署。

Cesium 加载离线瓦片

安装依赖

npm install cesium
# 或者
yarn add cesium

Cesium 初始化并添加瓦片底图示例

*注意：Cesium 的 WebMercatorTilingScheme 与 Leaflet 的 EPSG3857 坐标系保持一致，若使用其他投影需自行转换。*

Leflet 加载离线瓦片示例

Leflet 安装依赖

npm install leaflet

npm install leaflet@^1.9 --save-dev

import 'leaflet/dist/leaflet.css';

警告Leaflet v1.x 默认没有 L.CRS.EPSG4326 支持，需要手动 或使用第三方插件。对大多数 web 地图应用而言，只要确保 tile URL 使用的是 EPSG3857 即可。

Leaflet 初始化并加载自定义瓦片