Viewer 查看器类

展示三维要素内容的主要窗口，不仅包含三维地球视窗，还包含基础控件。

在定义viewer对象时，需设定基础部件、图层等初始化状态

new Cesium.Viewer(cesiumContainer, option)

参数1：指定地图主窗口 div的ID
参数2：可选，包含图层、地形、时间系统等，

Scene 场景类（重要）

是所有3D对象的容器，会在viewer内部隐式创建。可设置基础图层（地图、地形、光照强度等）、场景数据、鼠标事件交互、相机视口移动、图层上绘制几何体（点、线、面）

viewer.scene.globe.show = false;隐藏地球
注意：在viewer中设置图层 === 在scene中设置图层viewer.imgerLaters === viewer.scene.imgerLaters // 结果是 true

Entity 实体类

const entity = viewer.entities.add({
    // 经度 ，纬度，高度（单位米）
    position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400),
    point: {
        pixelSize: 100,
        color: new Cesium.Color(0, 1, 0, 1)
    }
})
// 挂载创建好的圆点
viewer.trackedEntity = entity;

DataSourceCollection 数据源集合类

支持加载矢量数据+外部文件的调用，CzmlDataSource、KmlDataSource、GeoJsonDataSource。

viewer.dataSources.add(
    Cesium.GeoJsonDataSource.load(
      '../../libs/SampleData/ne_10m_us_states.topojson'
    )
)

坐标系

WGS84经纬度坐标系（没有实际对象）
WGS84弧度坐标系（Cartographic）
笛卡尔空间直角坐标系（Caresian3）
平面坐标系（Cartesian2）
4D笛卡尔坐标系（Cartesian4） new Cesium.Cartographic(longitude, latitude, height) // 经度，纬度，高度（单位米）

角度与弧度换算

弧度 = Π/180 x 经纬度角度
经纬度角度 = 180/Π x 弧度

相机系统

setView方法设置相机视角

// 存储相机目的地坐标
const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);
viewer.camera.setView({
    destination: position, // 设置相机目的地
    // 相机视口方向
    orientation: {
        heading: Cesium.Math.toRadians(0), // 沿着y轴旋转，水平，朝向正北
        pitch: Cesium.Math.toRadians(-90), // 沿着x轴旋转，上下，朝向地面
        roll: 0, // 沿着z轴，翻转角度，不翻转
    }, 
})

flyTo方法，具有空中飞行逐步切换视域的效果，可设置飞行时间

// 存储相机目的地坐标
const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);
viewer.camera.flyTo({
    destination: position, // 设置相机目的地
    // 相机视口方向
    orientation: {
        heading: Cesium.Math.toRadians(0), // 沿着y轴旋转，水平，朝向正北
        pitch: Cesium.Math.toRadians(-90), // 沿着x轴旋转，上下，朝向地面
        roll: 0, // 沿着z轴，翻转角度，不翻转
    }, 
    duration: 5, // 单位秒
})

lookAt方法，直接将视角跳转到设置的地点上，但用鼠标任意旋转视角方向，是不会改变其位置。一般用于锁定某个场景的视角。

// 给相机目的地位置，仅需 经纬度
const center = Cesium.Cartesian3.fromDegrees(116.39, 39.91);

const heading = Cesium.Math.toRadians(50)
const pitch = Cesium.Math.toRadians(-90)
const range = 2500

viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))

viewBoundingSphere方法，视角切换效果与setView方法一样，没有飞行的过渡效果，而是直接切换视口到指定点。

不同点：指定地点，可从多个角度更好的观测，或建筑物进行定点漫游时。

// 坐标点
const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 1500);

// 朝向
let orientation = Cesium.Transforms.headingPitchRollQuaternion(positio, new Cesium.HeadingPitchRoll(-90, 0, 0));
let entity = viewer.entities.add({
    position: position,
    orientation: orientation,
    model: {
        uri: '../../libs/models/Cesium_Air.glb', // 飞机模型
        minimumPixelSize: 100,
        maximumScale: 10000,
        show: true,
    }
})

viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position, 20), new Cesium.HeadingPitchRange(0, 0, 0))

地图、地形加载

const viewer = new Cesium.Viewer('绑定div上的id', {
    baseLayerPicker: false, // 地图切换按钮隐藏
})

3DTiles文件结构

{
  "asset": {
      // 版本号
    "version": "1.0",
    // 特定应用中的版本号
    "tilesetVersion": "1.2.3"
  },
  "extras": {
    "name": "Sample Tileset"
  },
  "properties": {
    "id": {
      "minimum": 0,
      "maximum": 9
    },
    "Longitude": {
      "minimum": -1.3197192952275933,
      "maximum": -1.319644104024109
    },
    "Latitude": {
      "minimum": 0.698848878034009,
      "maximum": 0.6989046192460953
    },
    "Height": {
      "minimum": 6.161747192963958,
      "maximum": 85.41026367992163
    }
  },
  // 非误差单位，低于该误差时，瓦片不会被渲染，单位米
  // 整个瓦片集被渲染的误差
  "geometricError": 240,
  // 根瓦片
  "root": {
    /* 
    "transform"  可选数组，
    作用：加载大量模型or建筑物时，
     单个模型的点云瓦片集能在他自己的坐标系中定义，
     内部数据是4x4 仿射变换矩阵，列主序，
     实现从瓦片局部坐标系->父瓦片or根瓦片坐标系的变换
     */
    "boundingVolume": {
      "region": [
        -1.3197209591796106,
        0.6988424218,
        -1.3196390408203893,
        0.6989055782,
        0,
        88
      ]
    },
    // 当前瓦片集被渲染的误差
    "geometricError": 70,
    "refine": "ADD", // 定义LOD细化方法
    // 引入瓦片内容，即瓦片文件地址
    "content": {
      "uri": "parent.b3dm",// i3dm pnts（不可自己引用自己）
      "boundingVolume": {
        "region": [
          -1.3197004795898053,
          0.6988582109,
          -1.3196595204101946,
          0.6988897891,
          0,
          88
        ]
      }
    },
    "children": [
      {
        "boundingVolume": {
          "region": [
            -1.3197209591796106,
            0.6988424218,
            -1.31968,
            0.698874,
            0,
            20
          ]
        },
        "geometricError": 0,
        "content": {
          "uri": "ll.b3dm"
        }
      },
      {
        "boundingVolume": {
          "region": [
            -1.31968,
            0.6988424218,
            -1.3196390408203893,
            0.698874,
            0,
            20
          ]
        },
        "geometricError": 0,
        "content": {
          "uri": "lr.b3dm"
        },
        "extras": {
          "id": "Special Tile"
        }
      },
      {
        "boundingVolume": {
          "region": [
            -1.31968,
            0.698874,
            -1.3196390408203893,
            0.6989055782,
            0,
            20
          ]
        },
        "geometricError": 0,
        "content": {
          "uri": "ur.b3dm"
        }
      },
      {
        "boundingVolume": {
          "region": [
            -1.3197209591796106,
            0.698874,
            -1.31968,
            0.6989055782,
            0,
            20
          ]
        },
        "geometricError": 0,
        "content": {
          "uri": "ul.b3dm"
        }
      }
    ]
  }
}

// 在应用文件 html  vue jsx 中 渲染
viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url:　'tileset.json',
        maximumScreenSpaceError:，// 最大的屏幕空间误差
        maximumNumberOfLoadedTiles: ,// 最大加载瓦片个数
    })
)

cesium学习