maplibre-pmtiles-patterns
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMapLibre PMTiles Patterns
MapLibre PMTiles实践模式
PMTiles is a single-file format for vector or raster map tiles. You host one (or a few) files on any static host; MapLibre requests byte ranges over HTTP. No tile server, no dynamic backend. This skill covers when to use PMTiles, how to generate and host them, and how to connect them to MapLibre GL JS.
PMTiles是一种用于矢量或栅格地图瓦片的单文件格式。你可以将一个(或多个)文件托管在任意静态主机上,MapLibre通过HTTP请求字节范围即可获取所需内容,无需瓦片服务器,也无需动态后端。本技能涵盖PMTiles的适用场景、生成与托管方法,以及如何将其与MapLibre GL JS对接。
When to Use This Skill
何时使用该技能
- Hosting map tiles without running a tile server (S3, Cloudflare R2, GitHub Pages, etc.)
- Building a fully static or serverless map stack
- Serving large tile sets from a CDN with range requests
- Generating PMTiles from OSM or other sources (Planetiler, tippecanoe)
- Using Overture Maps or other single-file tile datasets with MapLibre
- 无需运行瓦片服务器即可托管地图瓦片(S3、Cloudflare R2、GitHub Pages等)
- 构建完全静态或无服务的地图技术栈
- 通过支持范围请求的CDN分发大型瓦片集
- 从OSM或其他数据源生成PMTiles(Planetiler、tippecanoe)
- 在MapLibre中使用Overture Maps或其他单文件瓦片数据集
What PMTiles Is and Why It Matters
什么是PMTiles及其核心价值
- Vector and raster — PMTiles supports both. A file can contain vector layers (e.g. water, roads, POIs), raster imagery (PNG/JPEG), or raster-dem (elevation, e.g. Terrarium format for terrain). In the style you use ,
type: 'vector', ortype: 'raster'accordingly.type: 'raster-dem' - Single file per map — One file typically contains the full tile pyramid (all zoom levels) and all layers (vector or raster) in one archive. The format stores tiles in a compact layout (e.g. Hilbert curve) so the client can request only the byte ranges it needs. For very large coverage you may split by region into multiple files.
.pmtiles - HTTP range requests — The client requests only the byte ranges it needs (e.g. one tile), so the server does not need to understand x/y/z. Any host that supports headers works.
Range - Serving — You can serve directly from static storage (S3, R2, GitHub Pages, Netlify): the client uses range requests, so no tile server is required. Alternatively, tileserver-gl or Martin can serve PMTiles (from local paths, HTTP URLs, or S3), useful if you want one server that also provides styles, glyphs, or other sources.
- Creating — You can get PMTiles by converting from MBTiles (pmtiles CLI) or by generating from source data (Planetiler, tippecanoe, GDAL, etc.). Alternatively, Protomaps is a provider where you can download pre-built PMTiles (e.g. global or regional basemaps) and serve them yourself, or create custom extracts via the PMTiles CLI—no need to generate from OSM yourself. See The pmtiles CLI and Generating PMTiles below.
- Good for CDNs — Range requests cache well; put the file behind a CDN for fast global access.
When to prefer PMTiles over a traditional tile server:
- You want zero server logic (static hosting only).
- You have a bounded dataset (country, region, theme) that fits in one or a few files.
- You want simple deployment and low ops (upload file, set cache headers, done).
When to prefer a tile server (e.g. tileserver-gl, martin):
- You need dynamic tiles from a database (PostGIS) or frequently updated data.
- You have a very large global dataset and want to generate tiles on demand or by region only.
- 矢量与栅格双支持 — PMTiles同时支持两种格式。单个文件可包含矢量图层(例如水域、道路、POI)、栅格影像(PNG/JPEG)或raster-dem(高程数据,例如地形用的Terrarium格式)。在样式中你可以根据需求对应使用、
type: 'vector'或type: 'raster'。type: 'raster-dem' - 单张地图对应单个文件 — 一个文件通常包含完整的瓦片金字塔(所有缩放层级)和所有图层(矢量或栅格),归档为单个文件。该格式采用紧凑布局存储瓦片(例如希尔伯特曲线),因此客户端仅需要请求所需的字节范围即可。如果覆盖范围非常大,你也可以按区域拆分为多个文件。
.pmtiles - HTTP范围请求 — 客户端仅请求所需的字节范围(例如单个瓦片),因此服务器不需要识别x/y/z参数,任意支持请求头的主机都可以使用。
Range - 分发方式 — 你可以直接从静态存储(S3、R2、GitHub Pages、Netlify)提供服务:客户端使用范围请求,不需要瓦片服务器。你也可以使用tileserver-gl或Martin分发PMTiles(支持本地路径、HTTP URL或S3),如果你需要单个服务器同时提供样式、字体或其他数据源,这种方案会更实用。
- 生成方式 — 你可以通过转换MBTiles文件(pmtiles CLI)得到PMTiles,也可以从源数据直接生成(Planetiler、tippecanoe、GDAL等)。此外,Protomaps是一个可下载预构建PMTiles的服务商(例如全球或区域底图),你可以自行托管,也可以通过PMTiles CLI生成自定义提取包,不需要自己从OSM生成。详见下文的pmtiles CLI和生成PMTiles章节。
- 适配CDN — 范围请求的缓存效果很好,你可以将文件放在CDN后面实现全球快速访问。
相比传统瓦片服务器,优先选择PMTiles的场景:
- 你不需要任何服务器逻辑,仅使用静态托管即可
- 你有边界明确的数据集(国家、区域、主题),可收纳在一个或少量文件中
- 你想要极简部署和低运维成本:上传文件、设置缓存头即可完成部署
优先选择瓦片服务器(例如tileserver-gl、martin)的场景:
- 你需要从数据库(PostGIS)生成动态瓦片,或是数据更新频率很高
- 你有超大规模的全球数据集,想要按需生成瓦片或仅按区域生成
MapLibre Integration: The pmtiles Protocol
MapLibre集成:pmtiles协议
MapLibre does not speak PMTiles natively. You use the pmtiles library to add a protocol handler so that a (or to a .pmtiles file) source works.
pmtiles://https://Install:
bash
npm install pmtilesRegister the protocol and use in a style:
javascript
import * as pmtiles from 'pmtiles';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
// Add PMTiles protocol so sources can reference .pmtiles URLs
const protocol = new pmtiles.Protocol();
maplibregl.addProtocol('pmtiles', protocol.tile);
const map = new maplibregl.Map({
container: 'map',
style: {
version: 8,
sources: {
'tiles': {
type: 'vector',
url: 'pmtiles://https://example.com/data.pmtiles'
}
},
layers: [
{
id: 'background',
type: 'background',
paint: { 'background-color': '#f8f4f0' }
},
{
id: 'water',
type: 'fill',
source: 'tiles',
'source-layer': 'water',
paint: { 'fill-color': '#a0c8f0' }
}
// add more layers as needed — each uses the same source, different 'source-layer'
]
},
center: [0, 0],
zoom: 2
});
// Optional: remove protocol on map teardown
// map.on('remove', () => maplibregl.removeProtocol('pmtiles'));Referencing layers: The style has one source (e.g. ) pointing at the .pmtiles URL. Each layer in the array that draws from that file uses and , where is the name of a vector layer inside the file (from whatever schema the tiles use). Add multiple style layers with different values to show roads, labels, etc. from the same file.
sources.tileslayerssource: 'tiles'"source-layer": "layerName"layerNamesource-layerImportant: The can be (protocol + HTTPS URL to the .pmtiles file). The library will fetch the file via range requests. Your style must still define glyphs and sprite if you use labels or icons (see maplibre-tile-sources).
urlpmtiles://https://...Raster and raster-dem: The same protocol works for raster PMTiles. Use a source for imagery. For terrain/elevation, use a source with (or ) so MapLibre can apply hillshade or 3D terrain; then reference it in the style’s property. Example source:
type: 'raster'type: 'raster-dem'"encoding": "terrarium""mapbox"terrainjson
"elevation": {
"type": "raster-dem",
"url": "pmtiles://https://example.com/elevation.pmtiles",
"encoding": "terrarium"
}Using PMTiles with React: Register the protocol once at application startup, not inside each component, so MapLibre has the handler before any map mounts. For example, call in a root-level effect or when your map provider initializes. On unmount of the last map (or when the app tears down), call to avoid leaks. See PMTiles for MapLibre GL (Protomaps) for a React-oriented setup.
maplibregl.addProtocol('pmtiles', protocol.tile)maplibregl.removeProtocol('pmtiles')MapLibre本身不原生支持PMTiles,你需要使用pmtiles库添加协议处理器,这样(或指向.pmtiles文件的)源就可以正常工作。
pmtiles://https://安装:
bash
npm install pmtiles注册协议并在样式中使用:
javascript
import * as pmtiles from 'pmtiles';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
// 添加PMTiles协议,这样数据源就可以引用.pmtiles URL
const protocol = new pmtiles.Protocol();
maplibregl.addProtocol('pmtiles', protocol.tile);
const map = new maplibregl.Map({
container: 'map',
style: {
version: 8,
sources: {
'tiles': {
type: 'vector',
url: 'pmtiles://https://example.com/data.pmtiles'
}
},
layers: [
{
id: 'background',
type: 'background',
paint: { 'background-color': '#f8f4f0' }
},
{
id: 'water',
type: 'fill',
source: 'tiles',
'source-layer': 'water',
paint: { 'fill-color': '#a0c8f0' }
}
// 按需添加更多图层:每个图层使用同一个数据源,仅'source-layer'不同
]
},
center: [0, 0],
zoom: 2
});
// 可选:地图销毁时移除协议
// map.on('remove', () => maplibregl.removeProtocol('pmtiles'));引用图层: 样式中有一个数据源(例如)指向.pmtiles URL。数组中从该文件读取内容的每个图层都使用和,其中是文件内部矢量图层的名称(由瓦片使用的schema决定)。你可以添加多个使用不同值的样式图层,从同一个文件中渲染道路、标注等内容。
sources.tileslayerssource: 'tiles'"source-layer": "layerName"layerNamesource-layer重要提示: 可以是的格式(协议+指向.pmtiles文件的HTTPS URL)。库会通过范围请求获取文件,如果你使用标注或图标,样式中仍然需要定义glyphs和sprite(参见maplibre-tile-sources)。
urlpmtiles://https://...栅格和raster-dem: 相同的协议也适用于栅格PMTiles。影像数据使用的数据源;地形/高程数据使用的数据源,搭配(或),这样MapLibre就可以实现山体阴影或3D地形效果,之后在样式的属性中引用即可。数据源示例:
type: 'raster'type: 'raster-dem'"encoding": "terrarium""mapbox"terrainjson
"elevation": {
"type": "raster-dem",
"url": "pmtiles://https://example.com/elevation.pmtiles",
"encoding": "terrarium"
}在React中使用PMTiles: 在应用启动时注册一次协议,不要在每个组件内部注册,确保MapLibre在任何地图挂载前就有对应的处理器。例如,在根级effect中调用,或是在你的地图提供者初始化时调用。在最后一个地图卸载时(或应用销毁时),调用避免内存泄漏。查看PMTiles for MapLibre GL(Protomaps官方文档)了解面向React的配置方案。
maplibregl.addProtocol('pmtiles', protocol.tile)maplibregl.removeProtocol('pmtiles')Hosting PMTiles
托管PMTiles
Any host that serves the file and supports HTTP Range requests is suitable.
- AWS S3 — Enable public read (or signed URLs); S3 supports Range. Set and optionally use CloudFront.
Cache-Control - Cloudflare R2 — S3-compatible; enable public access or use signed URLs. Put behind Cloudflare for caching.
- GitHub Pages — MapLibre GL JS can load tiles from a .pmtiles file in the same repo as long as the file size is under 100 MB.
- Netlify / Vercel — Upload the .pmtiles file; static hosting typically supports Range. Check each provider’s file size limits.
- Any static host — Ensure the server returns and responds correctly to
Accept-Ranges: bytesheaders.Range
CORS: Browsers will send cross-origin requests to the PMTiles URL. The host must send (or your domain) and (or allow all). Otherwise MapLibre will fail to load tiles.
Access-Control-Allow-Origin: *Access-Control-Allow-Headers: RangeCache headers: For better performance, set long cache for the .pmtiles file (e.g. if the file is immutable). CDNs will cache range responses.
Cache-Control: public, max-age=31536000任意支持文件服务和HTTP Range请求的主机都适合托管PMTiles。
- AWS S3 — 开启公共读权限(或签名URL),S3原生支持Range请求。设置,也可以搭配CloudFront使用。
Cache-Control - Cloudflare R2 — 兼容S3协议,开启公共访问或使用签名URL,放在Cloudflare后面实现缓存。
- GitHub Pages — 只要文件大小小于100MB,MapLibre GL JS就可以从同仓库的.pmtiles文件加载瓦片。
- Netlify / Vercel — 上传.pmtiles文件即可,静态托管通常都支持Range请求,注意查看各服务商的文件大小限制。
- 任意静态主机 — 确保服务器返回,并且能正确响应
Accept-Ranges: bytes请求头即可。Range
CORS配置: 浏览器会向PMTiles URL发送跨域请求,主机必须返回(或你的域名)和(或允许所有头),否则MapLibre会加载瓦片失败。
Access-Control-Allow-Origin: *Access-Control-Allow-Headers: Range缓存头: 为了更好的性能,给.pmtiles文件设置长缓存(例如文件不可变的话设置),CDN会缓存范围请求的响应。
Cache-Control: public, max-age=31536000The pmtiles CLI
pmtiles CLI
The pmtiles CLI is the official command-line tool for working with PMTiles (and MBTiles for conversion). It’s a single binary with no runtime dependencies—you download it and run it.
Why install and use it:
- Convert MBTiles to PMTiles — Many tools (tippecanoe, GDAL, martin-cp) output MBTiles. One command turns any .mbtiles file into a .pmtiles file: . This is often the simplest way to get PMTiles when your pipeline already produces MBTiles.
pmtiles convert in.mbtiles out.pmtiles - Inspect and verify archives — prints header and metadata (bounds, zoom range, tile count).
pmtiles show <file>checks archive integrity. Useful for debugging or confirming a file before uploading.pmtiles verify <file> - Extract subsets — creates a smaller .pmtiles file from an existing one (e.g. by bounding box or zoom range), so you can ship a region or a limited zoom band without regenerating from source.
pmtiles extract
Install: Download the binary for your OS/arch from GitHub Releases (go-pmtiles), or use Docker: .
protomaps/go-pmtilesWhat it does not do: The CLI only works with tile archives (MBTiles and PMTiles). It does not read GeoJSON, Shapefile, OSM, or other source formats. To create PMTiles from those, use a tool that generates tiles (see Generating PMTiles below) and, if that tool outputs MBTiles, run to get PMTiles.
pmtiles convertpmtiles CLI是官方用于处理PMTiles(以及转换MBTiles)的命令行工具,是无运行时依赖的单二进制文件,下载即可运行。
安装使用的理由:
- 将MBTiles转换为PMTiles — 很多工具(tippecanoe、GDAL、martin-cp)都会输出MBTiles,一条命令即可将任意.mbtiles文件转换为.pmtiles文件:。如果你的流水线已经产出MBTiles,这通常是获取PMTiles最简单的方式。
pmtiles convert in.mbtiles out.pmtiles - 检查和验证归档文件 — 可以打印头部和元数据(边界、缩放范围、瓦片数量),
pmtiles show <file>可以检查归档完整性,适合调试或上传前确认文件有效性。pmtiles verify <file> - 提取子集 — 可以从现有PMTiles文件生成更小的文件(例如按边界框或缩放范围提取),不需要从源数据重新生成,就可以分发某个区域或有限缩放层级的包。
pmtiles extract
安装: 从GitHub Releases (go-pmtiles)下载对应你系统/架构的二进制文件,或是使用Docker:。
protomaps/go-pmtiles功能限制: CLI仅支持瓦片归档文件(MBTiles和PMTiles),不支持读取GeoJSON、Shapefile、OSM或其他源格式。如果要从这些格式创建PMTiles,使用生成瓦片的工具(见下文生成PMTiles章节),如果工具输出MBTiles,再运行得到PMTiles。
pmtiles convertGenerating PMTiles
生成PMTiles
Two paths: (1) Convert — The pmtiles CLI converts MBTiles ↔ PMTiles only; it does not read GeoJSON, Shapefile, OSM, or other source formats. (2) Generate from source data — Tools like tippecanoe, Planetiler, and GDAL read from many file types or databases and produce vector tiles (PMTiles or MBTiles). If they output MBTiles, use to get PMTiles.
pmtiles convert两种路径: (1) 转换 — pmtiles CLI仅支持MBTiles和PMTiles之间的互转,不支持读取GeoJSON、Shapefile、OSM或其他源格式。(2) 从源数据生成 — tippecanoe、Planetiler、GDAL等工具可以读取多种文件类型或数据库,生成矢量瓦片(PMTiles或MBTiles),如果输出的是MBTiles,使用转换为PMTiles即可。
pmtiles convertpmtiles CLI (convert only: MBTiles ↔ PMTiles)
pmtiles CLI(仅支持转换:MBTiles ↔ PMTiles)
See The pmtiles CLI above for why to install it and other commands (, , ). To convert MBTiles to PMTiles:
showverifyextractbash
pmtiles convert input.mbtiles output.pmtilesThe following tools generate tiles from source data (GeoJSON, OSM, Shapefile, PostGIS, etc.). They output PMTiles or MBTiles; if MBTiles, run to get PMTiles.
pmtiles convert安装理由和其他命令(、、)见上文pmtiles CLI章节,转换MBTiles到PMTiles的命令:
showverifyextractbash
pmtiles convert input.mbtiles output.pmtiles以下工具可以从源数据生成瓦片(GeoJSON、OSM、Shapefile、PostGIS等),输出PMTiles或MBTiles,如果输出MBTiles,运行得到PMTiles即可。
pmtiles convertPlanetiler (OSM / OpenMapTiles schema)
Planetiler(OSM / OpenMapTiles schema)
Planetiler reads OpenStreetMap (or other sources) and outputs PMTiles or MBTiles in the OpenMapTiles schema.
bash
undefinedPlanetiler可以读取OpenStreetMap(或其他数据源),输出符合OpenMapTiles schema的PMTiles或MBTiles。
bash
undefinedExample: build a PMTiles file for a region (e.g. from a .osm.pbf download)
示例:为某个区域生成PMTiles文件(例如从下载的.osm.pbf文件生成)
java -jar planetiler.jar --area=monaco --output=monaco.pmtiles
See Planetiler docs for area names, custom sources, and schema options. Output is a single .pmtiles file you can upload to S3/R2/static host.java -jar planetiler.jar --area=monaco --output=monaco.pmtiles
查看Planetiler文档了解区域名称、自定义数据源和schema选项,输出的单个.pmtiles文件可以直接上传到S3/R2/静态主机。tippecanoe
tippecanoe
tippecanoe generates vector tiles from source formats: GeoJSON, Flatgeobuf, CSV. From v2.17 onward it can output PMTiles directly (). You can also output MBTiles and convert with .
-o output.pmtilespmtiles convertbash
undefinedtippecanoe可以从多种源格式生成矢量瓦片:GeoJSON、Flatgeobuf、CSV。从v2.17版本开始可以直接输出PMTiles(),你也可以输出MBTiles再用转换。
-o output.pmtilespmtiles convertbash
undefinedDirect PMTiles output (v2.17+)
直接输出PMTiles(v2.17+)
tippecanoe -zg -o output.pmtiles input.geojson
tippecanoe -zg -o output.pmtiles input.geojson
Or MBTiles then convert: tippecanoe -o output.mbtiles -z 14 input.geojson && pmtiles convert output.mbtiles output.pmtiles
或者输出MBTiles再转换:tippecanoe -o output.mbtiles -z 14 input.geojson && pmtiles convert output.mbtiles output.pmtiles
undefinedundefinedogr2ogr (GDAL)
ogr2ogr (GDAL)
GDAL’s generates tiles from many geospatial formats (Shapefile, PostGIS, GeoJSON, etc.) and can write MBTiles or PMTiles (GDAL 3.8+). Best for smaller datasets; tippecanoe is more efficient for large vector tile sets.
ogr2ogrGDAL的可以从多种地理空间格式(Shapefile、PostGIS、GeoJSON等)生成瓦片,支持写入MBTiles或PMTiles(GDAL 3.8+)。适合小型数据集,大型矢量瓦片集使用tippecanoe效率更高。
ogr2ogrRaster and raster-dem PMTiles
栅格和raster-dem PMTiles
PMTiles supports raster tiles (PNG/JPEG, e.g. satellite or pre-rendered imagery) and raster-dem (elevation/terrain, e.g. Terrarium or Mapbox encoding). Use tools that produce raster or raster-dem PMTiles; the same protocol and hosting apply. In the style use for imagery or with (or ) for terrain—see MapLibre Integration above for an example.
type: 'raster'type: 'raster-dem'"encoding": "terrarium""mapbox"PMTiles支持栅格瓦片(PNG/JPEG,例如卫星影像或预渲染影像)和raster-dem(高程/地形,例如Terrarium或Mapbox编码)。使用可生成栅格或raster-dem PMTiles的工具即可,协议和托管方式和前文一致。样式中影像使用,地形使用搭配(或),示例见上文MapLibre集成章节。
type: 'raster'type: 'raster-dem'"encoding": "terrarium""mapbox"Overture Maps
Overture Maps
Overture Maps publishes global open map data. Some providers distribute Overture-derived data as PMTiles (e.g. for buildings, places, transportation). You can also build PMTiles from Overture data with Planetiler or other pipelines. Use the PMTiles URL in your MapLibre style as above.
Overture Maps发布全球开放地图数据,部分服务商提供衍生自Overture的PMTiles格式数据(例如建筑、地点、交通数据)。你也可以使用Planetiler或其他流水线从Overture数据构建PMTiles,按上文方式在MapLibre样式中使用PMTiles URL即可。
Performance Tips
性能优化提示
- CDN — Serve the .pmtiles file from a CDN (CloudFront, Cloudflare) so range requests are fast globally.
- Compression — PMTiles stores tiles compressed; the library handles decompression. Ensure the server does not double-compress (e.g. gzip) the whole file in a way that breaks range requests.
- Multiple files — For very large coverage, split by region into several .pmtiles files and switch the source URL or use multiple sources by bounds.
- Caching — Set strong cache headers on the file; the browser and CDN will cache range responses.
- CDN — 从CDN(CloudFront、Cloudflare)分发.pmtiles文件,这样全球范围的范围请求都可以快速响应。
- 压缩 — PMTiles内部已经对瓦片做了压缩,库会处理解压逻辑,确保服务器不会对整个文件做二次压缩(例如gzip),否则会破坏范围请求。
- 多文件拆分 — 如果覆盖范围非常大,按区域拆分为多个.pmtiles文件,根据边界切换数据源URL或使用多个数据源。
- 缓存 — 给文件设置强缓存头,浏览器和CDN会缓存范围请求的响应。
Related Skills
相关技能
- maplibre-tile-sources — Choosing tile sources (OpenFreeMap, MapTiler, PMTiles, self-hosted); glyphs and sprites.
- maplibre-style-patterns — Layer and paint configuration for vector sources (including PMTiles-backed sources). (Not yet in repo.)
- maplibre-tile-sources — 选择瓦片数据源(OpenFreeMap、MapTiler、PMTiles、自托管);字体和精灵图配置。
- maplibre-style-patterns — 矢量数据源(包括PMTiles支持的数据源)的图层和样式配置。(暂未加入仓库)
References
参考资料
- MapLibre GL JS: PMTiles source and protocol — Official example: adding the protocol, vector and raster sources.
- PMTiles for MapLibre GL (Protomaps) — Setup, vector/raster/raster-dem (Terrarium) sources, React usage.
- PMTiles — Format and protocol
- pmtiles CLI — Simplest way to create PMTiles (,
convert,show,verify)extract - Planetiler — OSM → PMTiles/MBTiles
- MapLibre GL JS — Style spec and API
- MapLibre GL JS: PMTiles source and protocol — 官方示例:添加协议、矢量和栅格数据源配置。
- PMTiles for MapLibre GL(Protomaps官方) — 配置、矢量/栅格/raster-dem(Terrarium)数据源、React使用说明。
- PMTiles — 格式和协议说明。
- pmtiles CLI — 生成PMTiles的最简方式(、
convert、show、verify命令)。extract - Planetiler — OSM转PMTiles/MBTiles工具。
- MapLibre GL JS — 样式规范和API文档。