天地图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);
相关推荐
漂流瓶jz5 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码6 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v6 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
webYin6 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip6 小时前
结合Worker通知应用更新
前端·javascript
叶玳言7 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳7 小时前
HTML 基本结构
前端
Gazer_S7 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
一只小阿乐7 小时前
Html重绘和重排
前端·html
_Rookie._7 小时前
vue3 使用css变量
前端·javascript·html