学习目标掌握添加COG栅格源的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念添加外部云优化GeoTIFFCOG作为数据源。 完 整 代 码代码示例maplibregl.addProtocol(cog,MaplibreCOGProtocol.cogProtocol);constmapnewmaplibregl.Map({container:map,style:https://demotiles.maplibre.org/styles/osm-bright-gl-style/style.json,center:[11.39831,47.26244],zoom:14});map.on(load,(){map.addSource(cogSource,{type:raster,url:cog://https://maplibre.org/maplibre-gl-js/docs/assets/cog.tif,tileSize:256});map.addLayer({id:cogLayer,source:cogSource,type:raster});});代码示例!DOCTYPEhtmlhtmllangenheadtitleAdd a COG raster source/titlemetapropertyog:descriptioncontent添加外部云优化 GeoTIFFCOG作为源。/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/divscriptsrchttps://unpkg.com/geomatico/maplibre-cog-protocol0.5.0/dist/index.js/scriptscriptmaplibregl.addProtocol(cog,MaplibreCOGProtocol.cogProtocol);constmapnewmaplibregl.Map({container:map,style:https://demotiles.maplibre.org/styles/osm-bright-gl-style/style.json,center:[11.39831,47.26244],zoom:14});map.on(load,(){map.addSource(cogSource,{type:raster,url:cog://https://maplibre.org/maplibre-gl-js/docs/assets/cog.tif,tileSize:256});map.addLayer({id:cogLayer,source:cogSource,type:raster});});/script/body/html 代码解析1. 注册COG协议使用maplibregl.addProtocol()注册自定义协议使地图能够解析cog://协议的URL。2. 初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例中心点设置在德国加米施-帕滕基兴附近。3. 添加COG数据源在map.load事件中添加raster类型数据源type: raster: 指定为栅格源url: cog://...: 使用COG协议指定GeoTIFF文件URL4. 添加栅格图层创建raster类型图层引用COG数据源。⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstylestring是地图样式URLcenter[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0COG源配置属性类型说明typestring必须为 ‘raster’urlstringcog://协议的URLtileSizenumber瓦片大小通常256 效果说明运行代码后地图显示德国加米施-帕滕基兴区域中心点 11.40°E, 47.26°NCOG栅格数据叠加在底图上显示用户可正常交互拖拽、缩放、旋转 常 见 问 题Q1: 什么是COGCloud-Optimized GeoTIFFA:COG是一种优化的GeoTIFF格式支持HTTP范围请求可按需加载数据的特定区域和分辨率。Q2: 需要额外引入什么库A:需要引入geomatico/maplibre-cog-protocol库来支持COG协议。Q3: COG和普通GeoTIFF有什么区别A:COG支持分块存储和多级分辨率适合在Web上高效加载大型栅格数据。 练习任务基础练习修改COG文件URL加载其他GeoTIFF数据进阶挑战调整栅格图层的透明度和混合模式拓展思考如何实现COG数据的动态样式调整 最佳实践协议注册: 在创建地图前注册COG协议性能优化: 使用COG格式减少初始加载时间资源管理: 确保正确引入依赖库错误处理: 添加数据加载失败的fallback方案 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏