5. Cesium adds czml data to achieve vehicle trajectory motion effects

czml data

  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,
      },
    },
    {
    
    
      id: 'Vehicle',
      name: 'outline',
      //添加图片
      billboard: {
    
    
        //图标
        image: require('./assets/img/bp2.png'),
        width: 110,
        height: 146,
        scale:1,
        pixelOffset: {
    
    
          cartesian2: [30, -65],
        }//偏移 
      },
     // 添加文字描述
      label: {
    
    
        fillColor: [
          {
    
    
            interval: '2012-08-04T16:00:00Z/2012-08-04T17:00:00Z',
            rgba: [255, 255, 0, 255],
          },
        ],
        font: 'bold 10pt Segoe UI Semibold',
        horizontalOrigin: 'CENTER',
        outlineColor: {
    
    
          rgba: [0, 0, 0, 255],
        },
        pixelOffset: {
    
    
          cartesian2: [50, -117],
        },
        scale: 1.0,
        text: '送货车',
        verticalOrigin: 'CENTER',
        backgroundColor: {
    
    
          rgba: [53, 88, 160, 255]
        },//背景色
        showBackground: true,
      },
	//添加blb模型及运动路径
      position: {
    
    
        interpolationAlgorithm: 'LINEAR',
        forwardExtrapolationType: 'HOLD',
        epoch: '2012-08-04T16:00:00Z',
        cartographicDegrees: [
          0.0,
          -75.5962909552622,
          40.037712764304985,
          6,
          170.0,
          -75.59726023923558,
          40.0373090150649,
          6,
          180.0,
          -75.59736324019724,
          40.03731615645455,
          6,
          190.0,
          -75.59744583235852,
          40.03737195629371,
          6,
          210.0,
          -75.59838535050095,
          40.03865782953031,
          6,
          220.0,
          -75.59793059375934,
          40.03885234831539,
          6,
          240,
          -75.59768890822797,
          40.03851980782105,
          6,
        ],
      },
      model: {
    
    
        gltf: '/obj/CesiumMilkTruck.glb',
        minimumPixelSize: 40,
        maximumScale: 0.5,
      },
      orientation: {
    
    
        velocityReference: '#position',
      },
    },
  ]
  
this.dataSourcePromise = new Cesium.CzmlDataSource.load(czml)
      // 位置属性
this.viewer.dataSources.add(this.dataSourcePromise)