学习目标掌握PMTiles源和协议的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念使用PMTiles插件和协议呈现地图。 完 整 代 码代码示例// 将PMTiles插件添加到maplibregl全局对象constprotocolnewpmtiles.Protocol();maplibregl.addProtocol(pmtiles,protocol.tile);constPMTILES_URLhttps://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles;constpnewpmtiles.PMTiles(PMTILES_URL);// 这样可以在JS代码和地图渲染器之间共享一个实例protocol.add(p);// 首先获取头部信息以便获取地图的中心点经纬度p.getHeader().then(h{constmapnewmaplibregl.Map({container:map,zoom:h.maxZoom-2,center:[h.centerLon,h.centerLat],style:{version:8,sources:{example_source:{type:vector,url:pmtiles://${PMTILES_URL},attribution:© a hrefhttps://openstreetmap.org/copyrightOpenStreetMap/a}},layers:[{id:buildings,source:example_source,source-layer:landuse,type:fill,paint:{fill-color:steelblue}},{id:roads,source:example_source,source-layer:roads,type:line,paint:{line-color:black}},{id:mask,source:example_source,source-layer:mask,type:fill,paint:{fill-color:white}}]}});});代码示例!DOCTYPEhtmlhtmllangenheadtitlePMTiles source and protocol/titlemetapropertyog:descriptioncontent使用 PMTiles 插件和协议来展示地图。/metapropertyog:createdcontent2025-06-25/metacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1linkrelstylesheethrefhttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.css/scriptsrchttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.js/scriptscriptsrchttps://unpkg.com/pmtiles3.2.0/dist/pmtiles.js/scriptstylebody{margin:0;padding:0;}html, body, #map{height:100%;}/style/headbodydividmap/divscript// 将PMTiles插件添加到maplibregl全局对象constprotocolnewpmtiles.Protocol();maplibregl.addProtocol(pmtiles,protocol.tile);constPMTILES_URLhttps://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles;constpnewpmtiles.PMTiles(PMTILES_URL);// 这样可以在JS代码和地图渲染器之间共享一个实例protocol.add(p);// 我们首先获取头部信息以便获取地图的中心点经纬度p.getHeader().then(h{constmapnewmaplibregl.Map({container:map,zoom:h.maxZoom-2,center:[h.centerLon,h.centerLat],style:{version:8,sources:{example_source:{type:vector,url:pmtiles://${PMTILES_URL},attribution:© a hrefhttps://openstreetmap.org/copyrightOpenStreetMap/a}},layers:[{id:buildings,source:example_source,source-layer:landuse,type:fill,paint:{fill-color:steelblue}},{id:roads,source:example_source,source-layer:roads,type:line,paint:{line-color:black}},{id:mask,source:example_source,source-layer:mask,type:fill,paint:{fill-color:white}}]}});});/script/body/html 代码解析1. 注册PMTiles协议使用maplibregl.addProtocol()注册自定义协议使地图能够解析pmtiles://协议的URL。2. 创建PMTiles实例初始化pmtiles.PMTiles对象并添加到协议中实现JS代码和地图渲染器之间的实例共享。3. 获取PMTiles头部信息调用p.getHeader()获取元数据中心点、缩放级别范围等。4. 初始化地图使用头部信息设置地图初始视图配置完整的自定义样式对象。5. 配置PMTiles数据源在style.sources中定义矢量数据源使用pmtiles://协议URL。6. 添加图层创建多个图层buildings、roads、mask显示不同类型的地理要素。⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstyleobject是完整的样式对象center[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0PMTiles源配置属性类型说明typestring必须为 ‘vector’urlstringpmtiles://协议的URLattributionstring版权归属信息 效果说明运行代码后地图显示意大利佛罗伦萨区域根据PMTiles文件自动定位蓝色填充显示土地利用区域黑色线条显示道路网络白色遮罩层处理边界用户可正常交互拖拽、缩放、旋转 常 见 问 题Q1: 什么是PMTilesA:PMTiles是一种单文件瓦片格式将所有缩放级别的瓦片存储在一个文件中便于分发和存储。Q2: 需要额外引入什么库A:需要引入pmtiles库来支持PMTiles协议。Q3: PMTiles和MBTiles有什么区别A:PMTiles是纯文件格式无需数据库MBTiles是SQLite数据库格式。 练习任务基础练习修改PMTiles文件URL加载其他区域数据进阶挑战添加更多图层样式如建筑物、水体等拓展思考如何实现本地PMTiles文件加载 最佳实践协议注册: 在创建地图前注册PMTiles协议实例共享: 通过protocol.add()共享实例避免重复请求异步处理: 使用Promise获取头部信息后再创建地图版权信息: 正确设置attribution属性 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏