MapLibre GL JS第74课：缓慢飞到指定位置

📌 学习目标

掌握缓慢飞到位置的实现方法
理解相关API的使用
能够独立完成类似功能开发

🎯 核心概念

使用flyTo和flyOptions缓慢缩放到位置。

💻 完整代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Slowly fly to a location</title>
    <meta property="og:description" content="使用 flyTo 配合 flyOptions 缓慢缩放到某个位置。" />
    <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>
<style>
    #fly {
        display: block;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translate(-50%);
        width: 50%;
        height: 40px;
        padding: 10px;
        border: none;
        border-radius: 3px;
        font-size: 12px;
        text-align: center;
        color: #fff;
        background: #ee8a65;
    }
</style>
<div id="map"></div>
<br />
<button id="fly">Fly</button>
<script>
    const start = [-74.5, 40];
    const end = [74.5, 40];
    const map = new maplibregl.Map({
        container: 'map',
        style: 'https://tiles.openfreemap.org/styles/bright',
        center: start,
        zoom: 9
    });

    let isAtStart = true;

    document.getElementById('fly').addEventListener('click', () => {
        // 根据我们当前是在点a还是点b，目标设为点a或点b
        const target = isAtStart ? end : start;

        // 现在我们在相反的点
        isAtStart = !isAtStart;

        map.flyTo({
            // 这些选项控制结束时的相机位置：居中于
            // 目标，缩放级别为9，朝北。
            center: target,
            zoom: 9,
            bearing: 0,

            // 这些选项控制飞行曲线，使其缓慢移动
            // 并在开始平移之前几乎完全缩小。
            speed: 0.2, // 使飞行缓慢
            curve: 1, // 改变缩小的速度

            // 这可以是任何缓动函数：它接受一个0到1之间的数字
            // 并返回另一个0到1之间的数字。
            easing (t) {
                return t;
            },

            // 此动画相对于prefers-reduced-motion被认为是必要的
            essential: true
        });
    });
</script>
</body>
</html>

🔍 代码解析

1. 初始化地图

使用 new maplibregl.Map() 创建地图实例，配置美国区域作为初始视图。

2. 关键配置项

speed: 0.2: 控制飞行速度，值越小越慢
curve: 1: 控制飞行曲线，影响缩放变化速度
easing函数: 自定义缓动函数控制动画进度
essential: true: 确保动画相对于无障碍偏好是必要的

3. 核心逻辑

点击按钮在两个预设位置之间切换
使用speed和curve参数实现缓慢缩放效果
自定义easing函数实现平滑过渡

⚙️ 参数说明

参数	类型	必填	说明
center	$number, number$	是	目标中心点
zoom	number	否	目标缩放级别
bearing	number	否	目标航向角度
pitch	number	否	目标倾斜角度
speed	number	否	飞行速度，默认1.2
curve	number	否	飞行曲线，默认1.42
essential	boolean	否	动画是否必要

🎨 效果说明

运行代码后，地图显示美国区域。点击Fly按钮，地图会以非常缓慢的缩放动画在两个位置之间切换飞行。动画特点：先大幅缩小，然后平移，最后缩放到目标级别。

💡 常见问题

Q1: 飞行太慢或太快？

A: 调整speed参数：

speed: 0.1 非常慢
speed: 0.2 较慢
speed: 1 正常速度

Q2: 如何修改飞行曲线？

A: 调整curve参数，默认1.42表示标准曲线，值越小缩放越快。

Q3: easing函数有什么用？

A: 自定义动画进度曲线：

javascript 复制代码

easing(t) {
    return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
}

📝 练习任务

基础练习：修改speed和curve参数观察效果
进阶挑战：添加bearing和pitch变化实现旋转效果
拓展思考：如何实现更丰富的easing效果？
综合实践：创建一个多点游览的慢速飞行路线

🌟 最佳实践

速度控制: 使用speed: 0.2实现电影级的缓慢过渡
曲线优化: curve: 1使缩放和移动同时进行
自定义缓动: 实现独特的动画节奏感
用户体验: 缓慢动画适合展示类场景
无障碍: essential确保动画不被系统设置打断

🔗 延伸阅读

Map API文档
MapLibre GL JS 官方文档
$下一课预告$ ：将继续学习地图图层的基础知识

本文是MapLibre GL JS实践课程系列的一部分，欢迎关注收藏