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中Entity移动漂移的问题
案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?
5046 0
干货!解决Cesium中Entity移动漂移的问题
|
存储 缓存 编解码
RCU(Read Copy Update)十年计
作者:陈荣 查斌 马涛
2007 0
RCU(Read Copy Update)十年计
|
安全 Java API
阿里云——Java实现手机短信验证码功能
通过手机短信发送验证码,是最普遍、最安全验证用户真实身份的方式。目前,短信验证码广泛应用于用户注册、密码找回、登录保护、身份认证、随机密码、交易确认等应用场景。本文通过调用API开发一个短信验证码为例,带您了解如何实现短信验证码功能。
10303 7
阿里云——Java实现手机短信验证码功能
|
Web App开发 小程序 Android开发
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
382 0
|
传感器 人工智能 安全
法思诺创新洞察:TRIZ方法如何助力企业卡脖子实现关键技术自主可控?实战案例解析!
法思诺创新学院运用TRIZ系统化创新方法,助力企业破解“卡脖子”技术难题,如高精度传感器温漂与工业泵振动等,实现关键技术自主可控,提升产品竞争力与市场突破能力。
577 0
Cesium自动生成建筑物3D轮廓模型
这篇文章讲解了如何使用Cesium根据地形和建筑物的高度数据自动生成3D轮廓模型的方法。
1201 2
|
atlas
Cesium导入geojson数据
这篇文章详细描述了如何在Cesium中导入GeoJSON数据来绘制地理矢量数据,并提供了实现的具体方法和示例代码。
1244 2
Cesium导入geojson数据
|
人工智能 JSON PyTorch
TPO:告别微调!这个AI框架让大模型实时进化:无需训练直接优化,输入问题越用越聪明,输出质量暴涨50%
TPO(Test-Time Prompt Optimization)框架,通过奖励模型和迭代反馈优化大语言模型输出,无需训练即可显著提升性能,支持动态对齐人类偏好,降低优化成本。
1312 8
TPO:告别微调!这个AI框架让大模型实时进化:无需训练直接优化,输入问题越用越聪明,输出质量暴涨50%
|
JSON 数据格式
Cesium实现贴地线
这篇文章介绍了在Cesium中实现地面贴合线的效果及其相关技术要点。
654 5
Cesium实现贴地线
|
定位技术
Cesium修改地球的贴图为视频或者图片
这篇文章说明了如何在Cesium中修改地球的贴图,替换为自定义的图像或视频纹理。
822 1
Cesium修改地球的贴图为视频或者图片