Cesium制作鹰眼效果就是在右下角放一个缩略的地球，转动大的地球的同时，也转动右下角的小地球，以保证随时可以看到一个地球的局部图，实际原理是在右下角放置一个div，也同时初始化为一个cesium的模型。在转动大的地球时，出发事件将转动的角度，缩放的大小也同步到右下角小的地球上，现实两个球的联动，下面是相关代码，想看效果可以将代码复制到html文件中，修改为自己的token，用浏览器打开查看效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div style="position:absolute;width:200px;height:200px;top:80%;left:90%" id="eye"></div>
<div id="credit"></div>
<script>
// 设置token
Cesium.Ion.defaultAccessToken = 'token';
//大的地球正擦显示和相关控件
var viewer = new Cesium.Viewer('cesiumContainer', {});
//小的地球隐藏所有的控件
var viewer1 = new Cesium.Viewer('eye',{
geocoder:false,//查找位置工具
homeButton:false,//返回视角的初始位置
sceneModePicker:false,//选择视角的模式：2D,3D,哥伦布视图
baseLayerPicker:false,//图层选择选择地图服务还是地形服务
navigationHelpButton:false,//导航帮助按钮
animation:false,//动画器件，可以旋转地球
creditContainer:"credit",//
timeline:false,//下方的时间轴，默认指示当前时间，允许用户点击跳转到指定时间
fullscreenButton:false,//全屏显示
vrButton:false // VR 按钮，右下角有个戴眼镜的按钮，点击可以看下效果
});
//设置鹰眼图中球属性,禁止拖动旋转等操作
let control = viewer1.scene.screenSpaceCameraController;
control.enableRotate = false;
control.enableTranslate = false;
control.enableZoom = false;
control.enableTilt = false;
control.enableLook = false;
//设置同步的相关方法
let syncViewer = function() {
viewer1.camera.flyTo({
destination: viewer.camera.position,
orientation: {
heading: viewer.camera.heading,
pitch: viewer.camera.pitch,
roll: viewer.camera.roll
},
duration: 0.0
});
};
//小的地球同步到啊的地球角度位置等
viewer.scene.preRender.addEventListener(syncViewer);//效果和第三种方式一样，成功
</script>
</div>
</body>
</html>
效果图
以上如有问题可以在评论区给我留言