# qe-track-path

漫游路线组件，用于配置漫游路径相关功能，和 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="handleChangeDuration"
        >
      </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">
        <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: 'free'
      },
      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: '自由视角'
        }],
    }
  },
  methods: {
    startTrack () {
      this.isPlayTrack = !this.isPlayTrack
    },
    pauseTrack () {
      this.isPauseTrack = !this.isPauseTrack
    },
    handleChangeDuration(duration) {
      this.duration = duration
    },
    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

参数	说明	类型	可选值	默认值
positions	漫游路径坐标串	array	`[[lng,lat,alt],[],[]]`	—
id	漫游线路唯一 `id`	string	—	不设置会自动生成唯一 `id`
trackModel	漫游的模型设置	object	参照 Model	—
billboard	漫游图标，当有模型的时候，不需要设置。	object	参照 Billboard	—
label	漫游文字标签，当有模型的时候，不需要设置，可以图标结合使用。	object	参照 Label	—
options	漫游路线其他参数设置	object	参照漫游线路参数说明	—
viewMode	漫游路线视角设置	object	参照漫游线路参数说明	—
trackTick	漫游路线点事件，返回Positoin，当前点模型的位置信息，包含角度	Function	参照漫游线路参数说明	—

# 参照漫游线路参数说明

const trackModel = {
	// 模型地址
	url: "/testDataApi/examples/models/qiche.gltf",
	// 模型样式
	style: {
		scale: 0.5
	}
};
const billboard = {
	// 图片地址
	icon: "",
	// 样式
	style: {}
};
const label = {
	// 文字内容
	text: "",
	// 样式
	style: {}
};
const viewMode = {
	type: "1", // 视角类型, "1"--第一人称视角，"2"--"第三人称视角"，"tracked"--跟随视角，"free"-- 自由视角
	range: 1000, // 相机视角范围
	pitch: 0, // 当 `viewMode` 为 type="1" 时，相机偏移量中的俯仰角设置
	alt: 5 // 当 `viewMode` 为 type="1" 时，相机位置高度设置
};

# Events

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

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

← qe-track-controller qe-key-board-roaming →