2026/1/27 9:22:36
网站建设
项目流程
个人网站开发人员,托管网站是什么意思,电子商务网站和开发新闻类网站,怎么用织梦来做网站后台这一节课#xff0c;我们用 CZML 让物体真正“动”起来——
给它一个时间轴#xff0c;让它按时走路、按时变色、按时消失#xff0c;全程只靠 JSON#xff0c;不写半行动画代码。一、时间四维#xff1a;时间 经度 纬度 高度CZML 把“时间”当成第一维度#xff0c;后…这一节课我们用CZML让物体真正“动”起来——给它一个时间轴让它按时走路、按时变色、按时消失全程只靠 JSON不写半行动画代码。一、时间四维时间 经度 纬度 高度CZML 把“时间”当成第一维度后面紧跟经典三维[ 0秒, 经度°, 纬度°, 高度米, 200秒, 经度°, 纬度°, 高度米 … ]数组里每 4 个数算一个“关键帧”Cesium 会自动插值物体就能平滑移动。二、最小动画 CZML盒子 从 A 飞到 Bconst czml [ { id: document, name: box, version: 1.0, // 文档头必须 }, { id: shape1, name: Blue box, availability: 2023-01-01T00:00:00Z/2023-01-01T00:00:01Z, // 可见时间段 position: { epoch: 2023-01-01T00:00:00Z, // 0 秒起点 cartographicDegrees: [ 0, -114.0, 40.0, 30000.0, // 0 秒时的经纬高 200, -100.0, 0.0, 30000.0, // 200 秒时的经纬高 ], }, box: { dimensions: { cartesian: [40000, 30000, 50000] }, // 长 宽 高米 material: { solidColor: { color: { rgba: [0, 0, 255, 255] } }, // 纯蓝 }, }, }, ];现在画面是静止的因为我们还没让“时间齿轮”转起来。三、让时间跑起来打开动画 时间轴先把动画条放出来const viewer new Cesium.Viewer(container, { animation: true, // 左下角播放按钮 timeline: true, // 底部时间轴 });设定播放速度viewer.clock.multiplier 1.0; // 1 倍现实速度 viewer.animation.viewModel.playbackRate 1.0;如果想一进页面就自动跑再加一行viewer.shouldAnimate true;刷新后点击播放键或拖动时间轴蓝色盒子会沿着刚才给定的两个关键帧平稳飞行全程自动插值、自动朝向、自动旋转零代码干预。四、小结与扩展CZML 把时间当“第一维度”后面紧跟经度、纬度、高度即可四维插值。availability控制“生命周期”时间轴外物体自动隐藏。打开animation timeline shouldAnimate一条 JSON 就能让场景“活”起来。