# qe-roaming-path

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

注意

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

# 实例

改变速度：

切换视角：

隐藏代码

<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>

# Attributes

参数	说明	类型	可选值	默认值
positions	漫游路径坐标串	array	`[[lng,lat,alt],[],[]]`	—
id	漫游线路唯一 `id`	string	—	不设置会自动生成唯一 `id`
mode	漫游路径模式，`speed`-匀速，`distance`-根据距离设置时间.	string	—	"speed"
roamingModel	漫游的模型设置	object	参照 Model	—
billboard	漫游图标，当有模型的时候，不需要设置。	object	参照 Billboard	—
label	漫游文字标签，当有模型的时候，不需要设置，可以图标结合使用。	object	参照 Label	—
options	漫游路线其他参数设置	object	参照漫游线路参数说明	—
viewMode	漫游路线视角设置	object	参照漫游线路参数说明	—

# 参照漫游线路参数说明

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

# Events

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

// 可选事件
"ready" // 组件装载后，返回当前实例对象
"roamingTick" // 点位到达回调函数返回的参数对象包含：position(位置信息)、orientation(朝向)、isLast(是否为最后的点位)

← qe-roaming-controller qe-track-controller →