CZML路径动态改变

已于 2025-02-25 16:23:33 修改
阅读量411 收藏 1
点赞数 3
文章标签： 前端 3d
于 2025-02-17 15:28:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44068262/article/details/145683754
版权

文档转载来自：cesium编程中级(七)CZML路径动态改变 | cesium中文网

 整理思路为4步

1. 创建三维球
2. 创建czml文件
3. 动态添加点到czml的路径中
4. 添加czml到三维球上

 第一步：创建三维球并且设置一下地球的图片和颜色

import url from '../../../public/img/worldimage.jpg';
const viewer = new Cesium.Viewer(cesiumRef.current, {
  infoBox: false, // 关闭信息框，不关闭控制台会有报错
  baseLayerPicker: false,
});

// 从异步图像提供商创建一个新的图像层。该层将处理任何异步负载或错误，并在准备就绪后开始呈现图层。
const imageryLayer = Cesium.ImageryLayer.fromProviderAsync(
  // 创建一个单张图片影像提供者
  Cesium.SingleTileImageryProvider.fromUrl(url),
);
viewer.imageryLayers.add(imageryLayer);

 上边的图片是这个，下载这张图片

第二步：创建czml文件

/**
 * interval：设置一个时间范围，所有的动画都是在这个时间范围内显示、有效
 * */
const czml = [
  {
    id: 'document',
    name: 'polygon',
    version: '1.0',
    clock: {
      interval: '2025-02-17T13:00:00Z/2025-02-17T15:01:00Z',
      currentTime: '2025-02-17T13:00:00Z',
      multiplier: 10,
    },
  },
  {
    id: 'shape2',
    name: 'Red box with black outline',
    availability: '2025-02-17T13:00:00Z/2025-02-17T15:01:00Z',
    box: {
      dimensions: {
        cartesian: [10.0, 10.0],
      },
      material: {
        stripe: {
          orientation: 'VERTICAL',
          evenColor: {
            rgba: [10, 21, 10, 0],
          },
          oddColor: {
            rgba: [10, 2, 250, 255],
          },
          offset: {
            number: 1,
          },
          repeat: 0.5,
        },
      },
    },
    path: {
      material: {
        solidColor: {
          color: {
            interval: '2025-02-17T13:00:00Z/2025-02-17T15:01:00Z',
            rgba: [255, 0, 0, 128],
          },
        },
      },
      width: [
        {
          interval: '2025-02-17T13:00:00Z/2025-02-17T15:01:00Z',
          number: 1.0,
        },
      ],
      show: [
        {
          interval: '2025-02-17T13:00:00Z/2025-02-17T15:01:00Z',
          boolean: true,
        },
      ],
    },
    position: {
      interpolationAlgorithm: 'LAGRANGE',
      interpolationDegree: 1,
      epoch: '2025-02-17T13:00:00Z',
      cartographicDegrees: [
        0.0, 118.87841653400005, 30.95679870500004, 0.0, 10.0, 118.87826541800007,
        30.95680770900003, 0.0, 20.0, 118.8774481050001, 30.956860625000047, 0.0, 30.0,
        118.87660414600009, 30.956910105000077, 0.0, 40.0, 118.8759846580001, 30.95694296000005,
        0.0, 50.0, 118.87542502500003, 30.956978761000073, 0.0, 60.0, 118.87473380100005,
        30.957024103000037, 0.0,
      ],
    },
  },
];

 第三步;动态添加点到czml的路径中

let dataSourcePromise;
let i = 30.957024;
let a = 60;
// 为日期创建一个新的实例
const epoch = Cesium.JulianDate.fromIso8601('2025-02-17T13:00:00Z');
const updateCZML = async () => {
  i += 0.0001;
  a += 10;
  // 更新路径数据
  czml[1].position.cartographicDegrees.push(a, 118.8747338, i, 0);
  // 计算新的时间戳
  /**
   * Cesium.JulianDate.addSeconds(julianDate, seconds, result) → JulianDate
   *  将所提供的秒数添加到所提供的日期实例中。
   *  想要图形随着轨迹移动而移动，就得修改clock的currentTime这个字段
   * */
  const newTime = Cesium.JulianDate.addSeconds(epoch, a, new Cesium.JulianDate());
  // 创建所提供的日期的ISO8601表示形式。
  const newTimeString = Cesium.JulianDate.toIso8601(newTime);
  if (czml[0]?.clock) {
    // 上一次移动的时间 viewer.clockViewModel.clock.currentTime.toString();
    // czml[0].clock.currentTime = viewer.clockViewModel.clock.currentTime.toString();
    czml[0].clock.currentTime = newTimeString;
    viewer.entities.removeAll();
    /**
     * 添加czml到三维球上
     * add(dataSource) → Promise.<DataSource>
     *   创建对加载所提供的CZML数据的新实例的承诺
     *   add 是异步函数，所以要用await/async  try/catch
     * */
    try {
      await viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
    } catch (err) {}
  }
};

setInterval(updateCZML, 1000);

// 动态添加
const loadInitialData = async () => {
  try {
    dataSourcePromise = await viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
    viewer.zoomTo(dataSourcePromise);
  } catch (err) {}
};
loadInitialData();

完整的代码

import * as Cesium from 'cesium';
import React, { useEffect, useRef } from 'react';
import url from '../../../public/img/worldimage.jpg';
import '../../../public/Widgets/widgets.css';

// 扩展 Window 接口
declare global {
  interface Window {
    CESIUM_BASE_URL: string;
  }
}

window.CESIUM_BASE_URL = '/';

// 设置token
Cesium.Ion.defaultAccessToken = '改成自己的token';

// 设置cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5, // 西边的经度
  20.4, // 南边的经度
  110.4, // 东边的经度
  61.2, // 北边的经度
);

/**
 * interval：设置一个时间范围，所有的动画都是在这个时间范围内显示、有效
 * */
const czml = [
  {
    id: 'document',
    name: 'polygon',
    version: '1.0',
    clock: {
      interval: '2025-02-17T13:00:00Z/2025-02-17T15:01:00Z',
      currentTime: '2025-02-17T13:00:00Z',
      multiplier: 10,
    },
  },
  {
    id: 'shape2',
    name: 'Red box with black outline',
    availability: '2025-02-17T13:00:00Z/2025-02-17T15:01:00Z',
    box: {
      dimensions: {
        cartesian: [10.0, 10.0],
      },
      material: {
        stripe: {
          orientation: 'VERTICAL',
          evenColor: {
            rgba: [10, 21, 10, 0],
          },
          oddColor: {
            rgba: [10, 2, 250, 255],
          },
          offset: {
            number: 1,
          },
          repeat: 0.5,
        },
      },
    },
    path: {
      material: {
        solidColor: {
          color: {
            interval: '2025-02-17T13:00:00Z/2025-02-17T15:01:00Z',
            rgba: [255, 0, 0, 128],
          },
        },
      },
      width: [
        {
          interval: '2025-02-17T13:00:00Z/2025-02-17T15:01:00Z',
          number: 1.0,
        },
      ],
      show: [
        {
          interval: '2025-02-17T13:00:00Z/2025-02-17T15:01:00Z',
          boolean: true,
        },
      ],
    },
    position: {
      interpolationAlgorithm: 'LAGRANGE',
      interpolationDegree: 1,
      epoch: '2025-02-17T13:00:00Z',
      /**
        * 4个数为一组
        *  0.0, 118.87841653400005, 30.95679870500004, 0.0
        *  第0秒的时候，在经纬度118.87841653400005, 30.95679870500004的位置，高度是0.0
        *  10.0, 118.87826541800007,30.95680770900003, 0.0
        *  第10秒的时候，在经纬度118.87826541800007,30.95680770900003的位置，高度是0.0
      */
      cartographicDegrees: [
        0.0, 118.87841653400005, 30.95679870500004, 0.0, 10.0, 118.87826541800007,
        30.95680770900003, 0.0, 20.0, 118.8774481050001, 30.956860625000047, 0.0, 30.0,
        118.87660414600009, 30.956910105000077, 0.0, 40.0, 118.8759846580001, 30.95694296000005,
        0.0, 50.0, 118.87542502500003, 30.956978761000073, 0.0, 60.0, 118.87473380100005,
        30.957024103000037, 0.0,
      ],
    },
  },
];

const CesiumCreate: React.FC = () => {
  const cesiumRef = useRef<HTMLDivElement>(null);

  // 初始化调用
  useEffect(() => {
    if (cesiumRef.current) {
      // 创建实例
      const viewer = new Cesium.Viewer(cesiumRef.current, {
        infoBox: false, // 关闭信息框，不关闭控制台会有报错
        baseLayerPicker: false,
      });
      // 隐藏logo
      viewer.cesiumWidget.creditContainer.style.display = 'none';

      // 从异步图像提供商创建一个新的图像层。该层将处理任何异步负载或错误，并在准备就绪后开始呈现图层。
      const imageryLayer = Cesium.ImageryLayer.fromProviderAsync(
        Cesium.SingleTileImageryProvider.fromUrl(url),
      );
      imageryLayer.alpha = 0.5;
      viewer.imageryLayers.add(imageryLayer);

      let dataSourcePromise;
      let i = 30.957024;
      let a = 60;
      // 为日期创建一个新的实例
      const epoch = Cesium.JulianDate.fromIso8601('2025-02-17T13:00:00Z');
      const updateCZML = async () => {
        i += 0.0001;
        a += 10;
        // 更新路径数据
        czml[1].position.cartographicDegrees.push(a, 118.8747338, i, 0);
        // 计算新的时间戳
        /**
         * Cesium.JulianDate.addSeconds(julianDate, seconds, result) → JulianDate
         *  将所提供的秒数添加到所提供的日期实例中。
         *  想要图形随着轨迹移动而移动，就得修改clock的currentTime这个字段
         * */
        const newTime = Cesium.JulianDate.addSeconds(epoch, a, new Cesium.JulianDate());
        // 创建所提供的日期的ISO8601表示形式。
        const newTimeString = Cesium.JulianDate.toIso8601(newTime);
        if (czml[0]?.clock) {
          // 上一次移动的时间 viewer.clockViewModel.clock.currentTime.toString();
          // czml[0].clock.currentTime = viewer.clockViewModel.clock.currentTime.toString();
          czml[0].clock.currentTime = newTimeString;
          viewer.entities.removeAll();
          /**
           * add(dataSource) → Promise.<DataSource>
           *   创建对加载所提供的CZML数据的新实例的承诺
           *   add 是异步函数，所以要用await/async  try/catch
           * */
          try {
            await viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
          } catch (err) {}
        }
      };

      setInterval(updateCZML, 1000);

      const loadInitialData = async () => {
        try {
          dataSourcePromise = await viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
          viewer.zoomTo(dataSourcePromise);
        } catch (err) {}
      };
      loadInitialData();

      return () => {
        if (!viewer.isDestroyed()) {
          viewer.destroy();
        }
      };
    }
  }, []);

  return (
    <div id={'cesiumContainer'} ref={cesiumRef} style={{ height: '100vh', width: '100vw' }}></div>
  );
};

export default CesiumCreate;

cesium动态修改行驶路线
祁_z
11-07 3911
参考：http://cesium.xin/wordpress/archives/204.html <!DOCTYPE html> <html lang="en"> <head> <#-- 在模型的任意位置上添加点 --> <!-- Use correct character set. --> <met...
使用Cesium加载CZML数据
TqbcAbap的博客
09-24 645
Cesium是一个用于构建地理信息系统和虚拟地球应用的JavaScript库。它提供了丰富的功能，可以加载和可视化各种地理数据格式。其中，CZML（Cesium Language）是一种ZML数据Cesium是一个用于构建地理信息系统和虚拟地球应用的JavaScript库。它提供了丰富的功能，可以加载和可视化各种地理数据格式。其中，CZML（Cesium Language）是一种用于描述地理信息的数据格式，ZML数据Cesium是一个用于构建地理信息系统和虚拟地球应用的JavaScript库。它提供了丰富的
如何使用Cesium CZML绘制小行星轨道模型（一）
wenxinzhu的博客
03-01 2561
要使用Cesium的czml来绘制小行星轨道模型： 1. 收集小行星的轨道数据 2. 将轨道数据转换为CZML格式。可以使用python库czml来实现，czml将轨道数据转换为json格式的czml文件 3. 在Cesium中加载czml文件并解析其中的轨道数据 4. 根据解析出的轨道参数，计算小行星在轨道上的位置和速度，并将其转换为Cesium的Entity 5. 使用Cesium的图形接口，例如Path或PolylineGlowMaterialProperty，绘制小行星的轨迹。
cesium_czml_path.html
04-10
cesium czml 路径动画，路径漫游，三维展示 [removed][removed] <link href="../cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
Cesium CZML PATH
清风专栏
06-11 1342
[ { id: "document", name: "CZML Path", version: "1.0", clock: { interval: "2012-08-04T10:00:00Z/2012-08-04T10:03:00Z", currentTime: "2012-08-04T10:00:00Z", multiplier: 10, }, }, { id: "path", name: "pa..
cesium-CZML描述动态场景
孙霸天的专栏
01-18 2130
cesium-CZML描述动态场景 CZML具有两种动态可视化机制：按时间间隔和按时间戳描述动态场景变化。按时间间隔描述动态变化是指CZML属性值在一段时间内是一个固定值，而在另一段时间是另一个固定值；按时间戳描述动态变化是指每个时间节点对应一个值，通过内插算法可推算两个时间节点之间的属性值。 按时间间隔描述变化 通常情况下CZML的属性值是一个数组，数组中的每个元素对应一个不同的时间和属性值。对于时间间隔，使用interval属性，通过ISO 8601 interval格式的字面值表示，这种表示方法的好处
cesiumjs开发实践(六) CZML
uag 的博客
12-07 9122
摘要: CZML是cesium中很重要的一个概念，也是一个亮点，CZML使得cesium很酷很炫地展示动态数据成为可能。 CZML是cesium中很重要的一个概念，也是一个亮点，CZML使得cesium很酷很炫地展示动态数据成为可能。 CZML是一种JSON格式的字符串，用于描述与时间有关的动画场景，CZML包含点、线、地标、模型、和其他的一些图形元素，并指明了这些元素如何随时间而变化
VUE3-Cesium（加载czml）
damadashen的博客
06-20 3520
Cesium中czml格式文件的详解及使用。
cesium 卫星czml 垂直线
最新发布
01-15
为了在 Cesium 中通过 CZML 文件实现卫星轨迹的垂直线效果，可以利用 `position` 和 `path` 属性来定义卫星的位置及其路径，并且可以通过设置 `material` 来改变路径的表现形式。然而，对于创建从地面到卫星位置的...
Ceisum实时获取后台数据 实时更新实体位置信息
2401_84097658的博客
04-19 680
return _;})();}, {”,},}];// 动态赋值var a = 20;a+= 10;//图标：更新czml坐标//线：更新entities坐标if (!}else{//只展示5条坐标数据//}}, 1000);Sandcastle.addToolbarButton(‘清除计时器’, function() {});二维展示三维展示多个实体运动：实时加载数据 更新位置信息});width : 1,
cesium 加载gltf并实时改变位置 SampledProperty方式
AllBluefm的专栏
04-02 1440
1、知道车辆所有轨迹的点坐标，用entity方式添加模型，position用SampledPositionProperty记录每个点的时间和位置，并设置好clock。业务描述：在场景中添加一个车辆，并实时改变车辆的位置，可选方案比较多，根据实际情况有不同的实现方式。3、只知道当前位置的坐标。2、知道车辆所有轨迹的点坐标，采用CZML方式。
三维地图Cesium，加载一个模型，模型沿着给定的一组经纬度路线移动
qq_920189602的博客
06-09 3005
三维地图Cesium，加载一个模型，模型沿着给定的一组经纬度路线移动 1、加载指定可自定义火车模型 2、移动的路线可以自定义修改，也可以在地图上自己选择移动路线(取路线代码已有) 3、给定指定的移动速度 4、视角切换(第一视角、自由视角、跟随视角) 5、根据指定的经纬度点为起点开始移动 6、停止移动、开始移动、到站提示、从起点重新移动、默认相机的视角 7、根据实际业务，接口获取获取的速度、移动路线、车的状态(前进、静止、后退)来控制模型的状态
cesium-动态数据格式CZML介绍
孙霸天的专栏
01-18 7547
cesium-动态数据格式CZML介绍 CZML定义 CZML是Cesium团队制定的一种用来描述动态场景的JSON架构语言,可以用来描述点、线、多边形、体、模型及其他图元，同时定义它们是怎样随时间变化的。CZML采用数据驱动的方式完成场景加载渲染,开发者在CZML中定义场景数据类型、交互信息、时间节点等内容,不需要额外的代码便可构建出丰富的场景。 Cesium与CZML的关系就如同Google Earth和KML的关系。CZML和KML都是用来描述场景的数据格式，KML是由XML语言定义的，而CZML是特
5.Cesium添加czml数据实现车辆轨迹运动效果
skr_Rany的博客
01-20 3230
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,
VUE + cesium 动态路网、动态圆、范围线
weixin_56422453的博客
10-30 1852
vue+cesium 实现动态路网、动态圆、范围线方法
cesium实现卫星轨迹CZML（已知卫星两行参数）
GIS
07-11 1582
cesium实现卫星轨道
Cesium CZML绘制Entity
ismartcube的博客
11-29 1169
Cesium 提供了一个强大的API，支持渲染地球、地图以及许多地理空间数据，适用于实时数据可视化、地理信息系统（GIS）和航天工程等领域。Entity 是Cesium中的基本绘制单元，表示场景中的一项物体，可以是点、线、面，甚至是更复杂的 3D 模型或路径。通过 CZML 文件，你可以以时间序列的形式描述Entity的属性，如位置、颜色、大小等。通过使用CZML格式，Cesium能够高效地渲染复杂的时间序列数据，使得地理空间可视化更加生动和富有表现力。
Cesium——如何让模型沿着设定的轨迹运动加拖尾(非czml)
qq_54653738的博客
03-27 3433
需求为给出两个经纬度坐标，让模型从一个位置运动到另一个位置
CesiumJS动态生成线
weixin_53524141的博客
07-21 591
CesiumJS动态生成线
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值