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

相关文章
|
定位技术 API 网络架构
地图图层接入:从mapbox转向cesium
由于地图坐标系的不统一,地图图商提供的图层服务也各有特色,在图层对接的开发过程中常会遇到许多坑,从二维图层到三维图层,地图引擎mapbox再到cesium,本文将分享笔者在近期地图图层接入过程中总结的一些经验。
3623 10
cesium加载魔方立方体
【8月更文挑战第16天】
干货在线 | ArcGIS三种底图影像调色技巧
干货在线 | ArcGIS三种底图影像调色技巧
484 0
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
307 0
|
定位技术 API
Cesium开发:限制地图浏览范围
Cesium开发:限制地图浏览范围
730 1
|
定位技术 API
Cesium开发:常用地图事件
Cesium开发:常用地图事件
340 0
|
定位技术
Cesium开发:二三维联动
Cesium开发:二三维联动
1289 0
|
定位技术 iOS开发
iOS原生地图开发指南再续——地图覆盖物的应用
iOS原生地图开发指南再续——地图覆盖物的应用
293 0
iOS原生地图开发指南再续——地图覆盖物的应用
|
API 定位技术 网络架构
leaflet地图介绍
本文将介绍有关于leaflet地图组件在web中的应用 什么是leaflet? leaflet是一个轻量级的开源js地图组件,适用于移动设备,用法简单性能优越,如果你曾经使用过高德或者百度的地图api的话,相信你可以很轻易的上手更加简单的leaflet leaflet是怎么运作的? leaflet的工作方法和高德百度之类的并不一样,由于leaflet是个开源项目,所以它本身只有地图组件并不提供地图内容,也就是说,我们不需要为了使用leaflet而去注册key。
2371 0