企业官网建设流程全解析

TileServer GL 完整实战：三步搭好你的地图瓦片服务

【免费下载链接】tileserver-glVector and raster maps with GL styles. Server side rendering by MapLibre GL Native. Map tile server for MapLibre GL JS, Android, iOS, Leaflet, OpenLayers, GIS via WMTS, etc.项目地址: https://gitcode.com/gh_mirrors/ti/tileserver-gl

TileServer GL 是一个开源的地图瓦片服务器：给它一份 GL 样式文件和 MBTiles 数据，它就能输出矢量瓦片、服务器端渲染的栅格瓦片，以及兼容 WMTS 协议的接口，直接供 MapLibre GL JS、Leaflet、OpenLayers 等客户端消费。

它是什么：一个服务端出图的瓦片服务器

传统做法是客户端拉矢量瓦片再本地渲染；TileServer GL 把渲染放到服务端——完整版用 MapLibre GL Native 在服务器上把矢量数据画成 PNG/JPG/WebP 栅格瓦片，客户端拿到的就是现成的图片。同一套服务还暴露样式、字体、精灵图、瓦片数据和 WMTS 能力文档等端点，一份部署可以喂给 Web、移动端和 GIS 系统。

两种形态对比

npm 上有两个包，Docker 镜像也分两个，对应完整版和轻量版：

判断标准很简单：你需要服务器端出栅格图，选完整版；只要发矢量瓦片和样式、求省事，选轻量版。

适合谁，用在哪里

• Web 地图开发者：前端已经用 MapLibre GL JS、Leaflet 或 OpenLayers，只差一个稳定的瓦片源，改一下 style URL 就能接上。
• 移动 / 离线应用：为 Android、iOS 应用提供本地瓦片服务，数据打包进 MBTiles 后离线可用。
• GIS 集成：通过 WMTS 端点（/styles/{id}/wmts.xml）对接专业 GIS 系统，而不只是自家 Web 前端。
• 地理数据可视化：把 GeoJSON/MBTiles 里的数据快速挂成可交互的地图，用于空间分析和展示。

三步跑起来 🚀

安装（三选一）

# 方式一：npm 全局安装（完整版；轻量版把包名换成 tileserver-gl-light） npm install -g tileserver-gl # 方式二：Docker docker run --rm -it -v $(pwd):/data -p 8080:8080 maptiler/tileserver-gl # 方式三：源码运行 git clone https://gitcode.com/gh_mirrors/ti/tileserver-gl cd tileserver-gl && npm install

最小可跑配置

在工作目录放一个config.json，两个字段就能跑：

{ "options": { "paths": { "root": "./data" } }, "styles": { "basic": { "style": "style.json", "tilejson": { "bounds": [-180, -85.0511, 180, 85.0511] } } } }

• options.paths.root：所有数据（样式、字体、mbtiles 等）的根目录前缀。
• styles.basic.style：样式文件名，指向style.json，basic是对外暴露的样式 ID。
• tilejson.bounds：服务覆盖范围（左下、右上经纬度），客户端据此限制地图边界。

样式文件可用 Maputnik 之类的编辑器制作，配置里也可以直接写远程 style URL。

启动与验证

# 完整版 tileserver-gl --config config.json # 轻量版 tileserver-gl-light --config config.json

默认监听8080端口。启动后浏览器访问http://localhost:8080，能看到带样式列表和测试入口的前页；再请求一张瓦片，例如/styles/basic/0/0/0.png，返回正常图片就说明链路通了。只有一份 mbtiles 文件、暂时没有配置文件时，也可以直接tileserver-gl --file xxx.mbtiles启动。

生产环境调优清单 🛠️

• 缓存：服务前挂 nginx / Varnish / Cloudflare。nginx 的proxy_cache配 1 周有效期即可显著卸载重复请求；改了样式或瓦片后要清理缓存目录，否则旧瓦片会一直命中。
• 分辨率上限：用maxScaleFactor限制栅格请求的放大倍率（如@3x封顶），用maxSize限制出图尺寸（如 2048px），防止超大图拖垮渲染进程。
• 出图质量：formatOptions里按格式设质量，如"jpeg": { "quality": 80 }、"webp": { "quality": 90 }，在流量和质量之间取平衡。
• 进程管理：生产环境用 PM2 这类工具保活，避免进程挂掉后无人拉起重启。
• 安全：对外部署时加--public_url https://your-domain.com/固定响应里的 URL；不用 public_url 时，用环境变量TILESERVER_GL_ALLOWED_HOSTS（逗号分隔的域名白名单）限制 Host，防 Host 头投毒。
• 反向代理：代理层要透传X-Forwarded-Host/X-Forwarded-Proto，否则 TileJSON 等响应里生成的域名和协议会不对。

官方文档与延伸阅读

仓库docs/目录里有完整的 Sphinx 文档，按需查阅：

• 配置字段全解（paths、formatOptions、styles、data 等）：docs/config.rst
• 部署、缓存、反向代理与安全：docs/deployment.rst
• 全部可用端点清单（样式、渲染瓦片、WMTS、静态图、数据、高程）：docs/endpoints.rst
• 安装与使用说明：docs/installation.rst、docs/usage.rst

下一步

跑通最小配置后，把真实的 MBTiles 数据放进./data目录、补上字体与样式文件，再按上面清单加缓存和安全项，就可以直接接入生产。不想装环境的话，先复制这条命令体验轻量版：

npx tileserver-gl-light --demo

【免费下载链接】tileserver-glVector and raster maps with GL styles. Server side rendering by MapLibre GL Native. Map tile server for MapLibre GL JS, Android, iOS, Leaflet, OpenLayers, GIS via WMTS, etc.项目地址: https://gitcode.com/gh_mirrors/ti/tileserver-gl