Leaflet 入门教程（十三）：动画

还是大剑师兰特

已于 2025-03-18 16:19:52 修改

阅读量2.4k

点赞数 101

分类专栏： # GIS入门教程文章标签： leaflet示例大剑师 leaflet入门 leaflet自学 leaflet动画

于 2024-05-16 00:00:00 首次发布

本文链接：https://blog.csdn.net/cuclife/article/details/138569913

版权

GIS入门教程专栏收录该内容

45 篇文章

订阅专栏

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

在这里插入图片描述

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	`Openlayers` 【入门教程】 - 【源代码+示例 300+】
2	`Leaflet` 【入门教程】 - 【源代码+图文示例 150+】
3	`MapboxGL`【入门教程】 - 【源代码+图文示例150+】
4	`Cesium` 【入门教程】 - 【源代码+综合教程 200+】
5	`threejs`【中文API】 - 【源代码+图文示例200+】
6	Shader 编程【图文示例 100+】
7	Geoserver 【配置教程 100+】
8	卫星应用开发教程【配置+应用教程 100+】
9	GIS数字孪生与大模型【应用实战 100+】
10	报表与数字大屏【Echarts 实战示例】 - 【D3 综合教程】 - 【其他大屏】

文章目录

在 Leaflet 中实现动画效果通常涉及地图的平移、缩放或图层的动态变化。以下是一些常见的动画技术及其示例：

一、基本动画思路

1. 平滑移动到新视图

你可以使用 flyTo 方法使地图平滑地过渡到新的中心点和缩放级别，相比直接设置视图，它提供了更平滑的动画效果。

map.flyTo([newLat, newLng], zoomLevel, {
    duration: 2, // 动画持续时间，单位秒
});

2. 渐变显示/隐藏图层

动画显示或隐藏图层可以通过调整图层的透明度来实现。

var layer = L.geoJSON(someGeoJSON).addTo(map);
layer.setStyle({opacity: 0});

// 渐显图层
function fadeInLayer(layer, duration) {
    var start = new Date().getTime();
    var opacity = 0;

    function step() {
        var now = new Date().getTime();
        var timeElapsed = now - start;
        var progress = Math.min(timeElapsed / duration, 1);
        layer.setStyle({opacity: progress});
        if (progress < 1) {
            requestAnimationFrame(step);
        }
    }
    step();
}

fadeInLayer(layer, 2000); // 在2秒内渐显图层

3. 路径动画

对于线或多边形的绘制，可以通过不断更新其坐标序列来模拟动画效果，例如模拟轨迹跟踪。

function animatePolyline(line, coordinates, duration) {
    var i = 0;
    var interval = setInterval(function () {
        if (i >= coordinates.length) {
            clearInterval(interval);
        } else {
            line.setLatLngs(coordinates.slice(0, i + 1));
            map.setView(coordinates[i], map.getZoom());
            i++;
        }
    }, duration / coordinates.length);
}

var myLine = L.polyline(coords, {color: 'red'}).addTo(map);
animatePolyline(myLine, coords, 5000); // 5秒内播放轨迹

4. 图标动画

虽然 Leaflet 本身不直接支持图标动画，但你可以通过 CSS3 动画或改变图标位置来模拟动画效果。例如，让标记点上下跳动：

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-15px);}
    60% {transform: translateY(-5px);}
}

var marker = L.marker([lat, lng], {
    icon: L.divIcon({
        className: 'bounce-animation', // 应用CSS类名
        html: '<div><img src="marker.png"></div>'
    })
}).addTo(map);