cesium常用知识小总结

viewer 查看器 用于构建应用程序的基本小部件

new Cesium.Viewer (container, options ) ，container：DOM元素的ID；options:描述初始化选项的对象

options的属性包含

clock 用于控制当前时间的时钟。

                var clock = new Cesium.Clock({
                    // 时钟开始时间
                    startTime : Cesium.JulianDate.fromIso8601("2022-09-29"),
                    // 当前时间
                    currentTime : Cesium.JulianDate.fromIso8601("2022-09-29"),
                    // 结束时间
                    stopTime : Cesium.JulianDate.fromIso8601("2022-09-30"),
                });

imageryProvider 提供要显示在椭球表面上的图像,不能直接实例化。

 // esri变量用于存储新地图信息
            this.esri = new Cesium.ArcGisMapServerImageryProvider({
                // 存放地图服务地址
                url:"https://services.arcgisonline.com/ArcGIS/rest/services/world_Imagery/MapServer"
            })
            this.viewer = new Cesium.Viewer("addBuild",{
                animation:false,
                timeline:false,
                baseLayerPicker:false, //默认地图按钮设置为false，否则会影响新地图加载
                imageryProvider:this.esri,  //设置地图
              
            })

terrainProvider 为椭球表面提供地形或其他几何形状

            // esri变量用于存储新地图信息
            this.esri = new Cesium.ArcGisMapServerImageryProvider({
                // 存放地图服务地址
                url:"https://services.arcgisonline.com/ArcGIS/rest/services/world_Imagery/MapServer"
            })
            this.viewer = new Cesium.Viewer("addBuild",{
                animation:false,
                timeline:false,
                baseLayerPicker:false, //默认地图按钮设置为false，否则会影响新地图加载
                imageryProvider:this.esri,  //设置地图
                // terrainProvider用于放入引入的地形图，CesiumTerrainProvider将地形数据转换为Cesium可以访问的数据
                terrainProvider: new Cesium.CesiumTerrainProvider({
                    // url用于存放地形图服务器地址
                    url:Cesium.IonResource.fromAssetId(1),
                    requestVertexNormals:true, //可以增强法线，用于提高光照效果
                    requestWaterMask:true  //增加水面效果
                })
            })

viewer 属性

1. animation 获取动画小部件
2. baseLayerPicker 默认地图按钮设置为false，否则会影响新地图加载
3. camera 获取相机
4. canvas 获取画布
5. scene 获取场景
6. entities 获取未绑定到特定数据源的实体的集合
   等等

camera 相机信息

position （位置）heading （方位角，绕z轴旋转）pitch（俯仰角，绕Y轴旋转）roll（翻滚角，绕x轴旋转）

           // 添加相机信息
            this.camera = this.viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(121.49,31.23,  3000.0),
                orientation:{
                    heading:0,
                    pitch:-90,
                    roll:0
                }
            })

相机设置的三种方式：

setView设置相机的位置，两种方式：Cartesian3、Rectangle

viewer.camera.setView({
            destination : Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0),     
            orientation: {       //设置视角
                // east, default value is 0.0 (north)左右摆头
                heading : Cesium.Math.toRadians(20.0), 
               // default value (looking down)上下抬头 -90俯视 0平视 90仰视(默认俯视)
                pitch : Cesium.Math.toRadians(-90.0),    
                roll : 0.0    // 默认值
            }
        });

 viewer.camera.setView({
            destination: Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0),//西, 南, 东, 北
            orientation: {
                heading : Cesium.Math.toRadians(20.0), // 方向
                pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
                roll : 0
            } 
        });

flyTo 将相机从当前位置移动到新位置

viewer.camera.flyTo({
            destination :Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0), // 设置位置
            orientation: {
                heading :Cesium.Math.toRadians(20.0), // 方向
                pitch :Cesium.Math.toRadians(-90.0),// 倾斜角度
                roll :0
            },
            duration:5, // 设置飞行持续时间，默认会根据距离来计算
            complete:function () {
            // 到达位置后执行的回调函数
            },
            cancle:function () {
            // 如果取消飞行则会调用此函数
            },
            pitchAdjustHeight:-90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
            maximumHeight:5000, // 相机最大飞行高度
            flyOverLongitude:100, // 如果到达目的地有2种方式，设置具体值后会强制选择方向飞过这个经度(这个，很好用)
        });

lookAt 使用目标和偏移量设置摄像机的位置和方向。目标必须在世界坐标

 var viewer = new Cesium.Viewer('cesiumContainer');
        var center = Cesium.Cartesian3.fromDegrees(114.44455, 22.0444);//camera视野的中心点坐标
        var heading = Cesium.Math.toRadians(50.0);
        var pitch = Cesium.Math.toRadians(-20.0);
        var range = 5000.0;
        viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));

scene 场景

primitives:PrimitiveCollection 原始体集合,集合可以被添加到构成层次结构的集合中

var billboards = new Cesium.BillboardCollection();
var labels = new Cesium.LabelCollection();

var collection = new Cesium.PrimitiveCollection();
collection.add(billboards);

scene.primitives.add(collection);  // Add collection
scene.primitives.add(labels);      // Add regular primitive

camera 获取或者设置相机

环境对象：

skyAtmosphere（大气圈）、shyBox（天空盒）、sun（太阳）、moom（月亮）、flog（雾化）、ParticleSystem（粒子系统）

primitive 几何实例添加

scene.primitives.add(new Cesium.Primitive({
  geometryInstances : instance,
  appearance : new Cesium.EllipsoidSurfaceAppearance({
    material : Cesium.Material.fromType('Checkerboard')
  })
}));

groundPrimitives 贴地几何实例

var rectangleInstance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-140.0, 30.0, -100.0, 40.0)
  }),
  id : 'rectangle',
  attributes : {
    color : new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
  }
});
scene.primitives.add(new Cesium.GroundPrimitive({
  geometryInstances : rectangleInstance
}));

其他操作

vue导入

1. 下载资源包，拿到Cesium文件夹,放入public文件夹中
2. index 中引入widgets.css样式及Cesium.js
3. mounted挂载并使用

若geojson静态资源参照官方无法加载，则可参照如下

1. npm 安装json-loader
2. config.js配置

configureWebpack: {
    module: {
        rules: [
            {
                test: /\.geojson$/,
                loader: 'json-loader'
            }
        ]
    },

3. 通过require引入

    // Geojson文件加载
   let url = require ("../../public/saaets/sampleNeighborhoods.geojson")
   // neighborHoodsPromise 对象加载geojson文件数据
   let neighborHoodsPromise =  Cesium.GeoJsonDataSource.load(url,{
      clampToGround: true //贴地
   })