Cesium 常见基础功能点

前言

一些Cesium常用的方法或者属性记录

内容

1 Cesium logo去除

viewer.cesiumWidgets.creditContainer.style.display = 'none'

2 Cesium 二三维切换

场景状态模式有如下4中

Cesium.SceneMode.COLUMBUS_VIEW//1哥伦布视图  
Cesium.SceneMode.SCENE2D//2维模式
Cesium.SceneMode.SCENE3D//3维模式
Cesium.SceneMode.MORPHING//0模式之间变换，例如二维到三维 

首先在二三维功能相互切换的需求中，需要判断cesium当前是二维还是三维
两种方式
（1）使用viewer.scene.mode来判断当前的场景状态，是基于当前范围场景（但不会保留hpr）的切换不会缩到全球范围。
如通过点击事件来二三维切换

document.getElementById("changeMap").addEventListener("click", () => {
  viewer.scene.mode = viewer.scene.mode == 2 ? 3 : 2;
});

（2）通过下面的方法来切换，会缩放到全球范围。

 // 括号里的参数时用来控制经过多久开始变化
 viewer.scene.morphTo2D(1);//二维
 viewer.scene.morphTo3D(1);//三维
 viewer.scene.morphToColumbusView(1);//哥伦布视图

在三维模式下，我们添加点或者添加线面的时候，会使用一些贴地的功能，但是使用贴地后，在进行切换。在二维地图上会看不到三维的点。这个主要是我们设置的贴的原因。只需要改变：
heightReference: Cesium.HeightReference.NONE

（3） 其他
参考：https://blog.csdn.net/bitree1/article/details/85006727
https://juejin.cn/post/6874426465060913166
显示二三维切换按钮
SceneModePicker：true
设置初始视点：

var extend= Cesium.Rectangle.fromDegrees(100, 10, 120, 70);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extend;
Cesium.Camera.DEFAULT_VIEW_FACTOR =0

二三维切换定位问题
点击二三维切换按钮时候，切换了会显示一个大图，并没有回到原来的位置上去

  //设置这个参数，二三维切换的时候位置就会保持原来的了
  //原理：  cesium底层的代码做了一个判断，如果延时参数大于0，就缩放到全球显示一个切换动画，设成0就没这个动画了
  viewer.sceneModePicker.viewModel.duration = 0.0;//去掉二三维切换动画效果
  // 切换二三维的自己做UI，调用底层的代码切换，都可以实现切换二三维
  // 初始定位
  
var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100), 15000);
// Override behavior of home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(commandInfo) {
    // Fly to custom position
    viewer.camera.flyToBoundingSphere(boundingSphere);
    // Tell the home button not to do anything
    commandInfo.cancel = true;
});
// Set custom initial position
viewer.camera.flyToBoundingSphere(boundingSphere, {duration: 0});

3 Cesium设置飞到矩形范围中心点

1. Cesium.Rectangle.center(rectangle)这个结果为Cartographic（经纬度/地理坐标）
2. 然后在转换成Cartesian3 （空间直角坐标/笛卡尔三维坐标）这样就可以直接使用了。
3. 如果想要获得正常的经纬度则需要把Cartesian3 转换成Cartographic正常坐标。

Cesium.Rectangle.center API/各个坐标的转换（区别）/各个坐标之间的转换

	// 方法1
	var rectangle = Cesium.Rectangle.fromDegrees(//矩形视角范围
	     west,
	     south,
	     east,
	     north,
	   );
	var center = Cesium.Rectangle.center(rectangle);//获取视角范围中心点(得到的结果为弧度Cartographic)
	var adre = Cesium.Cartographic.toCartesian(center);//把弧度转换为x,y,z（世界坐标也就是Cartographic3）
	//世界坐标转换成经纬度
	var ellipsoid = viewer.scene.globe.ellipsoid;
	var cartographic = ellipsoid.cartesianToCartographic(adre);
	var lat = Cesium.Math.toDegrees(cartographic.latitude);//纬度
	var lng = Cesium.Math.toDegrees(cartographic.longitude);//经度
	viewer.camera.flyTo({//定位到范围中心点
	destination: Cesium.Cartesian3.fromDegrees(lng,lat),
	//destination: rectangle,
	orientation: {
	   heading: Cesium.Math.toRadians(180),//1
	   pitch: Cesium.Math.toRadians(-90),
	   roll: 0
	}
	});
	// 方法2
	var west = parseFloat(经度);
	var south = parseFloat(纬度);
	var east = parseFloat(经度);
	var north = parseFloat(纬度);
	viewer.camera.flyTo({//定位到范围中心点
	destination: Cesium.Cartesian3.fromDegrees(Number((west + east) / 2), Number((south + north) / 2),2200),
	//destination: rectangle,
	orientation: {
	   heading: Cesium.Math.toRadians(180),//1
	   pitch: Cesium.Math.toRadians(-90),
	   roll: 0
	}
	});

4 常用坐标转换API

说明：具体还是直接查Cesium API，也不可能都记住。

API	说明
Cesium.Cartographic.fromCartesian(cartesian, ellipsoid, result)	笛卡尔转弧度
Cesium.Cartographic.fromDegrees(longitude, latitude, height, result)	经纬度转弧度(度单位)
Cesium.CesiumMath.toDegrees(radians)	弧度转度
Cesium.CesiumMath.toRadians(degrees)	度转弧度
Cesium.Cartographic.fromRadians(longitude, latitude, height, result)	经纬度转弧度(弧度单位)
Cesium.Cartographic.toCartesian(cartographic, ellipsoid, result)	弧度转笛卡尔
var pick1= scene.globe.pick(viewer.camera.getPickRay(pt1), scene) //其中pt1为一个二维屏幕坐标	平面坐标转三维坐标(其实都是笛卡尔坐标)
var geoPt1= scene.globe.ellipsoid.cartesianToCartographic(pick1) //其中pick1是一个Cesium.Cartesian3对象	笛卡尔三维坐标转地理坐标
var point1=[geoPt1.longitude / Math.PI * 180,geoPt1.latitude / Math.PI * 180]; //其中geoPt1是一个地理坐标	地理坐标转经纬度
var cartographic = Cesium.Cartographic.fromDegree(point) //point是经纬度值	经纬度转地理坐标(弧度)
var coord_wgs84 = Cesium.Cartographic.fromDegrees(lng, lat, alt);//单位：度，度，米	经纬度转地理坐标
var cartesian = Cesium.Cartesian3.fromDegree(point)	经纬度转笛卡尔坐标

5 笛卡尔坐标系api

API	说明
Cesium.Cartesian3.abs(cartesian, result)	计算绝对值
Cesium.Cartesian3.add(left, right, result)	计算两个笛卡尔的分量和
Cesium.Cartesian3.angleBetween(left, right)	计算角度(弧度制)
Cesium.Cartesian3.cross(left, right, result)	计算叉积
Cesium.Cartesian3.distance(left, right)	计算两点距离
Cesium.Cartesian3.distanceSquared(left, right)	计算两点平方距离
Cesium.Cartesian3.divideByScalar(cartesian, scalar, result)	计算标量除法
Cesium.Cartesian3.divideComponents(left, right, result)	计算两点除法
Cesium.Cartesian3.dot(left, right)	计算点乘
Cesium.Cartesian3.equals(left, right)	比较两点是否相等
Cesium.Cartesian3.fromArray(array, startingIndex, result)	从数组中提取3个数构建笛卡尔坐标
Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)	将将纬度转换为笛卡尔坐标(单位是度°)
Cesium.Cartesian3.fromDegreesArray(coordinates, ellipsoid, result)	返回给定经度和纬度值数组（以度为单位）的笛卡尔位置数组。
Cesium.Cartesian3.fromDegreesArrayHeights(coordinates, ellipsoid, result)	返回给定经度,纬度和高度的笛卡尔位置数组
Cesium.Cartesian3.fromElements(x, y, z, result)	创建一个新的笛卡尔坐标
Cesium.Cartesian3.fromRadians(longitude, latitude, height, ellipsoid, result)	返回笛卡尔坐标以弧度制的经纬度
Cesium.Cartesian3.fromRadiansArray(coordinates, ellipsoid, result)	返回笛卡尔坐标以弧度制的经纬度数组
Cesium.Cartesian3.fromRadiansArrayHeights(coordinates, ellipsoid, result)	返回笛卡尔坐标以弧度制的经纬度高度数组
Cesium.Cartesian3.fromSpherical(spherical, result)	将提供的球面转换为笛卡尔系
Cesium.Cartesian3.lerp(start, end, t, result)	使用提供的笛卡尔数来计算t处的线性插值或外推。
Cesium.Cartesian3.magnitude(cartesian)	计算笛卡尔长度
Cesium.Cartesian3.magnitudeSquared(cartesian)	计算提供的笛卡尔平方量级
Cesium.Cartesian3.maximumByComponent(first, second, result)	比较两个笛卡尔并计算包含所提供笛卡尔最大成分的笛卡尔。
Cesium.Cartesian3.maximumComponent(cartesian)	计算所提供笛卡尔坐标系的最大分量的值
Cesium.Cartesian3.midpoint(left, right, result)	计算右笛卡尔和左笛卡尔之间的中点
Cesium.Cartesian3.minimumByComponent(first, second, result)	比较两个笛卡尔并计算包含所提供笛卡尔的最小分量的笛卡尔
Cesium.Cartesian3.minimumComponent(cartesian)	计算所提供笛卡尔坐标系的最小分量的值
Cesium.Cartesian3.mostOrthogonalAxis(cartesian, result)	返回与提供的笛卡尔坐标最正交的轴
Cesium.Cartesian3.multiplyByScalar(cartesian, scalar, result)	将提供的笛卡尔分量乘以提供的标量
Cesium.Cartesian3.multiplyComponents(left, right, result)	计算两个笛卡尔的分量积
Cesium.Cartesian3.normalize(cartesian, result)	计算所提供笛卡尔的规范化形式
Cesium.Cartesian3.pack(value, array, startingIndex)	将提供的实例存储到提供的数组中
Cesium.Cartesian3.projectVector(a, b, result)	将向量a投影到向量b上
Cesium.Cartesian3.subtract(left, right, result)	计算两个笛卡尔分量差
Cesium.Cartesian3.unpack(array, startingIndex, result)	从压缩的数组中检索实例
Cesium.Cartesian3.unpackArray(array, result)	将笛卡尔分量数组解包为笛卡尔数组

6 Cesium开启日照阴影

let viewer = new Cesium.Viewer('cesium-container');
viewer.scene.globe.enableLighting = true;
viewer.shadows = true