cesium实现二三维分屏地图同步效果

文章目录

Cesium实战系列文章总目录：传送门

1.实现效果

2.实现方法

实现方法与二维鹰眼地图类似，将二维地图与三维地图同步。

2.1实现思路

（1）新建两个地图

新建两个地图div，并初始化两个地图viewer，一个为三维，另一个为二维。

<div id="cesiumContainer"><div id="view3D"></div><div id="view2D"></div></div>

<style>#cesiumContainer {display: flex;width: 100%;height: 100%;}#view3D {display: inline-block;width: 100%;}#view2D {display: inline-block;width: 100%;}</style>

（2）视图同步

获取三维地图的视点中心及与相机的距离，然后设置二维地图的相机。

使用camera的lookAt方法，竖直偏移量设置为相机高度即可，API：传送门

（3）监听3D地图变化

监听camera的changed事件，API：传送门

当三维地图的相机发生变化后，同步二维地图。

2.2具体代码

主要核心实现代码如下：

let view2D = new Cesium.Viewer("view2D", {sceneMode: Cesium.SceneMode.SCENE2D});let view3D = new Cesium.Viewer("view3D");/*** @description: 将二维地图的视图与三维同步* @param {*}* @return {*}*/function sync2D() {// 三维地图中心点let center = new Cesium.Cartesian2(Math.floor(view3D.canvas.clientWidth / 2),Math.floor(view3D.canvas.clientHeight / 2));console.log(center);// 转为世界坐标系let position = view3D.scene.camera.pickEllipsoid(center);// 判断中心点是否在椭球体上if (Cesium.defined(position)) {// 获取三维地图中心点与相机之间的距离let distance = Cesium.Cartesian3.distance(position,view3D.scene.camera.positionWC);// 更新二维地图view2D.scene.camera.lookAt(position,new Cesium.Cartesian3(0.0, 0.0, distance))}}view3D.camera.percentageChanged = 0.01;// 监听三维地图变化view3D.camera.changed.addEventListener(sync2D);