天地图Circle扩散动画

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

核心代码
typescript 复制代码
 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();
}
如何使用
typescript 复制代码
// 创建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);
相关推荐
华仔啊1 天前
Vue+CSS 做出的LED时钟太酷了!还能倒计时,代码全开源
前端·css·vue.js
m0_564914921 天前
点击EDGE浏览器下载的PDF文件总在EDGE中打开
前端·edge·pdf
@大迁世界1 天前
JavaScript 2.0?当 Bun、Deno 与 Edge 运行时重写执行范式
开发语言·前端·javascript·ecmascript
red润1 天前
Day.js 是一个轻量级的 JavaScript 日期处理库,以下是常用用法:
前端·javascript
Ting-yu1 天前
Nginx快速入门
java·服务器·前端·nginx
我是日安1 天前
从零到一打造 Vue3 响应式系统 Day 17 - 性能处理:无限循环
前端·vue.js
user94051035547171 天前
Uniapp 3D 轮播图 轮播视频 可循环组件
前端
前端付豪1 天前
12、为什么在 <script> 里写 export 会报错?
前端·javascript
Junsen1 天前
electron窗口层级与dock窗口列表
前端·electron
一个小潘桃鸭1 天前
需求:el-upload加上文件上传进度
前端