cesium 平滑切换二三维

很多人用sceneMode 来进行二三维切换 ，其实这样不好用，位置什么的 图层状态都不好绑定，给人体验非常差
对于arcgis 引擎 可以锁视角实现平滑切换，mapbox 引擎也可以锁视角实现，但是对于cesium 也是可以的

首先我们要知道获取中心点方法

• function getCenter(viewer： any) {
• // debugger
• const scene = viewer.scene;
• const target = pickCenterPoint(scene);
• let bestTarget = target;
•  
• const globe = scene.globe;
• const carto = scene.camera.positionCartographic.clone();
• const height = globe.getHeight(carto);
• carto.height = height || 0;
• bestTarget = Cesium.Ellipsoid.WGS84.cartographicToCartesian(carto);
•  
• const result = formatPosition(bestTarget);
•  
• // 获取地球中心点世界位置 与 摄像机的世界位置 之间的距离
• const distance = Cesium.Cartesian3.distance(bestTarget, viewer.scene.camera.positionWC);
• result.cameraZ = distance;
• return result;
• }
•  
• function pickCenterPoint(scene： any) {
• const canvas = scene.canvas;
• const center = new Cesium.Cartesian2(canvas.clientWidth / 2, canvas.clientHeight / 2);
• const ray = scene.camera.getPickRay(center);
• const target = scene.globe.pick(ray, scene);
• return target || scene.camera.pickEllipsoid(center);
• }
•  
• function formatPosition(position) {
• const carto = Cesium.Cartographic.fromCartesian(position);
• const result = {};
• result.y = formatNum(Cesium.Math.toDegrees(carto.latitude), 6);
• result.x = formatNum(Cesium.Math.toDegrees(carto.longitude), 6);
• result.z = formatNum(carto.height, 2);
• return result;
• }
•  
• function formatNum(num, digits) {
• return Number(num.toFixed(digits || 0));
• }

第二我们要知道屏幕中心点位置

• function getScreenCenter(_viewer: any) {
• const viewer = _viewer;
• const result = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2));
• const curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result);
• const lon = (curPosition.longitude * 180) / Math.PI;
• const lat = (curPosition.latitude * 180) / Math.PI;
• const height = curPosition.height;
• return {
• x: lon,
• y: lat
• };
• }

下面我们来定义调用切换二三维的方法, 其中mapType 我定义为mapView和sceneView类型, 哈哈学习arcgis模式
```javascript

type mapType = 'mapView' | 'sceneView';

public changeSV23D(viewer: any, type: mapType) {
const viewer = viewer;
const result: any = getCenter(viewer);
const curPosition = getScreenCenter(viewer);
const center = Cesium.Cartesian3.fromDegrees(curPosition.x, curPosition.y);
if (type === 'sceneView') {
if (viewer.view === 'sceneView') {
return;
}
viewer.scene.screenSpaceCameraController.enableTilt = true;
viewer.view = 'sceneView';
let x = -90;
let pitch;
const range = result.cameraZ * 1.2;

 更多参考 https://xiaozhuanlan.com/topic/7459016328