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 以上如有问题可以在评论区给我留言

相关文章
Threejs实现下雨,下雪,阴天,晴天,火焰
Threejs实现下雨,下雪,阴天,晴天,火焰
3186 0
Threejs实现下雨,下雪,阴天,晴天,火焰
|
定位技术
干货!解决Cesium中Entity移动漂移的问题
案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?
4883 0
干货!解决Cesium中Entity移动漂移的问题
cesium添加实体不被地形遮挡的参数设置
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
3388 0
cesium添加实体不被地形遮挡的参数设置
|
网络安全 开发工具 git
win10专业版安装.net Framework4.7.2出现问题解决办法
win10专业版安装.net Framework4.7.2出现问题解决办法
1477 0
|
存储 缓存 编解码
RCU(Read Copy Update)十年计
作者:陈荣 查斌 马涛
1952 0
RCU(Read Copy Update)十年计
|
JavaScript 前端开发
Vue antdv 定制主题配置(高低版本配置问题)
Vue antdv 定制主题配置(高低版本配置问题)
730 0
|
Web App开发 小程序 Android开发
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
353 0
|
12月前
|
传感器 人工智能 安全
法思诺创新洞察:TRIZ方法如何助力企业卡脖子实现关键技术自主可控?实战案例解析!
法思诺创新学院运用TRIZ系统化创新方法,助力企业破解“卡脖子”技术难题,如高精度传感器温漂与工业泵振动等,实现关键技术自主可控,提升产品竞争力与市场突破能力。
535 0
Cesium自动生成建筑物3D轮廓模型
这篇文章讲解了如何使用Cesium根据地形和建筑物的高度数据自动生成3D轮廓模型的方法。
1155 2
|
atlas
Cesium导入geojson数据
这篇文章详细描述了如何在Cesium中导入GeoJSON数据来绘制地理矢量数据,并提供了实现的具体方法和示例代码。
1186 2
Cesium导入geojson数据