Cesium创建无人机视锥，同步视锥与鹰眼地图视角，实现视锥键盘控制。解决视锥初始化位置不准确问题等

原创

已于 2025-06-03 17:22:49 修改 · 558 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#无人机 #javascript #Cesium #无人机视锥

于 2025-05-28 09:54:49 首次发布

一、整体效果图如下

二、功能简介

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

最低0.47元/天解锁文章