qe-flight

飞行漫游组件，加载漫游配置文件后控制飞行播放相关参数。

---

注意

实例

显示路径

FLY PAUSE STOP

单程 往返 循环

隐藏代码

<template>

  <div style="height: 650px;">
    <div  style="height: 10%;">
        <el-checkbox v-model="showPath" border size="mini">
          显示路径
        </el-checkbox>
        <el-radio-group
          v-model="flightState"
          size="mini"
          @change="switchFlight"
        >
          <el-radio-button label="FLY" />
          <el-radio-button label="PAUSE" />
          <el-radio-button label="STOP" />
        </el-radio-group>
        <el-radio-group v-model="flightMode" size="mini" @change="switchMode">
          <el-radio-button label="单程" />
          <el-radio-button label="往返" />
          <el-radio-button label="循环" />
        </el-radio-group>
      </el-button-group>
    </div>
    <div v-show="eagle" style="position:relative;height: 15%;z-index: 999;">      
      <qe-viewer
      style="width: 30%;border: solid blue 1px;left:0;bottom:0;position:absolute"
        :imagery-type="'TMap'"
        :default-view="defaultView"
        :location-bar="false"
        :navigation="{
          enableCompass: false,
          enableZoomControls: false,
          enableDistanceLegend: false,
          enableCompassOuterRing: false
        }"
        @ready="getEagleViewer"
      >
        <qe-entity-layer>
          <qe-marker
            :key="'marker'"
            :position="ps"
            :billboard="bd"
            @ready="track"
          />
        </qe-entity-layer>
        <qe-layer-group
          v-for="(item, index) in modelConfig"
          :key="`modellayergroup${index}`"
          :name="item.groupName"
        >
          <qe-entity-layer
            v-for="(layer, layerIndex) in item.layers"
            :key="`modellayer${layerIndex}`"
            :name="layer.name"
            :visible="layer.visible"
          >
            <qe-model
              :position="layer.options.position"
              :scale="layer.options.scale"
              :url="layer.options.url"
            />
          </qe-entity-layer>
        </qe-layer-group>
      </qe-viewer>
    </div>
    <qe-viewer style="height: 75%;"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
      @ready="getViewer"
    >
      <qe-flight
        :url="flightUrl"
        :state="flightState"
        :show-path="showPath"
        :is-loop="isLoop"
        :is-repeat="isRepeat"
        @ready="getFlight"
        @complete="completeFlight"
      />
      <qe-layer-group
        v-for="(item, index) in modelConfig"
        :key="`mdlayergroup${index}`"
        :name="item.groupName"
      >
        <qe-entity-layer
          v-for="(layer, layerIndex) in item.layers"
          :key="`mdlayer${layerIndex}`"
          :name="layer.name"
          :visible="layer.visible"
        >
          <qe-model
            :position="layer.options.position"
            :scale="layer.options.scale"
            :url="layer.options.url"
            :styles="{ backFaceCulling: false }"
          />
        </qe-entity-layer>
      </qe-layer-group>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer,
QeFlight,
QeModel,
QeMarker,
QeEntityLayer,
QeLayerGroup,QEarth } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
import elementUI from 'element-ui'
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(elementUI)
let flight
export default {
  components: {
    QeViewer,
    QeFlight,
    QeModel,
    QeMarker,
    QeEntityLayer,
    QeLayerGroup
  },
  data () {
    return {
      defaultView: [118.34009149, 30.88081682, -124.655, 108,0, 0],
      ps: [118.34009722, 30.8808023, -101.279],
      bd: {
        icon: require('../../src/assets/dataImages/roaming.png'),
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        size: [50, 50]
      },
      eagle: true,
      modelConfig: [
        {
          groupName: '模型图层组',
          layers: [
            {
              name: '繁昌县前山矿业',
              visible: true,
              options: {
                position: [118.34, 30.88, 0],
                url:
                  'http://221.226.186.58:8025/model/fc_qianshan3/qianshan0712.gltf',
                scale: 1
              }
            },
            {
              name: '南陵县戴腰山铜矿',
              visible: true,
              options: {
                position: [118.34, 30.88, 0],
                url:
                  'http://221.226.186.58:8025/model/nl_daiyaoshan3/DYS0712.gltf',
                scale: 1
              }
            },
            {
              name: '南陵县金鑫铜矿',
              visible: true,
              options: {
                position: [118.34, 30.88, 0],
                url: 'http://221.226.186.58:8025/model/nl_jinxin3/JINXIN(1).gltf',
                scale: 1
              }
            },
            {
              name: '南陵县小工山铁铜矿',
              visible: true,
              options: {
                position: [118.34, 30.88, 0],
                url:
                  'http://221.226.186.58:8025/model/nl_xiaogongshan2/XGS0712.gltf',
                scale: 1
              }
            }
          ]
        }
      ],
      flightState: 'STOP',
      flightUrl: 'http://10.0.16.100/data/flyconfig.json',
      bookmarks: [],
      paths: [],
      start: '',
      end: '',
      currentPath: '',
      sections: [],
      flightMode: '单程',
      velocity: 1,
      showPath: false,
      isLoop: false,
      isRepeat: false,
    };
  },
  methods: {
    getViewer(viewer) {
      viewer.scene.debugShowFramesPerSecond = true
      window.viewer = viewer
      // viewer.scene.screenSpaceCameraController.enableRotate = false //漫游状态禁用左键拖拽
      this.setUnderground(viewer)
    },
    getEagleViewer(viewer) {
      window.eagleviewer = viewer
      // viewer.scene.screenSpaceCameraController.enableInputs = false //鹰眼图鼠标禁用
      this.setUnderground(viewer)
      const setView = () => {
        if (window.viewer) {
          const carto = QEarth.Cesium.Cartographic.fromCartesian(
            window.viewer.scene.camera.position
          )
          this.ps = [
            QEarth.Cesium.Math.toDegrees(carto.longitude),
            QEarth.Cesium.Math.toDegrees(carto.latitude),
            carto.height
          ]
          // 跟踪相机航向
          window.arrow._delegate.billboard.rotation =
            window.viewer.camera.heading * -1
        }
        requestAnimationFrame(setView)
      }
      requestAnimationFrame(setView)
    },
    track(entity) {
      // 鹰眼图跟踪相机
      window.arrow = entity
      window.arrow._delegate.viewFrom = new QEarth.Cesium.Cartesian3(0, -20, 20)
      window.eagleviewer.trackedEntity = entity._delegate
    },
    getKeyBoard(item) {
      console.log('keyBoardRoaming==== ', item)
    },
    handler(e) {},
    setUnderground(viewer) {
      viewer.underground = true
      viewer.scene.globe.baseColor = QEarth.Color.TRANSPARENT
      // viewer.scene.globe.translucency.enabled = true;
      viewer.scene.globe.undergroundColor = undefined
      viewer.scene.screenSpaceCameraController.enableCollisionDetection = false
      viewer.scene.pickTranslucentDepth = true
    },
    switchMode(val) {
      console.log('val====', val)
      if (val === '单程') {
        this.isRepeat = false
        this.isLoop = false
      } else if (val === '往返') {
        this.isLoop = true
      } else if (val === '循环') {
        this.isRepeat = true
      }
    },
    getFlight(ft) {
      const geocode = new QEarth.Geocoder();
    // 解析地址
    geocode.getLocation("南京市浦口区腾飞大厦", 'AMap', evt => {
      console.log(evt);
    });
    // 解析坐标
    geocode.getAddress(new QEarth.Position(103.3034872919241, 26.42421504556067, 0), 'AMap', evt => {
      console.log(evt);
    });
      flight = ft
      this.bookmarks = flight.bookmarks.list
      this.paths = flight.paths
      this.currentPath = flight.currentPath.name
      this.sections = flight.currentPath.sections
    },
    switchFlight(type) {
      this.flightState = type
    },
    switchBookmark(bookmark) {
      console.log(bookmark, '====switchBookmark')
      const destination = QEarth.Cesium.Cartesian3.fromDegrees(
        ...bookmark.destination
      )
      const heading = QEarth.Cesium.Math.toRadians(bookmark.orientation.heading)
      const pitch = QEarth.Cesium.Math.toRadians(bookmark.orientation.pitch)
      const roll = QEarth.Cesium.Math.toRadians(bookmark.orientation.roll)
      const target = {
        destination,
        orientation: {
          heading,
          pitch,
          roll
        }
      }
      console.log(target, '====tatget')
      window.viewer.scene.camera.setView(target)
    },
    switchPath(path) {
      // 切换路径
      console.log('path====', path)
      flight.setPathFromId(path.id)
      this.currentPath = flight.currentPath.name
      this.sections = flight.currentPath.sections
    },
    removeBookmark(bookmark) {
      console.log(bookmark, '====removeBookmark')
      flight.bookmarks.remove(bookmark.id)
    },
    // 保存相机预置位
    saveCam() {
      flight.addCurrentView({
        id: flight.bookmarks.list.length,
        name: flight.bookmarks.list.length
      })
      console.log(flight.bookmarks.export(), '=====addCurrentView')
    },
    addSection() {
      // 增加路段
      if (this.start && this.end && this.start !== this.end) {
        flight.addSection({
          // id: controller.currentPath.sections.length,
          startId: this.start,
          endId: this.end,
          duration: 2
        })
        console.log(flight.export(), '=====testAddSection')
        this.sections = flight.currentPath.sections
      }
    },
    removeSection(section) {
      flight.removeSectionFromId(section.id)
      this.sections = flight.currentPath.sections
    },
    completeFlight() {
      this.flightState = 'STOP'
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
url	飞行配置文件地址	string
state	飞行漫游状态	string	FLY,PAUSE,STOP	STOP
isRepeat	是否回到起点重新开始	boolean	true,false	false
isLoop	是否反向飞回起点	boolean	true,false	false
showPath	是否显示飞行路线和节点	boolean	true,false	false
velocity	飞行速率	number		1

Events

---

// 可选事件
"ready" // 组件装载后，返回当前实例对象
"complete" // 完成一次漫游后触发