学习目标掌握添加Canvas源的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念向地图添加Canvas数据源。 完 整 代 码代码示例//Animation from https://javascript.tutorials24x7.com/blog/how-to-draw-animated-circles-in-html5-canvasconstcanvasdocument.getElementById(canvasID);constctxcanvas.getContext(2d);canvas.style.displaynone;constcircles[];constradius20;functionCircle(x,y,dx,dy,radius,color){this.xx;this.yy;this.dxdx;this.dydy;this.radiusradius;this.drawfunction(){ctx.beginPath();ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);ctx.strokeStylecolor;ctx.stroke();};this.updatefunction(){if(this.xthis.radius400||this.x-this.radius0){this.dx-this.dx;}if(this.ythis.radius400||this.y-this.radius0){this.dy-this.dy;}this.xthis.dx;this.ythis.dy;this.draw();};}for(leti0;i5;i){constcolor#${(0x1000000Math.random()*0xffffff).toString(16).substr(1,6)};constxMath.random()*(400-radius*2)radius;constyMath.random()*(400-radius*2)radius;constdx(Math.random()-0.5)*2;constdy(Math.random()-0.5)*2;circles.push(newCircle(x,y,dx,dy,radius,color));}functionanimate(){requestAnimationFrame(animate);ctx.clearRect(0,0,400,400);for(letr0;r5;r){circles[r].update();}}animate();constmapnewmaplibregl.Map({container:map,zoom:5,minZoom:4,center:[95.899147,18.088694],style:https://demotiles.maplibre.org/style.json});map.on(load,(){map.addSource(canvas-source,{type:canvas,canvas:canvasID,coordinates:[[91.4461,21.5006],[100.3541,21.5006],[100.3541,13.9706],[91.4461,13.9706]],// 如果Canvas源是动画的设置为true。如果Canvas是静态的设置为false以提高性能。animate:true});map.addLayer({id:canvas-layer,type:raster,source:canvas-source});});代码示例!DOCTYPEhtmlhtmllangenheadtitleAdd a canvas 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/headbodycanvasidcanvasIDwidth400height400Canvas not supported/canvasdividmap/divscript//Animation from https://javascript.tutorials24x7.com/blog/how-to-draw-animated-circles-in-html5-canvasconstcanvasdocument.getElementById(canvasID);constctxcanvas.getContext(2d);canvas.style.displaynone;constcircles[];constradius20;functionCircle(x,y,dx,dy,radius,color){this.xx;this.yy;this.dxdx;this.dydy;this.radiusradius;this.drawfunction(){ctx.beginPath();ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);ctx.strokeStylecolor;ctx.stroke();};this.updatefunction(){if(this.xthis.radius400||this.x-this.radius0){this.dx-this.dx;}if(this.ythis.radius400||this.y-this.radius0){this.dy-this.dy;}this.xthis.dx;this.ythis.dy;this.draw();};}for(leti0;i5;i){constcolor#${(0x1000000Math.random()*0xffffff).toString(16).substr(1,6)};constxMath.random()*(400-radius*2)radius;constyMath.random()*(400-radius*2)radius;constdx(Math.random()-0.5)*2;constdy(Math.random()-0.5)*2;circles.push(newCircle(x,y,dx,dy,radius,color));}functionanimate(){requestAnimationFrame(animate);ctx.clearRect(0,0,400,400);for(letr0;r5;r){circles[r].update();}}animate();constmapnewmaplibregl.Map({container:map,zoom:5,minZoom:4,center:[95.899147,18.088694],style:https://demotiles.maplibre.org/style.json});map.on(load,(){map.addSource(canvas-source,{type:canvas,canvas:canvasID,coordinates:[[91.4461,21.5006],[100.3541,21.5006],[100.3541,13.9706],[91.4461,13.9706]],// 如果画布源是动画的则设置为true。如果画布是静态的应将animate设置为false以提高性能。animate:true});map.addLayer({id:canvas-layer,type:raster,source:canvas-source});});/script/body/html 代码解析1. 创建Canvas动画创建隐藏的Canvas元素实现5个彩色圆形的动画效果Circle类定义圆形的位置、速度、半径和颜色animate函数使用requestAnimationFrame实现平滑动画圆形到达边界时反弹2. 初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例中心点设置在缅甸附近。3. 添加Canvas数据源在map.load事件中添加canvas类型数据源type: canvas: 指定为Canvas源canvas: Canvas元素IDcoordinates: 地理坐标数组定义Canvas在地图上的位置animate: true: 启用动画同步4. 添加栅格图层创建raster类型图层引用Canvas数据源。⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstylestring是地图样式URLcenter[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0Canvas源配置属性类型说明typestring必须为 ‘canvas’canvasstring/HTMLCanvasElementCanvas元素ID或对象coordinatesarray四角地理坐标数组 [左下, 右下, 右上, 左上]animateboolean是否同步动画默认false 效果说明运行代码后地图显示缅甸区域中心点 95.90°E, 18.09°NCanvas动画5个彩色圆形叠加在指定地理区域圆形在Canvas边界内反弹移动用户可正常交互拖拽、缩放、旋转 常 见 问 题Q1: Canvas坐标和地理坐标如何对应A:coordinates数组定义Canvas四角对应的地理坐标按顺序左下、右下、右上、左上。Q2: animate属性有什么作用A:设置为true时地图会自动监听Canvas的变化并更新显示。Q3: 如何更新Canvas内容A:直接操作Canvas上下文即可地图会自动同步需设置animate: true。 练习任务基础练习修改圆形数量和颜色进阶挑战添加交互功能点击地图添加新圆形拓展思考如何实现Canvas内容的动态更新 最佳实践性能优化: 静态Canvas设置animate: false动态Canvas设置animate: true坐标配置: 确保coordinates顺序正确左下、右下、右上、左上隐藏Canvas: 使用CSS隐藏原始Canvas元素动画优化: 使用requestAnimationFrame确保流畅动画 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏
MapLibre GL JS第29课：添加Canvas源
发布时间：2026/5/31 0:58:18
学习目标掌握添加Canvas源的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念向地图添加Canvas数据源。 完 整 代 码代码示例//Animation from https://javascript.tutorials24x7.com/blog/how-to-draw-animated-circles-in-html5-canvasconstcanvasdocument.getElementById(canvasID);constctxcanvas.getContext(2d);canvas.style.displaynone;constcircles[];constradius20;functionCircle(x,y,dx,dy,radius,color){this.xx;this.yy;this.dxdx;this.dydy;this.radiusradius;this.drawfunction(){ctx.beginPath();ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);ctx.strokeStylecolor;ctx.stroke();};this.updatefunction(){if(this.xthis.radius400||this.x-this.radius0){this.dx-this.dx;}if(this.ythis.radius400||this.y-this.radius0){this.dy-this.dy;}this.xthis.dx;this.ythis.dy;this.draw();};}for(leti0;i5;i){constcolor#${(0x1000000Math.random()*0xffffff).toString(16).substr(1,6)};constxMath.random()*(400-radius*2)radius;constyMath.random()*(400-radius*2)radius;constdx(Math.random()-0.5)*2;constdy(Math.random()-0.5)*2;circles.push(newCircle(x,y,dx,dy,radius,color));}functionanimate(){requestAnimationFrame(animate);ctx.clearRect(0,0,400,400);for(letr0;r5;r){circles[r].update();}}animate();constmapnewmaplibregl.Map({container:map,zoom:5,minZoom:4,center:[95.899147,18.088694],style:https://demotiles.maplibre.org/style.json});map.on(load,(){map.addSource(canvas-source,{type:canvas,canvas:canvasID,coordinates:[[91.4461,21.5006],[100.3541,21.5006],[100.3541,13.9706],[91.4461,13.9706]],// 如果Canvas源是动画的设置为true。如果Canvas是静态的设置为false以提高性能。animate:true});map.addLayer({id:canvas-layer,type:raster,source:canvas-source});});代码示例!DOCTYPEhtmlhtmllangenheadtitleAdd a canvas 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/headbodycanvasidcanvasIDwidth400height400Canvas not supported/canvasdividmap/divscript//Animation from https://javascript.tutorials24x7.com/blog/how-to-draw-animated-circles-in-html5-canvasconstcanvasdocument.getElementById(canvasID);constctxcanvas.getContext(2d);canvas.style.displaynone;constcircles[];constradius20;functionCircle(x,y,dx,dy,radius,color){this.xx;this.yy;this.dxdx;this.dydy;this.radiusradius;this.drawfunction(){ctx.beginPath();ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);ctx.strokeStylecolor;ctx.stroke();};this.updatefunction(){if(this.xthis.radius400||this.x-this.radius0){this.dx-this.dx;}if(this.ythis.radius400||this.y-this.radius0){this.dy-this.dy;}this.xthis.dx;this.ythis.dy;this.draw();};}for(leti0;i5;i){constcolor#${(0x1000000Math.random()*0xffffff).toString(16).substr(1,6)};constxMath.random()*(400-radius*2)radius;constyMath.random()*(400-radius*2)radius;constdx(Math.random()-0.5)*2;constdy(Math.random()-0.5)*2;circles.push(newCircle(x,y,dx,dy,radius,color));}functionanimate(){requestAnimationFrame(animate);ctx.clearRect(0,0,400,400);for(letr0;r5;r){circles[r].update();}}animate();constmapnewmaplibregl.Map({container:map,zoom:5,minZoom:4,center:[95.899147,18.088694],style:https://demotiles.maplibre.org/style.json});map.on(load,(){map.addSource(canvas-source,{type:canvas,canvas:canvasID,coordinates:[[91.4461,21.5006],[100.3541,21.5006],[100.3541,13.9706],[91.4461,13.9706]],// 如果画布源是动画的则设置为true。如果画布是静态的应将animate设置为false以提高性能。animate:true});map.addLayer({id:canvas-layer,type:raster,source:canvas-source});});/script/body/html 代码解析1. 创建Canvas动画创建隐藏的Canvas元素实现5个彩色圆形的动画效果Circle类定义圆形的位置、速度、半径和颜色animate函数使用requestAnimationFrame实现平滑动画圆形到达边界时反弹2. 初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例中心点设置在缅甸附近。3. 添加Canvas数据源在map.load事件中添加canvas类型数据源type: canvas: 指定为Canvas源canvas: Canvas元素IDcoordinates: 地理坐标数组定义Canvas在地图上的位置animate: true: 启用动画同步4. 添加栅格图层创建raster类型图层引用Canvas数据源。⚙️ 参数说明参数类型必填说明containerstring是地图容器IDstylestring是地图样式URLcenter[number, number]否初始中心点默认[0, 0]zoomnumber否初始缩放级别默认0Canvas源配置属性类型说明typestring必须为 ‘canvas’canvasstring/HTMLCanvasElementCanvas元素ID或对象coordinatesarray四角地理坐标数组 [左下, 右下, 右上, 左上]animateboolean是否同步动画默认false 效果说明运行代码后地图显示缅甸区域中心点 95.90°E, 18.09°NCanvas动画5个彩色圆形叠加在指定地理区域圆形在Canvas边界内反弹移动用户可正常交互拖拽、缩放、旋转 常 见 问 题Q1: Canvas坐标和地理坐标如何对应A:coordinates数组定义Canvas四角对应的地理坐标按顺序左下、右下、右上、左上。Q2: animate属性有什么作用A:设置为true时地图会自动监听Canvas的变化并更新显示。Q3: 如何更新Canvas内容A:直接操作Canvas上下文即可地图会自动同步需设置animate: true。 练习任务基础练习修改圆形数量和颜色进阶挑战添加交互功能点击地图添加新圆形拓展思考如何实现Canvas内容的动态更新 最佳实践性能优化: 静态Canvas设置animate: false动态Canvas设置animate: true坐标配置: 确保coordinates顺序正确左下、右下、右上、左上隐藏Canvas: 使用CSS隐藏原始Canvas元素动画优化: 使用requestAnimationFrame确保流畅动画 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏
