天地图Circle扩散动画

web前端进阶者

于 2025-03-24 13:46:31 发布

阅读量193

点赞数 6

分类专栏：天地图文章标签： javascript 前端

本文链接：https://blog.csdn.net/u014708123/article/details/146474373

版权

天地图专栏收录该内容

11 篇文章

订阅专栏

地理信息系统GIS,不免需要一些动画在地图上面展示；比方说SOS求救、事故点位置、救援点等；

在这里插入图片描述

核心代码

 function handleCircleSpreadAnimation(circle) {
    // 动画步数（可以根据需要调整）
    var steps = 25;
    var radius = 20;
    var currentStep = 0;
    var total = 10;
    var animationId;
    function animate() {
        if (currentStep < steps) {
            var progress = currentStep / steps;
            var newRadius = 5000 + (5000 - radius) * progress;
            circle.setRadius(newRadius);
            currentStep++;
            animationId = requestAnimationFrame(animate);
        } else {
            if (total === 0) {
                animate = null;
                animationId = null;
                circle.setRadius(5000);
                return;
            }
            total--
            currentStep = 0;
            animate();
        }
    }
    animate();
}

如何使用

// 创建circle
var circle =new T.Circle(new T.LngLat(116.40093, 39.90313), 5000,{color:"#C90000",weight:2,opacity:0.5,fillColor:"#FB5812",fillOpacity:0.5,lineStyle:"solid"});
// 向地图上添加circle
map.addOverLay(circle);
// 执行动画
handleCircleSpreadAnimation(circle);