首页 > 网页制作 >Cesium实现实时联动鹰眼缩略图

Cesium实现实时联动鹰眼缩略图

来源：互联网 2026-06-19 08:23:01

基于Vue3与Cesium搭建双Viewer独立渲染，主场景加载实景影像图层，鹰眼缩略图使用矢量道路图层。通过监听主相机变化实现实时视角同步，并锁定鹰眼交互。可优化瓦片层级与同步频率以提升性能。

基于 Vue3 + Cesium 搭建完整 Demo，采用双 Viewer 实现鹰眼缩略图与主场景实时视角同步；主场景地图使用实景影像图层、鹰眼缩略地图使用矢量道路图层，二者视觉层次分明。 Cesium实现实时联动鹰眼缩略图

前言

做三维 GIS 大屏项目，鹰眼图几乎是标配。它要解决的核心问题其实很明确： 1. 主场景视角一旦拉远或拉近，用户很容易迷失，不知道当前看到的是哪个位置。 2. 在复杂的城市场景中漫游时，需要直观地展示相机当前覆盖了多大范围。这篇文章直接给出一套完整的鹰眼方案，特性如下： 1. 双 Viewer 独立渲染，主场景用实景影像底图，鹰眼用矢量道路底图，视觉上分层清晰。 2. 实时相机联动，主场景拖拽、旋转、缩放，鹰眼瞬间同步，毫无延迟感。 3. 锁定鹰眼的所有交互，用户无法操作小地图，避免打乱预览效果。

演示动态图示如下

本案例效果展示说明

1. 主窗口：实景影像图层，支持自由拖拽、缩放、旋转。 2. 右下角悬浮窗口：鹰眼矢量路网缩略图，主场景视角任意变化，小地图实时同步。

实现核心原理

本质上，这套方案的灵魂可以拆解为四条： 1. 双 Viewer 实例：页面上创建两个独立的 Cesium.Viewer，一个管主场景，一个管鹰眼，互不干扰。 2. 相机监听联动：通过 camera.changed 监听主相机的变化，设置 percentageChanged 控制触发灵敏度。只要视角变动 1%，就立刻同步坐标、航向、俯仰、翻滚到鹰眼相机，duration:0 保证瞬间同步。 3. 鹰眼交互锁定：鹰眼小地图上禁止平移、缩放、旋转、倾斜等一切操作，只作为静态预览窗口，防止用户误操作破坏联动。 4. 分层底图差异化：主场景加载实景影像瓦片，鹰眼用矢量道路瓦片，视觉上一眼就能分清主次，层次感非常强。

完整代码

1. template 结构

2. script 代码

3. CSS样式代码

* {
    margin: 0;
    padding: 0;
}
.main {
    width: 100%;
    height: 100vh;
    position: relative;
}
.content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.hawkeye {
    width: 450px;
    height: 450px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    background-color: #EEE;
    opacity: 0;
    border-radius: 4px;
    border: 4px solid #EEE;
}
.hawkeyeShow {
    opacity: 1;
}
.loading {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: #000000;
}