动态数据格式CZML

最新推荐文章于 2023-10-28 09:08:20 发布

未名＇

最新推荐文章于 2023-10-28 09:08:20 发布

阅读量2.9k

点赞数 4

分类专栏： Cesium 文章标签：前端

本文链接：https://blog.csdn.net/qq_43892230/article/details/126244766

版权

Cesium 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一、CZML的来源和介绍

Cesium团队为了描述动态场景专门制定了CZML数据格式，这是一种JSON数据格式，不仅方便交互，而且具有时间属性，其既可以用于绘制各种几何图形，给定颜色、材质、透明度等也可以根据实际的场景需求，放入动态的模型数据，是的场景更加生动。除此以外还可以让CZML中的属性跟随时间变化，如：画面中的小车，给其定义了两个不同时间的位置，通过CZML得差值算法，画面上可以准确地显示车在两个时间点的运动过程。CZML的结构可以更加高效的传输数据，在显示场景之前，不需要加载整个场景数据，可随着时间变化不断加载数据到场景中。

二、CZML数据结构详解

CZML还是一个开放的格式，支持在其基础上进一步扩展功能和特性。下面是一个最基础的CZML数据，它至少要包含两个对象，每一个对象都是一个CZML的数据包。

其中第一个对象，是用于声明它是CZML格式，主要在其中填入一些固定的数值。id属性固定是document,name属性值可以根据加载的数据自己命名，version用于设定CZML版本号，暂时只有1.0版本。
第二个对象存放的就是场景内的几何模型数据了，每一个几何模型对象都有唯一的id属性用于标识，如果id没有指定，cesium会自动生成一个，但是在后续开发中我们无法对其进行引用，如添加数据等，所以id我们要提前设定好，且在CZML中是唯一的。这里的name属性属于可选配置，可以自定义名称。position用于存放模型位置信息，它定义了一个caetographicDegrees对象，其中三个数据分别设定的是经纬度和高度。box用于指定我们绘制的几何体是盒状的，dimensions存放了尺寸信息，他的cartesuan对象设定了长宽高的数值，material则用于设置几何体的材质颜色。

const czml = [
      {
        id:"document",
        name: "box",
        version: "1.0",
      },
      {
        id:"shape1",
        name: "Blue box",
        position: {
          cartographicDegrees: [-114.0,40.0, 300000.0],
        },
        box: {
          dimensions: {
            cartesian: [400000.0,300000.0,500000.0],
          },
          material:{
            solidColor: {
              color: {
                rgba:[0, 0, 255, 255]
              }
            }
          }
        }
      }
    ]

三、CZML轨迹数据处理

对比上一个对象，这个对象中加入了clock属性，它用于设定时间相关的数据，更是构建动态轨迹场景必不可少的元素。

interval设置的是运行的起始时间和结束时间，这里的时间我们使用ISO 8601规范来表示日期和时间，好处：不需要进行时差计算，也不需要换算去协调世界时。
currentTime设定的是当前的时间节点。
multiplier设定的是时间的速率，他可以设置沿轨迹运行的速度。
第二个对象放入了汽车模型加载的数据model中存放需要加载模型的路径，这里根据模型格式，放在gltf属性中。
position存放的是模型的位置信息，这些位置信息将自动与clock中设置的时间信息关联起来，使得时刻与坐标点相对应，从而实现动态轨迹效果。
interpolationAlgorithm设定的是插值算法，他会将各个轨迹点连成一条线，这里绘制的是直线，所以设定为LINEAR。
forwardExtrapolationType同样用于插值算法，防止出现设定数值超出样本数据范围的情况
cartesian中放入的是时间、经纬度、高度数据，每四个数据为一组，这里设定了两组数据
orientation存放的是模型方向信息，还有种更简单的设置方法：可以把unitQuaternion替换成velocityReference,数值设置为#position,Cesium会根据位置信息进行四元数方向转换，从而达到模型在运动时方向转换的效果

"orientation": {
  "velocityReference": "#position"
}

在第三个对象中，我们绘制了一条行驶轨迹线，polyline表明设置的是线条，position放入的是经纬度和高度信息
clampToGround设置为true，可以使得生成的线条紧贴地面

// 创建CZML对象
var czml2 = [
  {
    "id": "document",
    "version": "1.0",
    "clock": {
      "interval": "2018-07-19T15:18:00Z/2018-07-19T15:18:30Z",
      "currentTime": "2018-07-19T15:18:00Z",
      "multiplier": 5,
      "range": "LOOP_STOP",
      "step": "SYSTEM_CLOCK_MULTIPLIER"
    }
  },
  {
    "id": "CesiumMilkTruck",
    "model": {
      "gltf": "models/CesiumMilkTruck/CesiumMilkTruck.glb"
    },
    "position": {
      "interpolationAlgorithm": "LINEAR",
      "forwardExtrapolationType": "HOLD",
      "cartesian": [
        "2018-07-19T15:18:00Z",
        1216348.1632364073,
        -4736348.958775471,
        4081284.5528982095,
        "2018-07-19T15:18:30Z",
        1216369.1229444197,
        -4736377.467107148,
        4081240.888485707
      ]
    },
    "orientation": {
      "unitQuaternion": [
        0.3084011337938999,
        0.3210181022701266,
        -0.45850421987074924,
        0.7686388857813198
      ]
    }
  },
  {
    "id": "Polyline",
    "polyline": {
      "positions": {
        "cartesian": [
          1216348.1632364073,
          -4736348.958775471,
          4081284.5528982095,
          1216369.1229444197,
          -4736377.467107148,
          4081240.888485707
        ]
      },
      "material": {
        "polylineOutline": {
          "color": {
              "rgba": [255, 255, 0, 255]
          },
          "outlineColor": {
              "rgba": [0, 0, 0, 255]
          },
          "outlineWidth": 2
        }
      },
      "width": 10,
      "clampToGround": true
    }
  }
]

四、CZML数据使用方法

首先使用Cesium的dataSources属性加载数据集，因为调用的是CZML数据，这里载入时需要使用CzmlDataSource进行转换，load中即可以放入存储数据的变量，也可以放入文件路径，CZML导入完成后，我们需要对载入后的模型进行操作，就需要使用Promise的then方法，使得数据加之后再调用，将加载的数据作为参数传入

// 加载新地图，设置一个变量用于存储新地图的信息
var esri = new Cesium.ArcGisMapServerImageryProvider({
  url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
Cesium.Ion.defaultAccessToken = '';
const viewer = new Cesium.Viewer('yc-cesiumContainer',{
  // 首先要把默认的地图按钮设置为隐藏,否则会影响新地图的加载
  baseLayerPicker: false,
  // 设置地图
  imageryProvider:esri,
  shouldAnimate:true, //自动播放
  // 放入引入的地形,CesiumTerrainProvider方法是将地形数据，转换为Cesium可以访问的格式
  terrainProvider: new Cesium.CesiumTerrainProvider({
    // url用于放入地形服务器的地址
    url:Cesium.IonResource.fromAssetId(1),
    // 可以增加法线，用于提高光照效果
    requestVertexNormals:true,
    // 可以增加水面特效
    requestWaterMask:true
  })
});
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml2)).then(function (dataSource){
  // 这里我们需要将相机的视口位置设定到载入的模型处
  // 使用entities的getById方法可以获取到绑定id的模型数据
  // trackedEntity则可以绑定视口位置
  viewer.trackedEntity = dataSource.entities.getById('CesiumMilkTruck')
  // 如果需要车辆循环行驶播放，要在Cesium初始化时，设置shouldAnimate自动播放属性为true
})