学习目标掌握动画化标记的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念通过在每帧更新标记位置来动画化标记。 完 整 代 码!DOCTYPEhtmlhtmllangenheadtitleAnimate a marker/titlemetapropertyog:descriptioncontent通过在每一帧更新位置来动画化标记的位置。/metapropertyog:createdcontent2006-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,center:[0,0],zoom:2});constmarkernewmaplibregl.Marker();functionanimateMarker(timestamp){constradius20;// 根据动画时间戳将数据更新到新位置。// 表达式 timestamp / 1000 中的除数控制动画速度。marker.setLngLat([Math.cos(timestamp/1000)*radius,Math.sin(timestamp/1000)*radius]);// 确保将其添加到地图。如果已经添加调用此方法是安全的。marker.addTo(map);// 请求动画的下一帧。requestAnimationFrame(animateMarker);}// 开始动画。requestAnimationFrame(animateMarker);/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例配置了以赤道为中心的全球视图。2. 关键配置项requestAnimationFrame: 浏览器原生动画API实现60fps流畅动画Math.cos/sin: 使用三角函数计算圆形运动轨迹timestamp: 动画时间戳用于计算当前位置setLngLat(): 更新标记位置⚙️ 参数说明参数类型必填说明radiusnumber是圆形运动半径度数speednumber是动画速度控制timestamp除数timestampnumber是requestAnimationFrame传入的时间戳 效果说明运行代码后地图显示全球视图标记以20度为半径围绕地图中心0, 0做匀速圆周运动。动画平滑流畅标记位置每帧更新一次。 常 见 问 题Q1: 动画不流畅A:检查以下几点确认使用requestAnimationFrame而非setInterval减少每一帧的计算复杂度避免在动画回调中进行DOM操作Q2: 如何停止动画A:使用cancelAnimationFrame停止动画constanimationIdrequestAnimationFrame(animateMarker);// 停止动画cancelAnimationFrame(animationId);Q3: 如何实现其他运动轨迹A:修改位置计算逻辑// 直线运动marker.setLngLat([startLng(endLng-startLng)*progress,startLat(endLat-startLat)*progress]);// 椭圆运动marker.setLngLat([Math.cos(timestamp/1000)*radiusX,Math.sin(timestamp/1000)*radiusY]); 练习任务基础练习修改运动半径和速度观察动画效果变化进阶挑战实现直线运动动画拓展思考如何实现带缓动效果的动画综合实践创建一个模拟车辆行驶轨迹的动画 最佳实践动画流畅性: 使用requestAnimationFrame而非setInterval性能优化: 避免在动画回调中进行DOM操作和复杂计算资源管理: 及时取消不再需要的动画避免内存泄漏帧率控制: 考虑使用时间增量而非固定间隔用户体验: 提供开始/暂停控制允许用户控制动画 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏
)
