Loading...
Loading...
Compare original and translation side by side
type: 'vector'type: 'raster'type: 'raster-dem'.pmtilesRangetype: 'vector'type: 'raster'type: 'raster-dem'.pmtilesRangepmtiles://https://npm install pmtilesimport * 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'));sources.tileslayerssource: 'tiles'"source-layer": "layerName"layerNamesource-layerurlpmtiles://https://...type: 'raster'type: 'raster-dem'"encoding": "terrarium""mapbox"terrain"elevation": {
"type": "raster-dem",
"url": "pmtiles://https://example.com/elevation.pmtiles",
"encoding": "terrarium"
}maplibregl.addProtocol('pmtiles', protocol.tile)maplibregl.removeProtocol('pmtiles')pmtiles://https://npm install pmtilesimport * 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'));sources.tileslayerssource: 'tiles'"source-layer": "layerName"layerNamesource-layerurlpmtiles://https://...type: 'raster'type: 'raster-dem'"encoding": "terrarium""mapbox"terrain"elevation": {
"type": "raster-dem",
"url": "pmtiles://https://example.com/elevation.pmtiles",
"encoding": "terrarium"
}maplibregl.addProtocol('pmtiles', protocol.tile)maplibregl.removeProtocol('pmtiles')Cache-ControlAccept-Ranges: bytesRangeAccess-Control-Allow-Origin: *Access-Control-Allow-Headers: RangeCache-Control: public, max-age=31536000Cache-ControlAccept-Ranges: bytesRangeAccess-Control-Allow-Origin: *Access-Control-Allow-Headers: RangeCache-Control: public, max-age=31536000pmtiles convert in.mbtiles out.pmtilespmtiles show <file>pmtiles verify <file>pmtiles extractprotomaps/go-pmtilespmtiles convertpmtiles convert in.mbtiles out.pmtilespmtiles show <file>pmtiles verify <file>pmtiles extractprotomaps/go-pmtilespmtiles convertpmtiles convertpmtiles convertshowverifyextractpmtiles convert input.mbtiles output.pmtilespmtiles convertshowverifyextractpmtiles convert input.mbtiles output.pmtilespmtiles convertundefinedundefined
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.
查看Planetiler文档了解区域名称、自定义数据源和schema选项,输出的单个.pmtiles文件可以直接上传到S3/R2/静态主机。-o output.pmtilespmtiles convertundefined-o output.pmtilespmtiles convertundefinedundefinedundefinedogr2ogrogr2ogrtype: 'raster'type: 'raster-dem'"encoding": "terrarium""mapbox"type: 'raster'type: 'raster-dem'"encoding": "terrarium""mapbox"convertshowverifyextractconvertshowverifyextract