一、整体效果图如下
二、功能简介
1、暂未实现视锥的far和near视角框在鹰眼视图中的绘制,待开发……
2、已经实现基于地理位置创建视锥,并实现视锥的上下左右移动,视锥的heading、pitch的移动,同时包括无人机偏移角度的动态监测。鹰眼地图基于视锥属性创建Camera,实现鹰眼视角与视锥视角的同步关联变化效果。
三、实现思路及关键代码
1、思路
(1)创建主视图和鹰眼视图,并设定初始相机位置
(2)创建视锥体。避免踩坑
(3)视锥体的视角与鹰眼视图同步
(4)键盘控制事件的监听与视锥位置更新,同时同步鹰眼视图
2、主要代码
1) 创建主视图和鹰眼视图,并设定初始相机位置
// 主视图初始化
mainViewerInstance = new Cesium.Viewer(mainViewer.value, {
sceneMode: Cesium.SceneMode.SCENE3D,
baseLayerPicker: false,
shouldAnimate: true,
terrainProvider: Cesium.createWorldTerrain(),
geocoder: false, //右上角 搜索
homeButton: false, //右上角 Home
sceneModePicker: false, //右上角 2D/3D 切换
navigationHelpButton: false, //右上角 Help
animation: false, // 左下角 圆盘动画控件
timeline: false, //时间轴
fullscreenButton: false, //右下角 全屏控件
vrButton: false, // 如果设置为 true,将创建 VRButton 小部件。
scene3DOnly: true, // 每个几何实例仅以 3D 渲染以节省 GPU 内存
infoBox: false, //隐藏点击要素后的提示信息
});
mainViewerInstance._cesiumWidget._creditContainer.style.display = "none"; //隐藏版本信息
mainViewerInstance.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(
position.value.longitude,
position.value.latitude,
position.value.height
),
orientation: {
heading: Cesium.Math.toRadians(orientation.value.heading),
pitch: C