学习目标掌握添加栅格瓦片源的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念向地图添加栅格瓦片数据源。 完 整 代 码代码示例constmapnewmaplibregl.Map({container:map,// 容器IDstyle:{version:8,sources:{raster-tiles:{type:raster,tiles:[https://tile.openstreetmap.org/{z}/{x}/{y}.png],tileSize:256,minzoom:0,maxzoom:19,attribution:© OpenStreetMap contributors,}},layers:[{id:simple-tiles,type:raster,source:raster-tiles,}],id:blank},center:[0,0],// 初始位置zoom:0// 初始缩放级别});代码示例!DOCTYPEhtmlhtmllangenheadtitleAdd a raster tile source/titlemetapropertyog:descriptioncontent向地图添加第三方栅格源。/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/scriptstylebody{margin:0;padding:0;}html, body, #map{height:100%;}/style/headbodydividmap/divscriptconstmapnewmaplibregl.Map({container:map,// 地图容器idstyle:{version:8,sources:{raster-tiles:{type:raster,tiles:[https://tile.openstreetmap.org/{z}/{x}/{y}.png],tileSize:256,minzoom:0,maxzoom:19,attribution:© OpenStreetMap contributors,}},layers:[{id:simple-tiles,type:raster,source:raster-tiles,}],id:blank},center:[0,0],// 初始位置zoom:0// 初始缩放级别});/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例配置完整的自定义样式对象。2. 配置栅格瓦片源在style.sources中定义栅格瓦片源type: raster: 指定为栅格瓦片源tiles: 瓦片URL模板数组支持{z}/{x}/{y}占位符tileSize: 瓦片大小通常为256minzoom/maxzoom: 缩放级别范围attribution: 版权信息3. 添加栅格图层在style.layers中添加raster类型图层引用栅格数据源。⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstyleobject是完整的样式对象center[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0栅格瓦片源配置属性类型说明typestring必须为 ‘raster’tilesarray瓦片URL模板数组tileSizenumber瓦片像素大小通常256minzoomnumber最小缩放级别maxzoomnumber最大缩放级别attributionstring版权归属信息 效果说明运行代码后地图显示全球视图中心点 [0, 0]缩放级别0使用OpenStreetMap栅格瓦片作为底图用户可正常交互拖拽、缩放、旋转 常 见 问 题Q1: 矢量瓦片和栅格瓦片有什么区别A:矢量瓦片包含矢量数据可以自定义样式栅格瓦片是预先渲染的图片样式固定。Q2: 如何添加多个栅格图层A:定义多个数据源和图层使用minzoom/maxzoom或filter控制显示。Q3: 常用的栅格瓦片服务有哪些A:OpenStreetMap、MapQuest、Stamen、NASA等提供免费或付费的栅格瓦片服务。 练习任务基础练习更换为其他栅格瓦片服务如Stamen进阶挑战添加多个栅格图层实现图层切换拓展思考如何实现自定义栅格瓦片服务 最佳实践版权信息: 必须正确设置attribution属性缩放级别: 合理设置minzoom/maxzoom避免加载不必要的瓦片瓦片大小: 保持tileSize与服务一致通常256跨域处理: 确保瓦片服务支持CORS或使用代理 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏