**前言：**
在三维 GIS 大屏可视化项目中，鹰眼缩略图几乎是不可或缺的核心功能。它要解决的核心痛点其实非常明确：
1. 当主场景视角被拉远或拉近时，用户很容易失去方位感，无法准确判断当前正在观察的具体区域。
2. 在复杂的城市建筑场景中漫游时，需要直观、实时地展示相机当前所覆盖的地理范围。
本文直接给出一套完整的鹰眼联动实现方案，具备以下特性：
1. 双 Viewer 独立渲染机制，主场景使用高德卫星影像底图，鹰眼使用高德矢量道路底图，视觉上分层清晰、主次分明。
2. 实时相机联动响应，主场景拖拽、旋转、缩放时，鹰眼小地图瞬间同步更新，几乎无延迟感。
3. 完全锁定鹰眼小地图的所有交互操作，用户无法拖拽、缩放或旋转小地图，确保预览效果稳定不被打乱。
**演示动态图示如下：**
**本案例效果展示说明：**
1. 主窗口：显示高德卫星影像图层，支持自由拖拽漫游、缩放、旋转等完整交互操作。
2. 右下角悬浮窗口：显示鹰眼矢量道路缩略图，主场景视角任意变化时，小地图实时同步更新相机位置与朝向。
**实现核心原理：**
本质上，这套方案的核心逻辑可以拆解为以下四条：
1. **双 Viewer 实例**：在页面上创建两个独立的 Cesium.Viewer 对象，一个负责主场景渲染，一个负责鹰眼缩略图展示，两者互不干扰。
2. **相机监听联动**：通过 `camera.changed` 事件监听主相机的变化，并设置 `percentageChanged` 参数控制触发灵敏度。只要视角变化达到 1%，就立即同步坐标、航向角、俯仰角、翻滚角到鹰眼相机，`duration:0` 确保瞬间同步无延迟。
3. **鹰眼交互锁定**：在鹰眼小地图上禁止平移、缩放、旋转、倾斜等一切用户交互操作，仅作为静态预览窗口，防止误操作破坏联动效果。
4. **分层底图差异化**：主场景加载高德卫星影像瓦片，鹰眼使用高德矢量道路瓦片，视觉上一眼就能分清主次，层次感非常强，用户体验更佳。
**完整代码**
**1. template 结构：**
```xml
Loading...
``` **2. script 代码：** ```xml ``` **3.css样式代码：** ```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; } ``` **现有方案优化可拓展的参数调整（性能可优化点）：** 1. 鹰眼瓦片层级限制：可适当降低鹰眼 `maximumLevel` 至 14，减少小地图的瓦片请求数量，低配设备上可有效防止帧率下降。 2. 降低同步频率：适当调大 `percentageChanged` 数值（如调整为 0.03），减少相机回调函数的执行次数，降低 CPU 开销。 *注意：本案例中所使用的高德瓦片资源仅供学习与技术研究演示使用，不可用于线上商用部署场景。如果企业项目正式上线需要使用同类地图瓦片资源，请自行前往对应地图服务商平台完成资质认证，并申请合规的调用密钥。*
