# qe-roaming-controller

漫游控制组件，控制所有漫游线路的开始、暂停、播放、改变速度、设置漫游时间与间隔、添加路径、删除路径、追踪某一条路径等功能。

注意

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

# 实例

改变速度：

切换视角：

34.83 MS

显示代码

<template>

  <div style="height: 450px;">
    <div  style="height: 8%;">
      <el-button-group>
        <el-button 
          type="primary" 
          size="mini" 
          @click="handlerPlay()">
          {{ playRoamingPath ? '结束漫游' : '开始漫游' }}
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="handlerPause()">
          {{ roamingPausing ? '播放' : '暂停' }}
        </el-button>
      </el-button-group>
      <label>改变速度：</label>
      <el-input-number 
        v-model="roamingSpeed"
        :step="2"
        size="mini"
        :min="1" 
        :max="10"
        @change="handleChangeSpeed"
        >
      </el-input-number>
      <label>切换视角：</label>
      <el-select 
        size="mini"
        v-model="viewModeValue" 
        placeholder="请选择漫游视角" 
        @change="handlerChangeViewMode">
        <el-option
          v-for="item in roamingViewMode"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <qe-viewer style="height: 90%;"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
      <qe-roaming-controller
        :playing="playRoamingPath"
        :pausing="roamingPausing"
        :speed="roamingSpeed"
      >
        <qe-roaming-path
          :positions="roamingPath"
          :roaming-model="roamingModel"
          :options="roamingPathOptions"
          :viewMode="viewMode"
          @roamingTick="handlerRoamingTick"
        ></qe-roaming-path>
      </qe-roaming-controller>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer,QeRoamingController, QeRoamingPath } 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, 
    QeRoamingController,
    QeRoamingPath
  },
  data () {
    return {
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true,
      roamingPath: [],
      roamingModel: {
        url: "../Cesium_Man.glb",
        style: {
          scale: 5
        }
      },
      playRoamingPath: false,
      roamingPausing: false,
      roamingSpeed:1,
      roamingPathOptions: {
        showModel:true,
        // showPath: true
      },
      viewModeValue: "2",
      roamingViewMode: [{
          value: '1',
          label: '第一人称视角'
        }, {
          value: '2',
          label: '第三人称视角'
        }, {
          value: '3',
          label: '跟随视角'
        }, {
          value: '5',
          label: '自由视角'
        }],
      viewMode: {
        type: "2",
        range: 1000
      }  
    };
  },
  methods: {
    handlerRoamingTick(evts) {
      console.log(evts);
    },
    handlerPlay() {
      this.playRoamingPath = !this.playRoamingPath;
      this.roamingPath = [
        [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]
      ];  
      if (!this.playRoamingPath) {
        this.roamingPausing = false;
      }
    },
    handlerPause() {
      this.roamingPausing = !this.roamingPausing;
    },
    handleChangeSpeed(speed) {
      this.roamingSpeed = speed;
    },
    handlerChangeViewMode(viewModeVal) {
      switch (viewModeVal) {
        case '1':
          this.viewMode = {
            type: "1",
            pitch:-20,
            range:100
          }
          break;
        case '2':
          this.viewMode = {
            type: "2",
            range: 1000
          }
          break;
        case '3':
          this.viewMode = {
            type: "3",
          }
          break;
        case '5':
          this.viewMode = {
            type: "5"
          }
          break;    
        default:
          break;
      }
    }
  }
}
</script>
 
        Copied!

# Attributes

参数	说明	类型	可选值	默认值
playing	是否开始漫游	boolean	—	false
pausing	是否暂停播放漫游	boolean	—	false
speed	漫游速度	number	—	2
timeDuration	设置漫游开始时间以及时间间隔	object	漫游时间设置	`{startTime: new Date(),duration: 20}`
timeRange	设置漫游开始时间和结束时间	object	漫游时间设置	—

# 漫游时间设置

const timeDuration = {
	// 漫游开始时间，格式 `Date` 标准
	startTime: new Date(),
	// 时间间隔(秒)
	duration: 20
};
const timeRange = {
	// 漫游开始时间，格式 `Date` 标准
	startTime: new Date(),
	// 漫游借结束时间，格式 `Date` 标准
	endTime: new Date(startTime.setSeconds(startTime.getSeconds() + 20))
};

# Events

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

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

← qe-view-shed qe-roaming-path →