# qe-track-controller

漫游路线组件，用于配置漫游路径相关功能，和 TrackController 组件结合使用实现漫游功能。

注意

漫游控制组件和漫游路线组件共同使用，一般漫游路线组件作为子组件被使用。

# 实例

改变时长：

切换视角：

隐藏代码

<template>

  <div style="height: 450px;">
    <div  style="height: 8%;">
      <el-button-group>
        <el-button 
          type="primary" 
          size="mini" 
          @click="startTrack()">
          {{ isPlayTrack ? '结束漫游' : '开始漫游' }}
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="pauseTrack()">
          {{ isPauseTrack ? '播放' : '暂停' }}
        </el-button>
      </el-button-group>
      <label>改变时长：</label>
      <el-input-number 
        v-model="duration"
        :step="2"
        size="mini"
        :min="1" 
        :max="100"
        @change="handleChangeSpeed"
        >
      </el-input-number>
      <label>切换视角：</label>
      <el-select 
        size="mini"
        v-model="viewModeValue" 
        placeholder="请选择漫游视角" 
        @change="handlerChangeViewMode">
        <el-option
          v-for="item in trackViewMode"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <qe-viewer style="height: 90%;"
      :imagery-type="'TMap'"
      :default-view="defaultView"
    >
      <qe-track-controller :playing="isPlayTrack" :pausing="isPauseTrack" :speed="speed">
        <qe-track-path
          :positions="trackPositions"
          :duration="duration"
          :track-model="trackModel"
          :view-mode="viewMode"
        />
      </qe-track-controller>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QeTrackController, QeTrackPath } 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)

export default {
  components: {
    QeViewer, 
    QeTrackController, 
    QeTrackPath
  },
  data () {
    return {
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      trackModel: {
        url: "../Cesium_Man.glb",
        style: {
          scale: 5
        }
      },
      viewMode: {
        mode: 1
      },
      duration: 30,
      trackPositions: [
        [118.78652278, 31.9118927, 0],
        [118.78655718, 31.91305226, 0],
        [118.78782395, 31.91411149, 0],
        [118.78789172, 31.91761209, 0],
        [118.79094442, 31.91788549, 0],
        [118.79124342, 31.91780779, 0],
        [118.79121663, 31.91629651, 0],
        [118.78854253, 31.91625039, 0]
      ],
      isPlayTrack: false,
      isPauseTrack: false,
      viewModeValue: 'free',
      trackViewMode: [{
          value: '1',
          label: '第一人称视角'
        }, {
          value: '2',
          label: '第三人称视角'
        }, {
          value: 'tracked',
          label: '跟随视角'
        }, {
          value: 'free',
          label: '自由视角'
        }],
       speed: 2
    }
  },
  methods: {
    startTrack () {
      this.isPlayTrack = !this.isPlayTrack
    },
    pauseTrack () {
      this.isPauseTrack = !this.isPauseTrack
    },
    handleChangeSpeed(speed) {
      this.speed = speed;
    },
    handlerChangeViewMode(viewModeVal) {
      switch (viewModeVal) {
        case '1':
          this.viewMode = {
            mode: "1",
            pitch:-20,
            range:100
          }
          break;
        case '2':
          this.viewMode.mode = 2
          break;
        case 'tracked':
          this.viewMode.mode = 'tracked'
          break;
        case 'free':
          this.viewMode.mode = "free"
          break;    
        default:
          break;
      }
    }
  }
}
</script>

# Attributes

参数	说明	类型	可选值	默认值
playing	是否开始漫游	boolean	—	false
pausing	是否暂停播放漫游	boolean	—	false
speed	漫游速度	number	—	2

# Events

覆盖物事件的使用请参照上面TrackControlller 实例

// 可选事件
"ready" // 组件装载后，返回当前实例对象

← qe-roaming-path qe-track-path →