如何你已经有了 按 level（zoom）分类的 JPG或PNG 格式的瓦片数据需要发布瓦片数据
✅ 首选：Nginx /Apache 静态服务器直发
✅ 大规模：TileServer / MBTiles / 对象存储
为什么不用Geoserver?
GeoServer 不适合“管理已经切好的 XYZ/JPG 瓦片” GeoServer 的设计前提是：
原始空间数据 → 动态 / 缓存切片. 而不是： 已切好的瓦片 → 再发布
Nginx（其次 Apache）静态发布就是效率最高、最简单、最稳定的方案，而且这是行业共识，不是“经验之谈”。
静态瓦片请求的理想路径是：
HTTP 请求
→ 内核 sendfile
→ 文件系统页缓存
→ 网卡
❌ 没有 Python / Java
❌ 没有渲染
❌ 没有数据库
❌ 没有坐标计算
👉 IO 直通 = 性能极限
Nginx 的三大杀手级优势
- 事件驱动（epoll）
- 单进程可扛数万并发
- 非阻塞 IO
- sendfile + mmap
- 文件直接从内核到网卡
- 零拷贝
- 文件系统缓存命中率极高
- 热瓦片 = 内存直出
- QPS 几乎只看网卡带宽
一、最终目标
访问方式：
http://127.0.0.1/tiles/{z}/{x}/{y}.jpg
特点：
⚡ 极限性能
📦 零依赖
🔒 可加 HTTPS / 鉴权
🧱 可扩展 CDN
二、准备工作
1. 安装 Nginx
sudo apt update sudo apt install -y nginx检查：
nginx -v2. 准备瓦片目录（非常重要）
推荐目录结构
/data/tiles/ └── 0/ └── 0/ └── 0.jpg即：
/data/tiles/{z}/{x}/{y}.jpg
📌 注意：
目录名必须是数字
文件名只包含 y.jpg
3. 权限设置（很多人卡在这里）
sudo chown -R www-data:www-data /data/tiles sudo chmod -R 755 /data/tiles三、Nginx 核心配置
1. 新建站点配置
sudo nano /etc/nginx/sites-available/tiles.conf2.tiles.conf内容
server { listen 80 default_server; listen [::]:80 default_server; # 瓦片根目录 #root /data; # 静态瓦片发布 location /tiles/ { alias /data/tiles/; autoindex on; # 直接命中磁盘文件 try_files $uri =404; # 缓存 1 年（瓦片不可变） expires 365d; add_header Cache-Control "public, immutable"; # 允许跨域 add_header Access-Control-Allow-Origin *; # 关闭访问日志（减少 IO） access_log off; } # 防止误访问根目录 location / { return 404; } }3. 启用站点
sudo ln -s /etc/nginx/sites-available/tiles.conf /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx四、系统级性能开关（必须）
编辑主配置：
sudo nano /etc/nginx/nginx.conf确保这些是 on：
sendfile on; tcp_nopush on; tcp_nodelay on; aio threads;五、验证是否正常（3 步）
1️⃣ 浏览器访问一个瓦片
http://127.0.0.1/tiles/1/0/0.jpg✔ 能显示图片 = 成功
2️⃣ 用 curl 看缓存头
curl -I http:///127.0.0.1/tiles/1/0/1.jpg
应看到：
Cache-Control: public, immutable
Expires: …
3️⃣ Leaflet 测试
index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>Leaflet 双 TileLayer（低分 + ROI 高分）</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <style> html, body, #map { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script> /* ========================= 1️⃣ 地图初始化 ========================= */ const map = L.map('map', { center: [35, 105], // 中国附近 zoom: 4, minZoom: 1, maxZoom: 18 }); /* ========================= 2️⃣ 瓦片 URL ========================= */ const TILE_URL = 'http://127.0.0.1/tiles/{z}/{x}/{y}.jpg'; /* ========================= 3️⃣ 低分全球底图（z ≤ 5） ========================= */ const lowResLayer = L.tileLayer(TILE_URL, { tms: true, // ⚠️ 你的是 TMS minZoom: 1, maxZoom: 18, maxNativeZoom: 5, // 🔑 全球真实瓦片只到 5 attribution: 'Low Resolution Tiles' }); /* ========================= 4️⃣ 高分 ROI 图层（z ≥ 6） ========================= */ const highResLayer = L.tileLayer(TILE_URL, { tms: true, // 同样是 TMS minZoom: 6, // 🔑 6 级开始才请求 maxZoom: 18, opacity: 1.0, attribution: 'High Resolution ROI Tiles' }); /* ========================= 5️⃣ 叠加顺序（关键） ========================= */ // ⚠️ 先加低分，再加高分 lowResLayer.addTo(map); highResLayer.addTo(map); /* ========================= 6️⃣ 调试：点击查看当前级别 ========================= */ map.on('click', (e) => { console.log( `lat=${e.latlng.lat.toFixed(6)}, ` + `lon=${e.latlng.lng.toFixed(6)}, ` + `zoom=${map.getZoom()}` ); }); </script> </body> </html>
