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