Cesium空间数据的加载

在Cesium中一版会使用到的数据分为：矢量数据和栅格数据
矢量数据：几何体的加载，模型、标签等
栅格数据：地图、地形的加载
加载空间数据所需准备

// 加载新地图，设置一个变量用于存储新地图的信息
    var esri = new Cesium.ArcGisMapServerImageryProvider({
      url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    })
    Cesium.Ion.defaultAccessToken = '官网申请token';
    const viewer = new Cesium.Viewer('yc-cesiumContainer',{
      // 首先要把默认的地图按钮设置为隐藏,否则会影响新地图的加载
      baseLayerPicker: false,
      // 设置地图
      imageryProvider:esri,
      // 放入引入的地形,CesiumTerrainProvider方法是将地形数据，转换为Cesium可以访问的格式
      terrainProvider: new Cesium.CesiumTerrainProvider({
        // url用于放入地形服务器的地址
        url:Cesium.IonResource.fromAssetId(1),
        // 可以增加法线，用于提高光照效果
        requestVertexNormals:true,
        // 可以增加水面特效
        requestWaterMask:true
      })
    });

    // 设置好视口位置，否则观测不到加载的物体
    viewer.camera.setView({
      // 设置经纬度位置和相机高度
      destination: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 2500.0),
      // 设置相机方向
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90.0),
        roll:0.0
      }
    })

一、几何体中点的加载

//存储位置信息
var position = new Cesium.Cartesian3.fromDegrees(116.39,39.91,0)
// 使用entities属性中的add方法，对集合体进行绑定和添加
const entity1 = viewer.entities.add({
   // position用于设置几何体的位置
   position:position,
   // 将物体设置为圆点
   point:{
     // 圆点大小
     pixelSize:100,
     //颜色为红色
     color:new Cesium.Color(1,0,0,1),
   }
})

效果图：

二、线的加载

//存储位置信息
var position = new Cesium.Cartesian3.fromDegrees(116.39,39.91,0)
// 使用entities属性中的add方法，对集合体进行绑定和添加
const entity2 = viewer.entities.add({
  // polyline是生成线条的属性
  polyline: {
    // 可见
    show:true,
    // 注意！这里的position不是单一的图形位置，
    // 线条是多个点连接起来的，需要放入一个经纬度坐标集合
    // Cesium的fromDegreesArray方法，用于解析多个位置数据
    positions: new Cesium.Cartesian3.fromDegreesArray([116.39,39.91,116.40,39.91]),
    // 线条宽度
    width: 5,
    // 材质颜色
    material: new Cesium.Color(0,0,1,1)
  }
})

效果图：

三、加载一个面

//存储位置信息
var position = new Cesium.Cartesian3.fromDegrees(116.39,39.91,0)
// 使用entities属性中的add方法，对集合体进行绑定和添加
const entity3 = viewer.entities.add({
  // 位置
  position: position,
  // plane用于绘制一个面
  plane: {
    // 确认面得朝向,这里设置沿着Z轴平铺，参考笛卡尔坐标
    plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z,0.0),
    // dimensions属性设置面的长度和宽度
    dimensions: new Cesium.Cartesian2(400,300),
    // 材质颜色红色，透明度0.5
    material:Cesium.Color.RED.withAlpha(0.5),
    // 是否显示边框
    outline:true,
    outlineColor: Cesium.Color.BLACK
  }
})

效果图：

四、空间加载文字

此时的空间中的文字不会随着地图的缩放而改变大小，并且无论如何旋转始终正对屏幕

//存储位置信息
var position = new Cesium.Cartesian3.fromDegrees(116.39,39.91,0)
// 使用entities属性中的add方法，对集合体进行绑定和添加
const entity4 = viewer.entities.add({
  position: position,
  label:{
    text:'实验文字',
    font: '50px Helvetica',
    fillColor: Cesium.Color.SKYBLUE
  }
})

效果图：

五、加载飞机模型

//存储位置信息
var position = new Cesium.Cartesian3.fromDegrees(116.39,39.91,2000)
// 加载飞机模型
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90,0,0))
var entity5 = viewer.entities.add({
  position:position,
  //设置飞机朝向和翻滚角度
  orientation:orientation,
  model:{
    uri:'../../lib/models/Cesium_Air.glb',
    minimumpixelSize:100,
    maximumScale:10000,
    show:true
  }
})
//将相机视口快速绑定到模型位置
viewer.trackedEntity = entity5;

效果图：