MapLibre GL JS第63课：动画化标记

原创于 2026-06-22 12:16:59 发布 · 236 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#Mapbox #MapLibre GL JS #Marker #Map

MapLibre GL JS教程专栏收录该内容

64 篇文章

订阅专栏

📌 学习目标

掌握动画化标记的实现方法
理解相关API的使用
能够独立完成类似功能开发

🎯 核心概念

通过在每帧更新标记位置来动画化标记。

💻 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Animate a marker</title>
    <meta property="og:description" content="通过在每一帧更新位置来动画化标记的位置。" />
    <meta property="og:created" content="2006-06-25" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css' />
    <script src='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>
<div id="map"></div>
<script>
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://demotiles.maplibre.org/style.json',
        center: [0, 0],
        zoom: 2
    });

    const marker = new maplibregl.Marker();

    function animateMarker(timestamp) {
        const radius = 20;

        // 根据动画时间戳将数据更新到新位置。
        // 表达式 `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(): 更新标记位置

⚙️ 参数说明

参数	类型	必填	说明
radius	number	是	圆形运动半径（度数）
speed	number	是	动画速度控制（timestamp除数）
timestamp	number	是	requestAnimationFrame传入的时间戳

🎨 效果说明

在这里插入图片描述

运行代码后，地图显示全球视图，标记以20度为半径围绕地图中心（0, 0）做匀速圆周运动。动画平滑流畅，标记位置每帧更新一次。

💡 常见问题

Q1: 动画不流畅？
A: 检查以下几点：

确认使用requestAnimationFrame而非setInterval
减少每一帧的计算复杂度
避免在动画回调中进行DOM操作

Q2: 如何停止动画？
A: 使用cancelAnimationFrame停止动画：

const animationId = requestAnimationFrame(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
]);