Cesium制作鹰眼效果

简介: 这篇文章介绍了如何在Cesium中实现鹰眼(概览)功能,让用户可以从高空视角俯瞰整个三维地理场景。

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>

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

相关文章
cesium添加实体不被地形遮挡的参数设置
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
3116 0
cesium添加实体不被地形遮挡的参数设置
|
存储 小程序 前端开发
Uni-app前端开发|基于微信小程序的快递运输管理系统
Uni-app前端开发|基于微信小程序的快递运输管理系统
503 1
|
6月前
|
传感器 人工智能 安全
法思诺创新洞察:TRIZ方法如何助力企业卡脖子实现关键技术自主可控?实战案例解析!
法思诺创新学院运用TRIZ系统化创新方法,助力企业破解“卡脖子”技术难题,如高精度传感器温漂与工业泵振动等,实现关键技术自主可控,提升产品竞争力与市场突破能力。
336 0
|
JSON 数据格式
Cesium实现贴地线
这篇文章介绍了在Cesium中实现地面贴合线的效果及其相关技术要点。
423 5
Cesium实现贴地线
|
定位技术
Cesium修改地球的贴图为视频或者图片
这篇文章说明了如何在Cesium中修改地球的贴图,替换为自定义的图像或视频纹理。
608 1
Cesium修改地球的贴图为视频或者图片
|
Linux 虚拟化 数据安全/隐私保护
银河麒麟V10 VMWare安装保姆级教程
银河麒麟V10 VMWare安装保姆级教程
19115 5
银河麒麟V10 VMWare安装保姆级教程
|
11月前
|
人工智能 自然语言处理 数据可视化
大模型+BI:一场关乎企业未来生死的数据智能卡位战 | 【瓴羊数据荟】数据MeetUp第四期
随着大模型技术突破,全球企业迎来数据智能革命。Gartner预测,到2027年,中国80%的企业将采用多模型生成式AI策略。然而,数据孤岛与高门槛仍阻碍价值释放。
522 8
大模型+BI:一场关乎企业未来生死的数据智能卡位战 | 【瓴羊数据荟】数据MeetUp第四期
Cesium给物体添加贴图
这篇文章讲解了在Cesium中如何为3D模型添加贴图,并提供了具体的实现步骤和代码示例。
917 2
|
机器学习/深度学习 前端开发 JavaScript
WebAssembly:让前端性能突破极限的秘密武器
WebAssembly(简称 WASM)作为前端开发的性能加速器,能够让代码像 C++ 一样在浏览器中高速运行,突破了 JavaScript 的性能瓶颈。本文详细介绍了 WebAssembly 的概念、工作原理以及其在前端性能提升中的关键作用。通过与 JavaScript 的配合,WASM 让复杂运算如图像处理、3D 渲染、机器学习等在浏览器中流畅运行。文章还探讨了如何逐步集成 WASM,展示其在网页游戏、高计算任务中的实际应用。WebAssembly 为前端开发者提供了新的可能性,是提升网页性能、优化用户体验的关键工具。
6759 2
WebAssembly:让前端性能突破极限的秘密武器
|
机器学习/深度学习 人工智能 自然语言处理
软件测试中的人工智能革命:提升测试效率与质量的新篇章
随着人工智能技术的不断成熟,其在软件测试领域的应用正逐渐改变传统测试方式。本文将探讨AI在软件测试中的应用现状、优势以及面临的挑战,并通过具体案例分析展示AI如何提高测试效率和质量。最后,我们将讨论未来AI在软件测试中的发展趋势及其对人类测试工程师角色的影响。
1307 4