cesium实现轨迹播放CZML

原创 已于 2025-05-05 15:50:32 修改 · 481 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #html

于 2025-05-05 15:49:45 首次发布

1.创建CZML数据结构

 const czml=[{
                id: "document",
                name: "CZML",
                version: "1.0",
                clock: {
                    interval: "2022-08-04T10:00:00Z/2022-08-04T15:00:00Z", // 时间段
                    currentTime: "2022-08-04T10:00:00Z", // 开始时间
                    multiplier: 1, // 已多少倍速播放
                    range: "CLAMPED",
                },
            },
            {
                id: "path",
                name: "path with GPS flight data",
                description: "",
                availability: "2022-08-04T10:00:00Z/2022-08-04T15:00:00Z", // 时间段 
                path: {
                    material: {
                        //轨迹颜色
                        polylineOutline: {
                            color: {
                                rgba: color,
                            },
                            outlineColor: {
                                rgba: outlineColor,
                            },
                            outlineWidth: outlineWidth,
                        },
                    },
                    width: width,
                    leadTime: 0, // 提前绘制时间
                },
                model: {
                    gltf: "模型地址",
                    scale: 0.1,
                    minimumPixelSize: 100,
                },
                position: {
                    epoch: "2022-08-04T10:00:00Z", // 该项开始绘制路径时间
                    cartographicDegrees: [
                       0,113,20,1000,//时间为秒，经度，维度，高度（米）
                    ],//数据
                },
            },
        ]

2.添加控制并监听

// 更新播放时间
            const updateCurrentTime = (index) => {
                    let time = new Date(Number(data[index].tms));
                    viewer.clockViewModel.currentTime = Cesium.JulianDate.fromDate(time);
                }
                // 变更播放状态
            const updatePlayStatus = (state) => {
                    viewer.clock.canAnimate = state;
                    viewer.clock.shouldAnimate = state;
                }
                //变更倍数
            const updateCurrentMultiplier = (multiplier) => {
                viewer.clockViewModel.multiplier = multiplier;
            }


// 监听播放状态
            Cesium.knockout.getObservable(viewer.clockViewModel, 'shouldAnimate').subscribe(function(isAnimating) {
                if (isAnimating) {
                    console.log('Cesium clock is animating.');
                } else {
                    console.log('Cesium clock is paused.');
                }
            });

            // 检测实时播放的时间轴
            Cesium.knockout.getObservable(viewer.clockViewModel, 'currentTime').subscribe(function(clockTime) {
              
               

                //设置航向角，根据返回数据设置
                let cartesian3 = Cesium.Cartesian3.fromDegrees(
                    Number(returnData.list[playIndex].lng),
                    Number(returnData.list[playIndex].lat),
                    Number(returnData.list[playIndex].height) / 100 // 高度
                );
                let heading = Cesium.Math.toRadians((returnData.list[playIndex].yaw) - 90);
                let pitch = Cesium.Math.toRadians(returnData.list[playIndex].pitch);
                let roll = Cesium.Math.toRadians(returnData.list[playIndex].roll);
                let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
                entity.orientation = Cesium.Transforms.headingPitchRollQuaternion(
                    cartesian3,
                    hpr
                );
                // entity.orientation
            });

            // 设置播放状态
            // viewer.clockViewModel.shouldAnimate = true;
            viewer.dataSources
                .add(Cesium.CzmlDataSource.load(czml))
                .then(function(ds) {

                    let s = ds.entities.getById("path");

                    viewer.trackedEntity = s; // 设置相机跟随

                    entity = s; //记录实例，方便改变方向角
                    // 设置图标执行下个点
                    //   s.orientation = new Cesium.VelocityOrientationProperty(s.position);
                    //   s.billboard.alignedAxis = new Cesium.VelocityVectorProperty(
                    //     s.position,
                    //     true
                    //   );

                });

3.在js中使用

//获取数据
axios.get(url).then(res=>{
   czml[1].position.cartographicDegrees =res 
updatePlayStatus(true)//改变运动状态，启动动画
})

4.以下是我在项目中封装的完整代码，通过解析后台csv文件数据得到经纬度

import axios from "axios";
const d3 = require("d3-dsv");
export function setCzmlData(viewer, config = {}) {
    let {
        url, // csv文件
        playEvene, // 播放事件，返回播放状态
        endPlay, // 结束事件，返回最后一个点
        playChange, // 播放改变时间，返回当前播放点，播放点对应的数据，时间
        color = [170, 255, 85, 255], // 线条颜色
        width = 6, // 线条大小
        outlineColor = [170, 255, 85, 255], // 边框颜色
        outlineWidth = 6, // 边框大小
        modelUrl = "模型地址", // 模型地址
    } = config;
    return new Promise((resolve, reject) => {
        if (!url) {
            return reject("csv文件不能为空")
        }
        const czml = [{
                id: "document",
                name: "CZML",
                version: "1.0",
                clock: {
                    interval: "2022-08-04T10:00:00Z/2022-08-04T15:00:00Z", // 时间段
                    currentTime: "2022-08-04T10:00:00Z", // 开始时间
                    multiplier: 1, // 已多少倍速播放
                    range: "CLAMPED",
                },
            },
            {
                id: "path",
                name: "path with GPS flight data",
                description: "",
                availability: "2022-08-04T10:00:00Z/2022-08-04T15:00:00Z", // 时间段 
                path: {
                    material: {
                        polylineOutline: {
                            color: {
                                rgba: color,
                            },
                            outlineColor: {
                                rgba: outlineColor,
                            },
                            outlineWidth: outlineWidth,
                        },
                    },
                    width: width,
                    leadTime: 0, // 提前绘制时间
                },
                model: {
                    gltf: modelUrl,
                    scale: 0.1,
                    minimumPixelSize: 100,
                },
                position: {
                    epoch: "2022-08-04T10:00:00Z", // 该项开始绘制路径时间
                    cartographicDegrees: [],
                },
            },
        ];
        let entity = ''
        axios.get(url).then((res) => {
            let index = res.data.indexOf("End") + 4;
            let list = res.data.substr(index);
            let data = d3.csvParse(list);
            let returnData = generateData(data)
            let newData = [];
            let time = Number(data[0].tms);

            let start = new Date(Number(data[0].tms)).toJSON().trim()
            let end = new Date(Number(data[data.length - 1].tms)).toJSON().trim()

            czml[0].clock.currentTime = start;
            czml[0].clock.interval = `${start}/${end}`;
            czml[1].availability = `${start}/${end}`;
            czml[1].position.epoch = `${start}`;

            for (let i = 0; i < data.length; i++) {
                let item = data[i];
                let item1 = returnData.list[i]
                let tms = Number(item.tms) - time;
                newData.push(
                    tms / 1000, // 时间,秒
                    Number(item1.lng),
                    Number(item1.lat),
                    Number(item.height) / 100 // 高度
                );
            }

            czml[1].position.cartographicDegrees = newData;

            // 更新播放时间
            const updateCurrentTime = (index) => {
                    let time = new Date(Number(data[index].tms));
                    viewer.clockViewModel.currentTime = Cesium.JulianDate.fromDate(time);
                }
                // 变更播放状态
            const updatePlayStatus = (state) => {
                    viewer.clock.canAnimate = state;
                    viewer.clock.shouldAnimate = state;
                }
                //变更倍数
            const updateCurrentMultiplier = (multiplier) => {
                viewer.clockViewModel.multiplier = multiplier;
            }

            let params = {
                returnData,
                czml,
                updateCurrentTime,
                updatePlayStatus,
                updateCurrentMultiplier
            }

            resolve(params);

            // 监听播放状态
            Cesium.knockout.getObservable(viewer.clockViewModel, 'shouldAnimate').subscribe(function(isAnimating) {
                if (isAnimating) {
                    console.log('Cesium clock is animating.');
                } else {
                    console.log('Cesium clock is paused.');
                }
                playEvene && playEvene(isAnimating)
            });
            // 检测实时播放的时间轴
            let playIndex = 1;
            Cesium.knockout.getObservable(viewer.clockViewModel, 'currentTime').subscribe(function(clockTime) {
                // 播放状态
                let shouldAnimate = viewer.clockViewModel.shouldAnimate;
                // 当前时间轴播放时间
                let currentTime = clockTime.toString();
                let tms = new Date(currentTime).getTime();

                // 播放结束
                if (parseInt(tms / 100) >= parseInt(Number(data[data.length - 1].tms) / 100)) {
                    endPlay && endPlay(data[data.length - 1], data.length - 1);
                    return false;
                }
                if (shouldAnimate) {
                    if (tms >= Number(data[playIndex].tms)) {
                        playIndex++;
                    }
                } else {
                    for (let i = 0; i < data.length; i++) {
                        if (Number(data[i].tms) >= tms) {
                            playIndex = i + 1;
                            break;
                        }
                    }
                }
                // 播放监听事件
                playChange && playChange(playIndex, returnData.list[playIndex], currentTime)

                //设置航向角，根据返回数据设置
                let cartesian3 = Cesium.Cartesian3.fromDegrees(
                    Number(returnData.list[playIndex].lng),
                    Number(returnData.list[playIndex].lat),
                    Number(returnData.list[playIndex].height) / 100 // 高度
                );
                let heading = Cesium.Math.toRadians((returnData.list[playIndex].yaw) - 90);
                let pitch = Cesium.Math.toRadians(returnData.list[playIndex].pitch);
                let roll = Cesium.Math.toRadians(returnData.list[playIndex].roll);
                let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
                entity.orientation = Cesium.Transforms.headingPitchRollQuaternion(
                    cartesian3,
                    hpr
                );
                // entity.orientation
            });

            // 设置播放状态
            // viewer.clockViewModel.shouldAnimate = true;
            viewer.dataSources
                .add(Cesium.CzmlDataSource.load(czml))
                .then(function(ds) {

                    let s = ds.entities.getById("path");

                    viewer.trackedEntity = s; // 设置相机跟随

                    entity = s; //记录实例，方便改变方向角
                    // 设置图标执行下个点
                    //   s.orientation = new Cesium.VelocityOrientationProperty(s.position);
                    //   s.billboard.alignedAxis = new Cesium.VelocityVectorProperty(
                    //     s.position,
                    //     true
                    //   );

                });
        });
    })
}

CHB码
关注
Cesium初级开发教程之七：CZML
Cesium开发工程师
11-17 443
二、代码（CZML）
Cesium 实战 21 - 三种方式（CZML、nodeTransformations）修改模型节点组件属性（比例、旋转、移动等）
非科班Java出身GISer的博客
08-08 2716
Cesium 实战教程 - 三种方式（CZML、nodeTransformations）修改模型节点组件属性（修改比例、旋转、移动等），实现模型动作、动画。
vue3使用cesium实现轨迹回放。
qq_43474235的博客
03-12 2112
vue3引用cesium实现轨迹回放和视觉跟随效果
czml的模型运动及轨迹实现
z501190093的博客
11-24 1172
cesium中通过czml对一个飞行器的轨迹的显示
基于 cesium 的 Property实现轨迹播放
qq_24343389的博客
11-17 844
基于cesium实现轨迹播放
cesium 卫星轨迹模拟 czml
03-04
【cesium 卫星轨迹模拟 czml】是关于在Cesium平台上使用CZML（Cesium JavaScript Object Notation）语言来模拟卫星轨迹的一种技术。Cesium是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式的3D地球可视化...
精选资源
cesium实时轨迹、自动变向
08-01
开发者可以设置`Clock`的时间步进和循环模式，以实现轨迹的播放和暂停。 在压缩包文件"RealTimePlan"中，很可能包含了实现这些功能的示例代码或资源。这个文件可能是一个完整的项目结构，包括HTML、CSS和JavaScript...
5.Cesium添加czml数据实现车辆轨迹运动效果
skr_Rany的博客
01-20 3327
czml数据 let czml = [ { id: 'document', name: 'polygon', version: '1.0', clock: { interval: '2012-08-04T16:00:00Z/2012-08-04T16:06:00Z',//规定时间范围 currentTime: '2012-08-04T16:00:00Z',//当前时间 multiplier: 20,
cesium实现轨迹回放镜头跟踪
weixin_44805353的博客
03-09 2428
cesium实现轨迹回放加镜头跟踪
【Cesium】Cesium学习之CZML的使用
热门推荐
Gua_guagua的博客
05-28 1万+
CZML介绍及使用方法
cesium飞机飞行和轨迹
10-12
cesium飞机飞行和轨迹
Cesium实时轨迹、点击运动、插值坐标、轨迹回放。
qq_41400354的博客
08-01 1万+
Cesium;typescript;实时轨迹；模型；变向；
Cesium 实时多轨迹
瑾&凌
03-11 1183
无人机实时轨迹
cesium 实现轨迹回放
最新发布
weixin_47017648的博客
07-29 841
本文介绍了使用Cesium库实现无人机轨迹可视化的方法。主要内容包括：1.创建地图并初始化Cesium视图；2.通过坐标集合添加红色虚线轨迹；3.结合3D模型实现沿轨迹移动效果，设置300秒的移动时间循环；4.使用Cesium.SampledPositionProperty控制模型位置随时间变化；5.讲解Cesium.JulianDate时间计算和viewer.clock时间控制功能，包括播放速度、循环模式等参数设置。该方案实现了无人机沿预设路径飞行的可视化效果，并可通过时间控制系统调整播放状态。
cesium 使用时间轴显示轮船实时位置轨迹，通过粒子系统添加轮船尾浪效果
大家好，我是+V
02-17 1万+
cesium 通过websocket接收轮船实时位置，通过粒子系统添加轮船尾浪效果 啊~ 宝宝儿们，我是一个前端小白白，最近呢，在尝试做一个GIS效果，就是webscoket接收后台传递过来的轮船实时位置，一秒钟推送一次，传递过来的信息包括了轮船的id、轮船经度和纬度、以及轮船的方向角度。要求使用cesium实时展示轮船的位置和朝向。但是我之前没有接触过cesium，根本不会，文档都是英文的，我都不会看，然后我连基本的操作和概念都不会，不知道正经应该怎么整，所以就瞎搞，好在实现了一些效果，然后呢就记录一
Cesium使用glb模型、图片标记来实现实时轨迹
ssy001128的博客
06-06 682
本文介绍了在Vue项目中使用Cesium实现两种实时轨迹显示的方法：1. 通过GLB模型展示轨迹，利用computeHeading函数计算模型朝向，实现3D模型的动态移动和转向；2. 使用图片标记显示轨迹，通过计算两点间角度调整图片旋转方向。两种方法均基于预定义的经纬度坐标数组，采用定时器逐点推进，并同步绘制贴地轨迹线。代码示例包含添加初始实体、更新位置朝向、清除定时器等完整实现逻辑，适用于Cesium三维地球的轨迹可视化开发。
Cesium实时刷新历史轨迹 - 3D地图中的功能集
AbjCommon_Lisp的博客
09-16 1037
我们将使用Cesium来展示物体在不同时间点上的轨迹，并通过实时刷新功能实时更新轨迹的位置。我们将使用Cesium来展示物体在不同时间点上的轨迹，并通过实时刷新功能实时更新轨迹的位置。在上面的代码中，我们创建了一个带有id为"cesiumContainer"的div元素，用于容纳Cesium的地图。在上面的代码中，我们创建了一个带有id为"cesiumContainer"的div元素，用于容纳Cesium的地图。你可以在Cesium的官方网站上下载最新版本的库文件，并将其包含在你的HTML文件中。
实时轨迹可视化效果实现 - 基于Cesium的功能集
AbjCommon_Lisp的博客
10-09 1046
这些数据可以是物体的位置和时间戳的集合，例如一个飞行器的GPS数据。在这个示例中，我们将使用一个简单的数组来表示位置数据。请注意，实际应用中，你需要根据你的需求和数据源进行相应的调整。在本文中，我们将探讨如何使用Cesium库实现实时轨迹的可视化效果。通过使用Cesium的功能集，我们可以创建出令人印象深刻的实时轨迹展示。你可以根据自己的需求对代码进行进一步的定制和优化，例如调整线条的样式、添加其他地理要素等。接下来，我们将创建一个Cesium Viewer实例来展示地球场景，并设置一些基本的配置。
cesium entity与时间轴关联（添加运动轨迹）
God's asylum的博客
05-21 3553
将entity 方法与时间轴相关联，添加运动轨迹
Cesium卫星轨迹模拟之CZML应用与SGP4算法解析
根据提供的文件信息，我们可以聚焦到几个关键知识点：Cesium、卫星轨迹模拟、CZML（Cesium Markup Language）以及SGP4（Simplified General Perturbations 4）算法。这些知识领域通常用于地理信息系统（GIS）、卫星...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值