二. cesium 建立飞行追踪器 02

本教程将向您展示如何构建第一个Cesium应用，以使用FlightRadar24收集的雷达数据可视化从旧金山到哥本哈根的真实飞行

您将学习如何：

• 在网络上设置并部署您的Cesium应用
• 添加全局3D建筑物，地形和图像的基本层
• 通过一段时间内的位置列表准确地可视化飞机

效果

同上一篇, 需要有cesium 账户,具体看 一. Cesium 学习笔记01

接着开始本篇重点, 我实在vue 内集成了 cesium 所以,代码和官网略有差异, 感兴趣可以前往 官网 查看

第1步.初始化cesium 球体

包括

1. 初始化Cesium地球图,this.myToken 是申请的 token,见上一篇

2. 添加Cesium OSM 建筑物
3. 通过经纬度,高度 设置初始界面位置

// 初始化cesium 球体
    init() {
    	   Cesium.Ion.defaultAccessToken = this.myToken;
	      // 第1步 初始化Cesium地球图
	      this.viewer = new Cesium.Viewer("cesiumContainer", {
	        terrainProvider: Cesium.createWorldTerrain(),
	      });
	      // 第2步 添加Cesium OSM 建筑物
	      this.buildingTileset = this.viewer.scene.primitives.add(
	        Cesium.createOsmBuildings()
	      );
	      // 第3步 通过经纬度,高度 设置初始界面位置
	      this.viewer.camera.flyTo({
	        destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
	        orientation: {
	          heading: Cesium.Math.toRadians(0.0),
	          pitch: Cesium.Math.toRadians(-15.0),
	        },
	      });
	      // 隐藏 底部水印
	      this.viewer._cesiumWidget._creditContainer.style.display = "none";
    }

第2步.添加飞行点位

将每一个飞行点位取出,在cesium地球上渲染出来
我将官网的点位数据存入json文件,页面直接引入import flyPointData from "./flyPointData.json";即可
飞行点位数据点json 数据点此 下载

FlightRadar24使用多种方法跟踪空中交通，包括雷达。为简单起见，我们将雷达数据直接复制到我>们的应用程序中，但是稍后您可以扩展此代码以解析原始数据，甚至在将样本从服务器传递到您的应用程序时甚至可视化实时空中交通。如果您感到好奇，可以下载 此航班收集的原始数据。

// 给cesium添加飞行点位
    addPoint() {
      // 将每一个飞行点位取出,在cesium地球上渲染出来,
      for (let i = 0; i < this.flightData.length; i++) {
        const dataPoint = this.flightData[i];
        this.viewer.entities.add({
          description: `Location: (${dataPoint.longitude}, ${dataPoint.latitude}, ${dataPoint.height})`,
          position: Cesium.Cartesian3.fromDegrees(
            dataPoint.longitude, // 经度
            dataPoint.latitude, // 纬度
            dataPoint.height // 高度
          ),
          //
          point: {
            pixelSize: 10, // 点位大小
            color: Cesium.Color.RED, // 点位颜色
          },
        });
      }
    },

第3步.将飞行点位连接起来,创建飞行移动实体

  // 将飞行点位连接起来,创建飞行移动实体
    createFlyLine() {
      /* 假设雷达样本相隔30秒，然后根据该假设计算整个飞行持续时间。
        获取航班的开始和结束日期时间，其中开始时间是已知的航班起飞时间（从PST转换为
        到UTC），停靠点就是起点加上计算出的持续时间。 （请注意，cesium使用的日期是JulianDate)
        通过将观看者的开始和停止时间设置为我们刚刚计算的飞行开始和停止时间来初始化观看者的时钟。
        另外，将查看者的当前时间设置为开始时间，然后将用户带到该时间。*/

      const timeStepInSeconds = 30;
      const totalSeconds = timeStepInSeconds * (this.flightData.length - 1);
      const start = Cesium.JulianDate.fromIso8601("2020-03-09T23:10:00Z");
      const stop = Cesium.JulianDate.addSeconds(
        start,
        totalSeconds,
        new Cesium.JulianDate()
      );
      this.viewer.clock.startTime = start.clone();
      this.viewer.clock.stopTime = stop.clone();
      this.viewer.clock.currentTime = start.clone();
      this.viewer.timeline.zoomTo(start, stop);
      // 加快播放速度50倍
      this.viewer.clock.multiplier = 50;
      // 开始播放场景
      this.viewer.clock.shouldAnimate = true;
      // SampledPositionedProperty 存储沿雷达样本系列的每个样本的位置和时间戳
      const positionProperty = new Cesium.SampledPositionProperty();

      for (let i = 0; i < this.flightData.length; i++) {
        const dataPoint = this.flightData[i];
        // 声明此单个样本的时间，并将其存储在新的JulianDate实例中
        const time = Cesium.JulianDate.addSeconds(
          start,
          i * timeStepInSeconds,
          new Cesium.JulianDate()
        );
        const position = Cesium.Cartesian3.fromDegrees(
          dataPoint.longitude,
          dataPoint.latitude,
          dataPoint.height
        );
        // 存储位置及其时间戳.
        // 在这里，我们将所有位置都预先添加，但是可以在运行时添加这些位置，因为这些示例是从服务器接收到的。.
        positionProperty.addSample(time, position);

        this.viewer.entities.add({
          description: `Location: (${dataPoint.longitude}, ${dataPoint.latitude}, ${dataPoint.height})`,
          position: position,
          point: { pixelSize: 10, color: Cesium.Color.RED },
        });
      }

      // STEP 4 CODE (green circle entity)
      // 创建一个实体，以一条直线可视化整个雷达样本系列，并添加一个沿样本移动的点(绿色的点)。
       const airplaneEntity = this.viewer.entities.add({
        availability: new Cesium.TimeIntervalCollection([
          new Cesium.TimeInterval({ start: start, stop: stop }),
        ]),
          position: positionProperty,
          point: { pixelSize: 30, color: Cesium.Color.GREEN },
          path: new Cesium.PathGraphics({ width: 3 }),
        });
        // 使相机跟踪此移动实体
        this.viewer.trackedEntity = airplaneEntity;
     }

到这,运行代码,就能看到一条白线将上一步创建的所有红色点位连接起来,并且有一个绿色的球在模拟飞机 从航线起点出发,往终点做飞行运动

最后.用飞机将绿色点位进行替换

首先,要有模型.按官网描述,我们要到官网上传模型,并取得对应ID,让后用官网的方法将模型引入项目

1. 下载飞机的3D模型。
2. 转到您的cesium帐户信息中心。将模型文件拖放到此页面上。
3. 选择3D模型（转换为glTF），然后点击上传。
4. 完成处理后，通过在仪表板中选择新资产并在右侧的预览窗口下查找来找到资产ID。
   
   将上一步// STEP 4 CODE (green circle entity)之后的代码删除,替换成下列代码即可

// 从cesium加载glTF模型,要申请 asset_id,为Number类型
      const airplaneUri = await Cesium.IonResource.fromAssetId(你的模型ID);
      const airplaneEntity = this.viewer.entities.add({
        availability: new Cesium.TimeIntervalCollection([
          new Cesium.TimeInterval({ start: start, stop: stop }),
        ]),
        position: positionProperty,
        // 附加3D模型替换掉绿点
        model: { uri: airplaneUri },
        // 根据位置自动计算方向
        orientation: new Cesium.VelocityOrientationProperty(positionProperty),
        path: new Cesium.PathGraphics({ width: 3 }),
      });

      this.viewer.trackedEntity = airplaneEntity;

至此,你就能看到真正的效果图 over