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

最新推荐文章于 2025-06-06 20:54:11 发布

原创最新推荐文章于 2025-06-06 20:54:11 发布 · 7.5k 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#gis #cesium

cesium 专栏收录该内容

122 篇文章

订阅专栏

本文介绍了如何使用Cesium库在网页上实现实时同步二维和三维地图视图，通过监听三维地图变化，保持两者相机位置一致，展示详细实现步骤和关键代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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);