当前位置：首页 > news >正文

MapLibre GL JS第29课：添加Canvas源

news 2026/5/31 1:05:16

📌 学习目标

掌握添加Canvas源的实现方法
理解相关API的使用
能够独立完成类似功能开发

🎯 核心概念

向地图添加Canvas数据源。

💻 完整代码

代码示例

//Animation from https://javascript.tutorials24x7.com/blog/how-to-draw-animated-circles-in-html5-canvasconstcanvas=document.getElementById('canvasID');constctx=canvas.getContext('2d');canvas.style.display='none';constcircles=[];constradius=20;functionCircle(x,y,dx,dy,radius,color){this.x=x;this.y=y;this.dx=dx;this.dy=dy;this.radius=radius;this.draw=function(){ctx.beginPath();ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);ctx.strokeStyle=color;ctx.stroke();};this.update=function(){if(this.x+this.radius>400||this.x-this.radius<0){this.dx=-this.dx;}if(this.y+this.radius>400||this.y-this.radius<0){this.dy=-this.dy;}this.x+=this.dx;this.y+=this.dy;this.draw();};}for(leti=0;i<5;i++){constcolor=`#${(0x1000000+Math.random()*0xffffff).toString(16).substr(1,6)}`;constx=Math.random()*(400-radius*2)+radius;consty=Math.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(letr=0;r<5;r++){circles[r].update();}}animate();constmap=newmaplibregl.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'});});

代码示例

<!DOCTYPEhtml><htmllang="en"><head><title>Add a canvas source</title><metaproperty="og:description"content="向地图添加画布源。"/><metaproperty="og:created"content="2025-06-25"/><metacharset='utf-8'><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel='stylesheet'href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css'/><scriptsrc='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js'></script><style>body{margin:0;padding:0;}html, body, #map{height:100%;}</style></head><body><canvasid="canvasID"width="400"height="400">Canvas not supported</canvas><divid="map"></div><script>//Animation from https://javascript.tutorials24x7.com/blog/how-to-draw-animated-circles-in-html5-canvasconstcanvas=document.getElementById('canvasID');constctx=canvas.getContext('2d');canvas.style.display='none';constcircles=[];constradius=20;functionCircle(x,y,dx,dy,radius,color){this.x=x;this.y=y;this.dx=dx;this.dy=dy;this.radius=radius;this.draw=function(){ctx.beginPath();ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);ctx.strokeStyle=color;ctx.stroke();};this.update=function(){if(this.x+this.radius>400||this.x-this.radius<0){this.dx=-this.dx;}if(this.y+this.radius>400||this.y-this.radius<0){this.dy=-this.dy;}this.x+=this.dx;this.y+=this.dy;this.draw();};}for(leti=0;i<5;i++){constcolor=`#${(0x1000000+Math.random()*0xffffff).toString(16).substr(1,6)}`;constx=Math.random()*(400-radius*2)+radius;consty=Math.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(letr=0;r<5;r++){circles[r].update();}}animate();constmap=newmaplibregl.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元素ID
coordinates: 地理坐标数组，定义Canvas在地图上的位置
animate: true: 启用动画同步

4. 添加栅格图层

创建raster类型图层引用Canvas数据源。

⚙️ 参数说明

参数	类型	必填	说明
container	string	是	地图容器ID
style	string	是	地图样式URL
center	[number, number]	否	初始中心点，默认[0, 0]
zoom	number	否	初始缩放级别，默认0

Canvas源配置

属性	类型	说明
type	string	必须为 ‘canvas’
canvas	string/HTMLCanvasElement	Canvas元素ID或对象
coordinates	array	四角地理坐标数组 [左下, 右下, 右上, 左上]
animate	boolean	是否同步动画（默认false）