【Cesium】Cesium基本介绍

Cesium基本介绍

初始化地球

const viewer = new Cesium.Viewer('')

Viewer 查看器类

定义的同时需要设定基础部件、图层等的初始化状态

new Cesium.Viewer(cesiumContainer(指定地图主窗口DIV的id),option(可选设置参数))

常见的option

animation:true // 动画小部件提供播放、暂停和反转按钮，以及当前时间和日期，周围有一个“穿梭环”，用于控制动画的速度
timeline: true //时间轴是用于显示和控制当前场景时间的小部件

viewer.imgerLaters == viwer.scene.imgerLaters

Scene 场景类

可以对整个场景环境进行修改

可以通过Scene控制相机对场景进行切换，如：

viewer.scene.camera.setView({
    destination:Cesium.Cartesian3.fromDegress(116.39,39.91,1500)//相机目的地
})

相机的使用

setView 通过定义相机飞行目的地的三维坐标和视线方向

viewer.camera.setView({
    destination:Cesium.Cartesian3.fromDegress(116.39,39.91,1500)//相机目的地
    //设定相机视口方向
    orientation:{
    	heading:Cesium.Math.toRadians(0)//航向，控制视口方向的水平旋转，也就是沿着负z轴旋转
    	pitch:Cesium.Math.toRadians(-90)//俯仰，控制视口的上下旋转，即沿负y轴进行旋转,这里表示俯瞰地面
    	roll:0    //滚动，围绕正x轴的旋转，数值为0 表示不翻转
    
  }
})

flyTo 具有空中飞行和逐步切换视域的效果

viewer.camera.flyTo({
    destination:Cesium.Cartesian3.fromDegress(116.39,39.91,1500)//相机目的地
    orientation:{
    	heading:Cesium.Math.toRadians(0)
    	pitch:Cesium.Math.toRadians(-90)
    	roll:0      
  },
    duration:5
})

lookAt()一般用于锁定某个场景的视角

const center = Cesium.Cartesian3.fromDegress(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 可以给一个指定的目标点，让我们可以从多个角度更好的观测

Entity 实体类

提供了用于构建复杂的、时间动态可视化的结构、与静态数据自然的结合在一起

const entity = viewer.entities.add({
    position:Cesium.Cartesian3.fromDegress(116.39,39.91,400),
    point:{
        pixelSize: 100,
        color: new Cesium.Color(0,1,0,1)//绿色的点
    }
})

坐标转换

参考

1. 经纬度坐标转为世界坐标

Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result) 

2. 世界坐标转为经纬度

Cesium.Cartographic.fromCartesian(cartesian, ellipsoid, result);


var ellipsoid = viewer.scene.globe.ellipsoid;
var cartesian3 = new Cesium.cartesian3(x,y,z);
var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
var lat = Cesium.Math.toDegrees(cartograhphic.latitude);
var lng = Cesium.Math.toDegrees(cartograhpinc.longitude);
var alt = cartographic.height;

3. 屏幕坐标和世界坐标互相转换

//世界坐标转为屏幕坐标
Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, position, result) 

//屏幕坐标转为世界坐标
 1. 屏幕坐标转 场景坐标，场景坐标是包含了地形、倾斜、模型的坐标。
  	var cartesian3= viewer.scene.pickPosition(Cartesian2)，

  2. 屏幕坐标转 地表坐标，地球表面的坐标，包含地形，不包括模型、倾斜摄影表面。
    var pick1= new Cesium.Cartesian2(0,0);
    var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick1),viewer.scene);   

  3. 屏幕坐标转 椭球面坐标，椭球面坐标是参考椭球的坐标，不包含地形、模型、倾斜摄影表面。
  	var cartesian3= viewer.scene.camera.pickEllipsoid(Cartesian2)

4. 弧度和经纬度

//经纬度转弧度：
Cesium.CesiumMath.toRadians(degrees) 
//弧度转经纬度：
Cesium.CesiumMath.toDegrees(radians) 

5. 屏幕坐标转为经纬度坐标(先转世界坐标，世界坐标再转经纬度)

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (movement) {
    var pick = movement.position;
    var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(pick), viewer.scene);
    var ellipsoid = viewer.scene.globe.ellipsoid;
    var cartographic = ellipsoid.cartesianToCartographic(cartesian);
    var lat = Cesium.Math.toDegrees(cartographic.latitude);
    var lon = Cesium.Math.toDegrees(cartographic.longitude);
    var alt = cartographic.height;
    console.log('经度：' + lon + '\n纬度：' + lat + '\n高度：' + alt);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

DataSourceCollection 数据源集合类

主要用于加载数据

主要有三种调用方法 CzmlDataSource、KmlDataSource、GeoJsonDataSource

//将任意数据转换为EntityCollection
viewer.dataSources.add(
	Cesium.GeoJsonDataSource.load("url")
)

Cesium坐标系

1. WGS84经纬度坐标系（没有实际的对象）

2. WGS84弧度坐标系（Cartographic）

new Cesium.Cartographic(longitude,latitude,height)//三个参数分别为经度、纬度和高度

3. 笛卡尔空间直角坐标系（Cartesian3）
4. 平面坐标系（Cartesian2）

new Cesium.Cartesian2(x,y)

3. 4D笛卡尔坐标系（Cartesian4）