MapLibre GL JS第44课：生成并添加缺失图标

发布时间：2026/6/11 11:06:53

学习目标掌握生成并添加缺失图标的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念生成并添加缺失的图标到地图即样式中配置的图标缺失时用map的styleimagemissing事件监听并重新定义图标。 完 整 代 码代码示例constmapnewmaplibregl.Map({container:map,style:https://demotiles.maplibre.org/style.json,});map.on(styleimagemissing,(e){constide.id;// 缺失图像的ID// 检查这个缺失的图标是否是此函数可以生成的constprefixsquare-rgb-;if(id.indexOf(prefix)!0)return;// 从ID中提取颜色constrgbid.replace(prefix,).split(,).map(Number);constwidth64;// 图像将是64x64像素constbytesPerPixel4;// 每个像素由4个字节表示红、绿、蓝和透明度constdatanewUint8Array(width*width*bytesPerPixel);for(letx0;xwidth;x){for(lety0;ywidth;y){constoffset(y*widthx)*bytesPerPixel;data[offset0]rgb[0];// 红色data[offset1]rgb[1];// 绿色data[offset2]rgb[2];// 蓝色data[offset3]255;// 透明度}}map.addImage(id,{width,height:width,data});});map.on(load,(){map.addSource(points,{type:geojson,data:{type:FeatureCollection,features:[{type:Feature,geometry:{type:Point,coordinates:[0,0]},properties:{color:255,0,0}},{type:Feature,geometry:{type:Point,coordinates:[50,0]},properties:{color:255,209,28}},{type:Feature,geometry:{type:Point,coordinates:[-50,0]},properties:{color:242,127,32}}]}});map.addLayer({id:points,type:symbol,source:points,layout:{icon-image:[concat,square-rgb-,[get,color]]}});});代码示例!DOCTYPEhtmlhtmllangenheadtitleGenerate and add a missing icon to the map/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,style:https://demotiles.maplibre.org/style.json,});map.on(styleimagemissing,(e){constide.id;// 缺失图像的ID// 检查这个缺失的图标是否是此函数可以生成的constprefixsquare-rgb-;if(id.indexOf(prefix)!0)return;// 从ID中提取颜色constrgbid.replace(prefix,).split(,).map(Number);constwidth64;// 图像将是64像素的正方形constbytesPerPixel4;// 每个像素由4个字节表示红、绿、蓝和透明度。constdatanewUint8Array(width*width*bytesPerPixel);for(letx0;xwidth;x){for(lety0;ywidth;y){constoffset(y*widthx)*bytesPerPixel;data[offset0]rgb[0];// 红色data[offset1]rgb[1];// 绿色data[offset2]rgb[2];// 蓝色data[offset3]255;// 透明度}}map.addImage(id,{width,height:width,data});});map.on(load,(){map.addSource(points,{type:geojson,data:{type:FeatureCollection,features:[{type:Feature,geometry:{type:Point,coordinates:[0,0]},properties:{color:255,0,0}},{type:Feature,geometry:{type:Point,coordinates:[50,0]},properties:{color:255,209,28}},{type:Feature,geometry:{type:Point,coordinates:[-50,0]},properties:{color:242,127,32}}]}});map.addLayer({id:points,type:symbol,source:points,layout:{icon-image:[concat,square-rgb-,[get,color]]}});});/script/body/html 代码解析初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例的核心特色是展示如何利用styleimagemissing事件动态生成缺失的图标。关键配置项container: 地图容器的 DOM 元素 IDstyle: 使用 MapLibre 官方样式https://demotiles.maplibre.org/style.jsonstyleimagemissing 事件处理map.on(styleimagemissing,(e){constide.id;// 缺失图像的 ID// 检查是否是可生成的图标constprefixsquare-rgb-;if(id.indexOf(prefix)!0)return;// 从 ID 中提取颜色值constrgbid.replace(prefix,).split(,).map(Number);// 生成 64x64 像素的纯色图像constwidth64;constbytesPerPixel4;constdatanewUint8Array(width*width*bytesPerPixel);for(letx0;xwidth;x){for(lety0;ywidth;y){constoffset(y*widthx)*bytesPerPixel;data[offset0]rgb[0];// 红色data[offset1]rgb[1];// 绿色data[offset2]rgb[2];// 蓝色data[offset3]255;// 透明度}}map.addImage(id,{width,height:width,data});});动态图标引用map.addLayer({id:points,type:symbol,source:points,layout:{icon-image:[concat,square-rgb-,[get,color]]}});⚙️ 参数说明参数类型必填默认值说明containerstring是-地图容器元素的 IDstylestring/object是-地图样式 URL 或内联样式对象styleimagemissing 事件属性类型说明idstring缺失图像的 ID图标 ID 格式格式示例说明square-rgb-r,g,bsquare-rgb-255,0,0红色方块图标 效果说明运行代码后地图上会显示三个彩色方块图标红色方块: 坐标[0, 0]颜色255,0,0纯红色黄色方块: 坐标[50, 0]颜色255,209,28金黄色橙色方块: 坐标[-50, 0]颜色242,127,32橙色工作流程:图层引用图标square-rgb-{color}地图发现图标不存在触发styleimagemissing事件事件处理器解析颜色值生成对应颜色的方块图像将生成的图像添加到地图图层正常显示 常 见 问 题Q1: styleimagemissing 事件何时触发A:当地图尝试使用一个未注册的图像时触发通常在渲染符号图层时。Q2: 如何避免重复生成A:事件只会为每个缺失的图像 ID 触发一次MapLibre 会缓存已注册的图像。Q3: 可以生成复杂图像吗A:可以。除了纯色方块还可以生成渐变、图案等任意像素数据。Q4: 性能影响如何A:生成图像会占用 CPU 资源但只在缺失时生成一次后续会缓存。 练习任务基础练习修改颜色值创建不同颜色的方块进阶挑战生成渐变色方块而不是纯色方块拓展思考如何生成带边框的方块图标 最佳实践图标命名规范: 使用统一的前缀标识可生成的图标参数验证: 在生成前验证 ID 格式和颜色值范围性能优化: 限制生成图像的最大尺寸错误处理: 添加颜色值越界的处理缓存策略: 考虑缓存常用颜色的图标测试覆盖: 测试各种颜色值和边界情况 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏