• 【CesiumJS-5】绘制动态路线实现飞行航线、汽车轨迹、路径漫游等

    实现效果

    前言

    Cesium中，动态路线绘制的核心是借助CZML格式，CZML是一种用来描述动态场景的JSON数组,可以用来描述点、线、多边形、体、模型及其他图元,同时定义它们是怎样随时间变化的；

    CZML主要做三件事：

    1.添加模型信息

    2.添加路径信息

    3.计算速度，修改时间

    CZML数据格式

    1. [
    2.   {
    3.     "id": "document",
    4.     "version": "1.0",
    5.     "clock": {
    6.       "interval": "2024-03-13T03:00:00Z/2024-03-13T03:12:50Z",
    7.       "currentTime": "2024-03-13T03:00:00Z",
    8.       "multiplier": 5
    9.     }
    10.   },
    11.   {
    12.     "id": "plane",
    13.     "availability": "2024-03-13T03:00:00Z/2024-03-13T03:12:50Z",
    14.     "viewFrom": {
    15.       cartesian: [-2080, -1715, 779]
    16.     },
    17.     "model": {
    18.       "gltf": "/model/plane.glb",
    19.       "scale": 2
    20.     },
    21.     "orientation": {
    22.       "velocityReference": "#position"
    23.     },
    24.     "path": {
    25.       "material": {
    26.         "solidColor": {
    27.           "color": {
    28.             "interval": "2024-03-13T03:00:00Z/2024-03-13T03:12:50Z",
    29.             "rgba": [0, 0, 205, 255]
    30.           }
    31.         }
    32.       },
    33.       "width": [
    34.         {
    35.           "interval": "2024-03-13T03:00:00Z/2024-03-13T03:12:50Z",
    36.           "number": 2
    37.         }
    38.       ],
    39.       "show": [
    40.         {
    41.           "interval": "2024-03-13T03:00:00Z/2024-03-13T03:12:50Z",
    42.           "boolean": true
    43.         }
    44.       ]
    45.     },
    46.     "position": {
    47.       "interpolationAlgorithm": "LAGRANGE",
    48.       "interpolationDegree": 1,
    49.       "epoch": "2024-03-13T03:00:00Z",
    50.       "cartographicDegrees": []
    51.     }
    52.   }
    53. ]

    主要有两个对象组成：第一个对象声明czml，第二个对象生成模型。

    1. 声明czml
    1.   {
    2.     "id": "document",
    3.     "version": "1.0",
    4.     "clock": {
    5.       "interval": "2024-03-13T03:00:00Z/2024-03-13T03:12:50Z",
    6.       "currentTime": "2024-03-13T03:00:00Z",
    7.       "multiplier": 5
    8.     }
    9.   }
    2. 设置相机位置
    1.     "viewFrom": {
    2.       cartesian: [-2080, -1715, 779]
    3.     },
    3. 生成场景模型，设置时间范围
    1.   {
    2.     "id": "plane",
    3.     "availability": "2024-03-13T03:00:00Z/2024-03-13T03:12:50Z",
    4.     "model": {
    5.       "gltf": "/model/plane.glb",
    6.       "scale": 2
    7.     }
    8.   }
    4. 设置模型运动方向
    1.     "orientation": {
    2.       "velocityReference": "#position"
    3.     },
    5. 生成动态路径
    1.     "path": {
    2.       "material": {
    3.         "solidColor": {
    4.           "color": {
    5.             "interval": "2024-03-13T03:00:00Z/2024-03-13T03:12:50Z",
    6.             "rgba": [
    7.               0,
    8.               0,
    9.               205,
    10.               255
    11.             ]
    12.           }
    13.         }
    14.       },
    15.       "width": [
    16.         {
    17.           "interval": "2024-03-13T03:00:00Z/2024-03-13T03:12:50Z",
    18.           "number": 2
    19.         }
    20.       ],
    21.       "show": [
    22.         {
    23.           "interval": "2024-03-13T03:00:00Z/2024-03-13T03:12:50Z",
    24.           "boolean": true
    25.         }
    26.       ]
    27.     },
    6. 设置运动路线

    cartographicDegrees设置经纬度：4个一组分别是 时间，经度，纬度，高度

    1.     "position": {
    2.       "interpolationAlgorithm": "LAGRANGE",
    3.       "interpolationDegree": 1,
    4.       "epoch": "2024-03-13T03:00:00Z",
    5.       "cartographicDegrees": [0, 120.13125463180745, 30.316189813141357, 20]
    6.     }

    功能实现

    本人在实现功能中没用json格式,而是直接用的数组对象变量，上述中仅做学习记录。

    注意: czml只能识别ISO8601日期，需要使用Cesium内置方法转换时间；

    1. 将当前时间作为开始时间并将js日期转为儒略日格式
    const start = Cesium.JulianDate.fromDate(new Date());
    2. 创建czml数组

    使用Cesium.JulianDate.toIso8601()方法将时间转为ISO8601日期格式

    1. const czml = [
    2.   {
    3.     id: "document",
    4.     version: "1.0",
    5.     clock: {
    6.       interval: `${Cesium.JulianDate.toIso8601(start, 0)}/${Cesium.JulianDate.toIso8601(Cesium.JulianDate.addSeconds(start, 450, new Cesium.JulianDate()), 0)}`,
    7.       currentTime: `${Cesium.JulianDate.toIso8601(start, 0)}`,
    8.       multiplier: 10,
    9.     }
    10.   },
    11.   {
    12.     id: "plane",
    13.     availability: `${Cesium.JulianDate.toIso8601(start, 0)}/${Cesium.JulianDate.toIso8601(Cesium.JulianDate.addSeconds(start, 450, new Cesium.JulianDate()), 0)}`,
    14.     model: {
    15.       gltf: "/model/plane.glb",
    16.       scale: 2
    17.     },
    18.     // viewFrom: {
    19.     //   cartesian: [-2080, -1715, 779]
    20.     // },
    21.     orientation: {
    22.       velocityReference: "#position"
    23.     },
    24.     path: {
    25.       material: {
    26.         solidColor: {
    27.           color: {
    28.             interval: `${Cesium.JulianDate.toIso8601(start, 0)}/${Cesium.JulianDate.toIso8601(Cesium.JulianDate.addSeconds(start, 450, new Cesium.JulianDate()), 0)}`,
    29.             rgba: [0, 0, 205, 255]
    30.           }
    31.         }
    32.       },
    33.       width: [
    34.         {
    35.           interval: `${Cesium.JulianDate.toIso8601(start, 0)}/${Cesium.JulianDate.toIso8601(Cesium.JulianDate.addSeconds(start, 450, new Cesium.JulianDate()), 0)}`,
    36.           number: 2
    37.         }
    38.       ],
    39.       show: [
    40.         {
    41.           interval: `${Cesium.JulianDate.toIso8601(start, 0)}/${Cesium.JulianDate.toIso8601(Cesium.JulianDate.addSeconds(start, 450, new Cesium.JulianDate()), 0)}`,
    42.           boolean: true
    43.         }
    44.       ]
    45.     },
    46.     position: {
    47.       interpolationAlgorithm: "LAGRANGE",
    48.       interpolationDegree: 1,
    49.       epoch: `${Cesium.JulianDate.toIso8601(start, 0)}`,
    50.       cartographicDegrees: [
    51.         0, 120.13125463180745, 30.316189813141357, 5,
    52.         10, 120.13111416662538, 30.315539106519307, 5,
    53.         20, 120.1309786622693, 30.31489588182787, 5,
    54.         30, 120.13084876734133, 30.314235695359727, 5,
    55.         40, 120.13069473575192, 30.313540629197277, 5,
    56.         50, 120.13054390032266, 30.312912654513724, 5,
    57.         60, 120.13044947371688, 30.312385482730374, 5,
    58.         70, 120.13030971147948, 30.311910736974383, 5,
    59.         80, 120.13009317468772, 30.311390245082837, 5,
    60.         90, 120.12978893985873, 30.310733495046055, 5,
    61.         100, 120.12959024998796, 30.310326531696383, 10,
    62.         110, 120.12938465577722, 30.309954975972268, 30,
    63.         120, 120.12903852757415, 30.309336955328902, 60,
    64.         130, 120.12871206396551, 30.308875801472478, 70,
    65.         140, 120.12838069578686, 30.308490868344943, 70,
    66.         150, 120.12810457466928, 30.308113523536672, 70,
    67.         160, 120.12779772791689, 30.307774086249907, 80,
    68.         170, 120.12737964279644, 30.307483823729378, 80,
    69.         180, 120.1269732925855, 30.307160879171903, 80,
    70.         190, 120.12647213239983, 30.30666310390423, 80,
    71.         200, 120.12546262988464, 30.307181930544864, 80,
    72.         210, 120.1245785033241, 30.307683795316315, 80,
    73.         220, 120.12375576753382, 30.308035432883194, 100,
    74.         230, 120.12308850447974, 30.308497699718018, 100,
    75.         240, 120.12253685192415, 30.308860660895174, 100,
    76.         250, 120.12209783635902, 30.309214249085528, 100,
    77.         260, 120.12124539807733, 30.309730900111948, 120,
    78.         270, 120.12062513785223, 30.30968143768237, 125,
    79.         280, 120.11996146408914, 30.30903962813221, 130,
    80.         290, 120.12080592297113, 30.308199027265523, 135,
    81.         300, 120.1206419712799, 30.307743185311676, 140,
    82.         310, 120.11991139765998, 30.306939478614392, 200,
    83.         320, 120.11894945108537, 30.307236007284757, 220,
    84.         330, 120.11843736124806, 30.307682602103153, 240,
    85.         340, 120.11801295026378, 30.308682424137178, 260,
    86.         350, 120.117608250043, 30.30896814314354, 280,
    87.         360, 120.11756912872843, 30.309470200064347, 300,
    88.         370, 120.11718042273918, 30.310442342271475, 300,
    89.         380, 120.11602779574089, 30.3098989524904, 310,
    90.         390, 120.11550616761767, 30.31093863353403, 310,
    91.         400, 120.11644406776917, 30.31177509905328, 310,
    92.         410, 120.11566744726449, 30.312255943277282, 320,
    93.         420, 120.11627775321915, 30.312631949114188, 320,
    94.         430, 120.11695495518998, 30.313251980473588, 330,
    95.         440, 120.11755845523233, 30.313636377593916, 330,
    96.         450, 120.11843011762987, 30.31389033163698, 340
    97.       ]
    98.     }
    99.   }
    100. ]
    3. 加载CZML数据并添加到场景中

    dataSources：是一个异步Promise，回调参数为我们传入的czml数据；

    let dataSource = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
    4. 相机跟随模型
    1.   dataSource.then(part => {
    2.     // 根据id获取czml中的模型
    3.     let e = part.entities.getById("plane");
    4.     // 相机跟随模型
    5.     viewer.trackedEntity = e;
    6.   });
    5. 视角跟随模型
    1.   dataSource.then(part => {
    2.     // 根据id获取czml中的模型
    3.     let e = part.entities.getById("plane");
    4.     // 相机跟随模型
    5.     viewer.trackedEntity = e;
    6.  
    7.     //++++++++++++++
    8.     // 视角跟随模型
    9.     let prePoint = null; // 前一个点
    10.     viewer.scene.postRender.addEventListener(() => {
    11.       if (e && viewer.clock.shouldAnimate) {
    12.         // 获取当前时间的位置
    13.         let curPoint = e.position.getValue(viewer.clock.currentTime);
    14.         if (prePoint) {
    15.           // 计算heading-代表 Z 轴旋转
    16.           let heading = getHeading(prePoint, curPoint);
    17.           // 计算pitch-代表 Y 轴朝向
    18.           let pitch = Cesium.Math.toRadians(-30.0);
    19.           let range = 100;
    20.           viewer.camera.lookAt(curPoint, new Cesium.HeadingPitchRange(heading, pitch, range));
    21.         }
    22.         // 当前点在下一次渲染时为前一个点
    23.         prePoint = Cesium.Cartesian3.clone(curPoint)
    24.       }
    25.     }) 
    26.   });
    27.  
    28.  
    29. function getHeading(pointA, pointB) {
    30.   //建立以点A为原点，X轴为east,Y轴为north,Z轴朝上的坐标系
    31.   const transform = Cesium.Transforms.eastNorthUpToFixedFrame(pointA);
    32.   //向量AB
    33.   const positionvector = Cesium.Cartesian3.subtract(pointB, pointA, new Cesium.Cartesian3());
    34.   //因transform是将A为原点的eastNorthUp坐标系中的点转换到世界坐标系的矩阵
    35.   //AB为世界坐标中的向量
    36.   //因此将AB向量转换为A原点坐标系中的向量，需乘以transform的逆矩阵。
    37.   const vector = Cesium.Matrix4.multiplyByPointAsVector(Cesium.Matrix4.inverse(transform, new Cesium.Matrix4()), positionvector, new Cesium.Cartesian3());
    38.   //归一化
    39.   const direction = Cesium.Cartesian3.normalize(vector, new Cesium.Cartesian3());
    40.   //heading
    41.   const heading = Math.atan2(direction.y, direction.x) - Cesium.Math.PI_OVER_TWO;
    42.   return Cesium.Math.TWO_PI - Cesium.Math.zeroToTwoPi(heading);
    43. }
  • 相关阅读:
    LLM学习之自然语言处理简单叙述
    2023秋招—大数据开发面经—杰创智能科技
    【RocketMQ中的顺序消息、生产者顺序生产消息、消费者顺序消费消息、顺序包括全局有序和分块有序、代码样例实战】
    Wireshark - tshark支持iptables提供数据包
    线程同步（解决线程安全问题）
    同花顺l2数据接口的委托队列是什么？
    什么是客户体验 (CX)？如何改善客户体验？
    鸿蒙开发之ArkTS 基础九 枚举类型
    Flutter图片内存占用过大问题
    Jmeter分布式压测
  • 原文地址：https://blog.csdn.net/m0_56023096/article/details/136713797