Cesium 基本概念：创建实体和相机控制

基本概念

Entity

javascript 复制代码

// 创建一个实体
const entity_1 = viewer.entities.add({
  position: new Cesium.Cartesian3(0, 0, 10000000),
  point: {
    pixelSize: 10,
    color: Cesium.Color.BLUE
  }
});

javascript 复制代码

// 通过经纬度创建实体
const position = Cesium.Cartesian3.fromDegrees(180.0, 0.0);
// 创建一个恒星实体
let entity_2 = viewer.entities.add({
  name: 'entity_2',
  position: position,
  point: {
    pixelSize: 10,
    color: Cesium.Color.YELLOW,
    outlineColor: Cesium.Color.BLACK,
    outlineWidth: 2
  }
});

javascript 复制代码

    // 创建PolylineVolume实体
    const positions = Cesium.Cartesian3.fromDegreesArrayHeights([
      0, 0, 11742000,
      20, 0, 11742000,
      40, 0., 11742000,
      60, 0, 11742000,
      80, 0., 11742000,
      100, 0, 11742000,
      120, 0., 11742000,
    ]);

    const polyline = viewer.entities.add({
      polyline: {
        width: 4,
        positions: positions, // 路径点数组
        material: Cesium.Color.RED.withAlpha(0.5) // 设置半透明的红色材质
      }
    });

Cesium.Cartesian3代表固连在地球上的笛卡尔坐标系（大地坐标系）上的点。

大地坐标系x轴正方向为从地心指向经纬度（0，0）点方向，y轴从地心指向（90，0）方向，z轴从地心指向（0，90）方向。

Cesium提供（经度，纬度，高度）转大地坐标的方法Cesium.Cartographic.fromCartesian，和大地坐标转经纬高坐标的方法Cesium.Cartesian3.fromDegrees

DataSource

javascript 复制代码

const czml = [
  {
    id: "document",
    name: "CZML Point",
    version: "1.0",
    clock: {
      "interval": "2012-03-15T10:00:00Z/2012-03-15T15:00:00Z",
      "currentTime": "2012-03-15T10:00:00Z",
      "multiplier": 60,
      "range": "LOOP_STOP",
      "step": "SYSTEM_CLOCK_MULTIPLIER"
    }
  },
  {
    id: "point 1",
    name: "point",
    label: {
      fillColor: {
        rgba: [255, 255, 255, 255],
      },
      font: "13pt Lucida Console",
      horizontalOrigin: "LEFT",
      pixelOffset: {
        cartesian2: [20, 0],
      },
      style: "FILL",
      text: "referencing fillColor",
    },
    position: {
      "interpolationAlgorithm": "LAGRANGE",
      "interpolationDegree": 5,
      "referenceFrame": "INERTIAL",
      "epoch": "2012-03-15T10:00:00Z",
      cartographicDegrees: [
        0, .0, .0, 12742000,
        2000, 20.0, .0, 12742000,
        4000, 40.0, .0, 12742000,
        6000, 60.0, .0, 12742000,
        8000, 80.0, .0, 12742000,
        10000, 100.0, .0, 12742000,
        12000, 120.0, .0, 12742000,
        14000, 140.0, .0, 12742000,
        16000, 160.0, .0, 12742000,
        18000, 180.0, .0, 12742000,
      ],
    },
    point: {
      color: {
        rgba: [255, 255, 255, 255],
      },
      pixelSize: 5,
    },
    path: {
      "show": [
        {
          "interval": "2012-03-15T10:00:00Z/2012-03-16T10:00:00Z",
          "boolean": true
        }
      ],
      "width": 1,
      "material": {
        "solidColor": {
          "color": {
            "rgba": [
              255, 255, 255, 100
            ]
          }
        }
      },
      "resolution": 120,
      leadTime: 0,
      trailTime: 1e10
  }
];

javascript 复制代码

const dataSourcePromise = Cesium.CzmlDataSource.load(czml)
viewer.dataSources.add(dataSourcePromise)
dataSourcePromise.then(() => {
	viewer.zoomTo(dataSourcePromise)
})

czml中，第一个元素为描述信息，从第二个元素开始为实体。

其中path属性表示运动轨迹，可以通过leadTime和trailTime控制前后长度。

相机控制

采用以下方式控制相机绕地球自转
center为地心向z轴偏移1个单位的点，viewer.camera.lookAt(center, offfset)offset参数为以center为原点的局部坐标系，z轴正方向为地心到center的方向。

javascript 复制代码

let distance = 50000000
let height = 10000000
let a = 0
let lastTime: number | undefined = undefined
viewer.scene.preRender.addEventListener(() => {
	 // 抵消地球自转
	 let currentTime = viewer.clock.currentTime
	 let days = currentTime.dayNumber + currentTime.secondsOfDay / 24 / 3600
	 if (lastTime != undefined) {
	   a += (days - lastTime) * 2 * Math.PI
	 }
	 lastTime = days
	
	 if (viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
	   viewer.camera.lookAt(center,
	     new Cesium.Cartesian3(distance * Math.sin(a), distance * Math.cos(a), height))
	 }
})