Cesium实现第一人称漫游、飞行

最新推荐文章于 2025-06-10 11:20:33 发布
原创 最新推荐文章于 2025-06-10 11:20:33 发布 · 1.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #webgl

为了方便用户能够直观的浏览三维模型上的所有位置点位，具体的实现思路是：

1、首先将所有的位置点按照一定的路线顺序排列好；

2、接着以第一人称视角开始漫游所设定的路线图；

3、设置飞行、继续、暂停及退出漫游飞行的状态。

具体参考可见：【Cesium开发实战】飞行漫游功能的实现，可设置漫游路径，漫游高度，暂停，继续，删除路径...-优快云博客

 实现代码如下：

var airplaneEntity = null
var timeStepInSeconds = 7
const positionProperty = new Cesium.SampledPositionProperty();
//开始飞行
startFly () {
//飞行的时候，飞行按钮、继续按钮置灰不可点击
      this.start = true
      this.pause = false
      this.keepup = true
      this.stop = false
      this.showSelect = true
      // 当下个飞行前清除上次的飞行对象和路径
      if (airplaneEntity != null) {
        viewer.entities.remove(airplaneEntity)
      }
      // 获取飞行的路径线路
      const positions = []
      for (let i = 0; i < this.options.length; i++) {
        const position = {
          longitude: this.options[i].longitude,
          latitude: this.options[i].ydbWeiDu,
          height: 1000
        }
        positions.push(position)
      }
      const flightData = positions;
      //timeStepInSeconds表示在每个位置点的停留时间
      const totalSeconds = (flightData.length) * timeStepInSeconds
      // 设置起点时间
      const time = new Date('2020-03-09T23:10:00Z')
      const start = Cesium.JulianDate.fromDate(time)
      // 设置终点时间
      const stop = Cesium.JulianDate.addSeconds(start, totalSeconds, new Cesium.JulianDate())

      viewer.clock.startTime = start.clone()
      viewer.clock.stopTime = stop.clone()
      viewer.clock.currentTime = start.clone()

      for (let i = 0; i < flightData.length; i++) {
        const dataPoint = flightData[i]
        // 采样时间
        const time = Cesium.JulianDate.addSeconds(start, i * timeStepInSeconds, new Cesium.JulianDate())

        // 计算当前的3D坐标
        const position = Cesium.Cartesian3.fromDegrees(dataPoint.longitude, dataPoint.latitude, dataPoint.height)

        // 添加轨迹采样点
        positionProperty.addSample(time, position)
      }
      // 创建飞机模型
      airplaneEntity = viewer.entities.add({
        availability: new Cesium.TimeIntervalCollection([
          new Cesium.TimeInterval({
            start: start,
            stop: stop
          })
        ]),
        position: positionProperty,
        model: {
          uri: '/model/glb/Cesium_Air.glb',
          scale: 0.0 //由于我们以第一人称视角，此时可设置其飞机模型的大小为0，但是必须存在这个分级机模型
        },
        // 自动计算前进方向
        orientation: new Cesium.VelocityOrientationProperty(positionProperty)
      })

      // 设置相机追踪运动物体
      viewer.trackedEntity = airplaneEntity

      // 设置时间速率
      viewer.clock.multiplier = 1

      // 设置自动播放
      viewer.clock.shouldAnimate = true
      const that = this
      viewer.clock.onTick.addEventListener(function (clock) {
        // var endTime = Cesium.JulianDate.addSeconds(startTime, duration, new Cesium.JulianDate());
        if (Cesium.JulianDate.greaterThan(clock.currentTime, stop)) {
          // 退出界面操作
          // 例如：关闭Cesium Viewer
          that.finishFly()
        }
      })
    },

// 暂停飞行，设置暂停、飞行按钮置灰；继续和结束按钮可点击
    stopFly () {
      this.pause = true
      this.start = true
      this.keepup = false
      this.stop = false
      viewer.clock.shouldAnimate = false //是否尝试延长时间
    },
    // 继续飞行；设置继续、飞行按钮置灰；暂停和结束按钮可点击
    continueFly () {
      this.keepup = true
      this.start = true
      this.pause = false
      this.stop = false
      viewer.clock.shouldAnimate = true //尝试延长时间
    },

注意：为了以第一人称视角漫游，需要将飞机模型隐藏掉，但是不能去掉。

整体代码如下

<template>
  <div class="visualization">
    <div id="cesiumContainer"></div>
    <div class="infoDiv">
      <el-select v-model="pointInfo" placeholder="请选择" size="mini" popper-class="type-popper"
        :disabled="showSelect">
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <div
        style="margin-top: 10px;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;">
        <el-button icon="el-icon-video-play" type="text" @click.native-type="startFly" :disabled="start">飞行</el-button>
        <el-button icon="el-icon-video-pause" type="text" @click.native-type="stopFly" style="margin-left: 0px;"
          :disabled="pause">暂停</el-button>
        <el-button icon="el-icon-video-play" type="text" @click.native-type="continueFly" style="margin-left: 0px;"
          :disabled="keepup">继续</el-button>
        <el-button icon="el-icon-video-play" type="text" @click.native-type="finishFly" style="margin-left: 0px;"
          :disabled="stop">退出</el-button>
      </div>

    </div>
</template>

<script>
var viewer = null
var tileset = null
var terrainProvider = null
var airplaneEntity = null
var timeStepInSeconds = 7
const positionProperty = new Cesium.SampledPositionProperty()
var entities = []
export default {
  components: {
  },
  data () {
    return {
      pointInfo: '',
      options: [
	  {
	      id:1,
	      name:'公园',
	      longitude:110.4565,
	      latitude:36.89797
	  },
	  ...
	  ],      
      start: false, //飞行按钮可否点击
      pause: true, //暂停按钮可否点击
      keepup: true, //继续按钮可否点击
      stop: true, //退出飞行按钮可否点击
      showSelect: false //下拉框可否选择
    }
  },
  mounted () {
   
  },
  methods: {   
    initCesium () {
      Cesium.Ion.defaultAccessToken = '申请自己的access token'
        viewer = new Cesium.Viewer('cesiumContainer', {
          animation: false, // 是否显示动画控件
          shouldAnimate: false,//是否自动播放
          homeButton: false, // 是否显示Home按钮
          fullscreenButton: false, // 是否显示全屏按钮
          baseLayerPicker: false, // 是否显示图层选择控件
          geocoder: false, // 是否显示地名查找控件
          timeline: false, // 是否显示时间线控件
          sceneModePicker: false, // 是否显示投影方式控件
          navigationHelpButton: false, // 是否显示帮助信息控件
          navigationInstructionsInitiallyVisible: false, // 是否显示导航提示，默认为true,
          infoBox: true, // 是否显示点击要素之后显示的信息
          requestRenderMode: true, // 启用请求渲染模式
          // scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
          sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
          creditContainer: document.createElement('div'), // 创建一个空的div来包裹版权信息，类似隐藏掉默认的版权信息
          // baseLayerPicker: false,//如果设置为false，则不会创建BaseLayerPicker小部件
          // 指定Cesium的底图图层实例，默认为ImageryProvider
          imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=申请自己的key',
            layer: 'vec',
            style: 'default',
            tileMatrixSetID: 'w',
            format: 'tiles',
            maximumLevel: 18
          })
        });
        //加载具有地形高度的数字模型或图像，即抬高三维模型所在区域的地形高度
        terrainProvider = new Cesium.CesiumTerrainProvider({
          url: 'http://127.0.0.1:10004' + this.detailInfo.terrainPath,
          requestVertexNormals: true,
          requestWaterMask: true,
          tilingScheme: new Cesium.GeographicTilingScheme(),
          requestVertexNormals: true
        })
        viewer.terrainProvider = terrainProvider
        var creditElement = document.createElement('div')
        creditElement.style.position = 'absolute'
        creditElement.style.bottom = '10px'
        creditElement.style.right = '10px'
        creditElement.style.color = 'white'
        creditElement.style.fontSize = '20px'
        creditElement.innerHTML = '2024.6'
  
        // 将DOM元素添加到Viewer的容器中
        viewer.container.appendChild(creditElement)
        tileset = new Cesium.Cesium3DTileset({
          url: 'http://127.0.0.1:10004' + this.detailInfo.filePath,
          maximumMemoryUsage: 5120//控制 3D Tiles 的最大内存使用量，从而在保证数据流畅的前提下尽可能减小内存占用。
        })
        viewer.scene.primitives.add(tileset)
        viewer.zoomTo(tileset)
        // this.addYdbPoints()//绘制自定义位置点广告牌，见Cesium实现位置点的自定义弹框显示内容

    },
   
    startFly () {
      this.start = true
      this.pause = false
      this.keepup = true
      this.stop = false
      this.showSelect = true
      // 当下个飞行前清除上次的飞行对象和路径
      if (airplaneEntity != null) {
        viewer.entities.remove(airplaneEntity)
      }
      // 获取条目经纬度数据集合
      const positions = []
      for (let i = 0; i < this.options.length; i++) {
        const position = {
          longitude: this.options[i].longitude,
          latitude: this.options[i].latitude,
          height: 1000
        }
        positions.push(position)
      }
      const flightData = positions
      const totalSeconds = (flightData.length) * timeStepInSeconds
      // 设置起点时间
      const time = new Date('2020-03-09T23:10:00Z')
      const start = Cesium.JulianDate.fromDate(time)
      // 设置终点时间
      const stop = Cesium.JulianDate.addSeconds(start, totalSeconds, new Cesium.JulianDate())

      viewer.clock.startTime = start.clone()
      viewer.clock.stopTime = stop.clone()
      viewer.clock.currentTime = start.clone()

      for (let i = 0; i < flightData.length; i++) {
        const dataPoint = flightData[i]
        // 采样时间
        const time = Cesium.JulianDate.addSeconds(start, i * timeStepInSeconds, new Cesium.JulianDate())

        // 计算当前的3D坐标
        const position = Cesium.Cartesian3.fromDegrees(dataPoint.longitude, dataPoint.latitude, dataPoint.height)

        // 添加轨迹采样点
        positionProperty.addSample(time, position)
      }
      // 创建飞机模型
      airplaneEntity = viewer.entities.add({
        // id: item.id,
        availability: new Cesium.TimeIntervalCollection([
          new Cesium.TimeInterval({
            start: start,
            stop: stop
          })
        ]),
        position: positionProperty,
        model: {
          uri: '/model/glb/Cesium_Air.glb',
          scale: 0.0
        },
        // 自动计算前进方向
        orientation: new Cesium.VelocityOrientationProperty(positionProperty)
      })

      // 设置相机追踪运动物体
      viewer.trackedEntity = airplaneEntity

      // 设置时间速率
      viewer.clock.multiplier = 1

      // 设置自动播放
      viewer.clock.shouldAnimate = true
      const that = this
      viewer.clock.onTick.addEventListener(function (clock) {
        // var endTime = Cesium.JulianDate.addSeconds(startTime, duration, new Cesium.JulianDate());
        if (Cesium.JulianDate.greaterThan(clock.currentTime, stop)) {
          // 退出界面操作
          // 例如：关闭Cesium Viewer
          that.finishFly()
        }
      })
    },
    // 暂停飞行
    stopFly () {
      this.pause = true
      this.start = true
      this.keepup = false
      this.stop = false
      viewer.clock.shouldAnimate = false
    },
    // 继续飞行
    continueFly () {
      this.keepup = true
      this.start = true
      this.pause = false
      this.stop = false
      viewer.clock.shouldAnimate = true
    },
  
    finishFly () {
      this.stopFly()
      this.stop = true
      this.start = false
      this.keepup = true
      this.pause = true
      this.showSelect = false
      viewer.entities.remove(airplaneEntity)
    }
  },
  beforeDestroy () {
    if (viewer) {
      // 组件销毁时，确保Cesium资源被释放
      viewer.destroy()
    }
  }
}

</script>

<style scoped>
.visualization {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}


.infoDiv {
  padding: 10px;
  position: absolute;
  left: 10px;
  top: 70px;
  width: 10%;
  height: 180px;
  z-index: 999999;
}

#cesiumContainer {
  position: relative;
  top: 5px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999
}
</style>

Cesium 实战 14 - 飞行视角跟随-第一人称视角漫游
非科班Java出身GISer的博客
03-22 8411
作为三维项目，以第一人称视角漫游是比较常见的需求，而 Cesium 默认是不带此功能，因此需要自己实现。在网上几乎没有发现完整的实现示例，大多都是部分代码或者提供思路，经研究，终于实现功能，这里记录一下。
【Cesium开发实战】第一视角漫游功能的实现，可设置漫游路径，飞行，暂停，继续，退出，删除路径
莫言情怼的博客
07-17 1484
第一人称漫游管理。
三维GIS开发cesium智慧地铁教程（7）路径漫游
最新发布
2403_88103571的博客
06-10 533
我们使用方法定义了两个位置点，作为轨迹的起点和终点。通过以上步骤，我们成功创建了一个包含动态轨迹的Cesium应用。可以通过调整时间、位置和模型参数，进一步探索Cesium功能。
cesium实现飞行漫游
wo_buzhidao的博客
11-16 6538
cesium实现飞行漫游 代码 <template> <div> <div class="container"> <el-button type="primary" size='mini' @click="goHome" >回到首页</el-button>...
Cesium飞行漫游
03-13
参考网上代码实现了漫游飞行，简单的飞行。 包括开始飞行、暂停飞行、向前飞行、向后飞行、设定路线、保存路线、清空路线、退出飞行
Cesium飞行漫游 Cesium飞行漫游
06-16
Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游Cesium飞行漫游
Cesium跟随视角漫游
xt3d的博客
10-31 4883
Cesium跟随视角漫游 前言 在三维城市系统中，用户常常想要在无人操作的时候让三维场景自动播放漫游功能，这样能够让参观系统的人可以观看到三维城市模型的各个地区。漫游方式有很多种，比如跟随视角漫游、第一人称漫游、上帝视角漫游等。 实现效果 实现思路 cesium中实现跟随视角漫游比较简单，只需要锁定移动的entity对象即可 关键代码 this.animateEntity = this.viewer.entities.add({ availability: new Cesium
cesium之三维漫游飞行效果实现篇.zip
06-19
在本篇中，我们将深入探讨如何使用Cesium实现三维漫游飞行效果。Cesium是一款强大的开源JavaScript库，专为在Web上创建交互式、实时3D地理空间应用程序而设计。它利用 WebGL 技术，无需插件即可在浏览器中展示全球高...
Cesium自定义轨迹飞行漫游实现（纯干货）
GIS_wudi的专栏
01-20 2198
Cesium自定义轨迹飞行漫游实现 源码
【Cesium开发实战】飞行漫游功能的实现，可设置漫游路径，漫游高度，暂停，继续，删除路径
莫言情怼的博客
07-11 1296
Cesium可自定义的漫游飞行
cesium漫游
weixin_45501117的博客
03-02 814
【代码】cesium漫游。
Cesium 飞行漫游 贴地漫游
资深三维GIS开发
02-25 6098
之前发过一个全局漫游的案例，那个是简单的飞行漫游，现在我封装了一个复杂的漫游类，包含飞行漫游和贴地漫游。 先看下页面（页面的样式没有调0.0）： 咱们按照步骤来说： 1、路线设定 我在这里的路线绘制依赖于我写的一个绘制类，实际应用过程中只要传入对应的世界坐标的坐标数组即可。本人为了方便开发，将大部分常用的功能都进行了封装。 2、漫游前参数设定 在这里可以设置是否是贴地漫游，漫游过程...
Cesium：实现漫游飞行
KaiSarH
03-14 5432
cesium实现漫游飞行
cesium 漫游飞行_Cesium三维漫游
weixin_39959505的博客
01-04 1480
1、简介：Cesium 三维漫游，按路径漫游。支持飞行控制，包括视角跟随和俯视，速度和高度控制等；支持绘制线路，线路保存到列表中；支持选择线路列表中的线路进行漫游；二、代码function doFly() { if(pathsData && pathsData.geometry){ var positionA = p...
Cesium：路径漫游
席木木的博客
03-08 2029
Cesium：路径漫游，基于SampledPositionProperty实现路径漫游效果，并提供暂停、继续、退出漫游的工具方法，借助Cesium的事件机制定义了退出漫游和漫游结束时的回调操作接口，可在漫游结束时执行一些个性化的操作（如临时资源销毁或者弹框提示等）。
[cesium] | 路径漫游 | 第一视角 | 相机跟踪效果
啊嘞嘞的博客
09-07 2740
通过SampledPositionProperty 实现 效果图
cesium飞行第一视角
qq_37891961的博客
04-11 2310
cesium 飞行漫游第一视角
Cesium上帝视角漫游
xt3d的博客
10-31 1538
Cesium上帝视角漫游 前言 在三维城市系统中，用户常常想要在无人操作的时候让三维场景自动播放漫游功能，这样能够让参观系统的人可以观看到三维城市模型的各个地区。漫游方式有很多种，比如跟随视角漫游、第一人称漫游、上帝视角漫游等。 实现效果 实现思路 实现上帝视角漫游，与第一人称漫游思路一致。 关键代码 traceHandler() { let center = this.animateEntity.position.getValue( this.viewer.cl
cesium相机漫游飞行
weixin_43245952的博客
07-30 1202
cesium漫游飞行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>漫游飞行效果</title> <link rel="stylesheet" href="../Build/Widgets/widgets.css" /> <script src="../Build/Cesium.js"></script> &lt
Cesium实现简易飞行漫游功能
用户可以以第一人称视角或者固定视角观看飞行过程。 #### 2. Cesium 场景与相机控制 - **相机（Camera）**：在 Cesium 中，相机是场景中的一个关键概念，负责定义观察者的位置、方向和视野。通过设置相机的位置和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值