Cesium制作鹰眼效果

baker_zhuang

已于 2024-05-22 14:18:51 修改

阅读量776

点赞数 1

分类专栏： cesium 文章标签： Cesium

于 2023-09-10 10:29:27 首次发布

本文链接：https://blog.youkuaiyun.com/qq_26881073/article/details/132972319

版权

cesium 专栏收录该内容

12 篇文章

订阅专栏

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>

效果图以上如有问题可以在评论区给我留言