Vue QEarth

# qe-key-board-roaming

键盘漫游组件，由键盘 WASD 和方向键控制相机运动。

注意

# 实例

隐藏代码 
<template>

  <div style="height: 650px;">
    <div  style="height: 15%;">
      <el-button-group>
        <el-checkbox v-model="eagle" border size="mini" style="margin:0">
          鹰眼图
        </el-checkbox>
        <el-checkbox v-model="enableRoaming" border size="mini" style="margin:0">
          键盘漫游
        </el-checkbox>
        <el-checkbox v-model="trackMouse" border size="mini" style="margin:0">
          跟踪鼠标
        </el-checkbox>
        <el-checkbox v-model="collision" border size="mini" style="margin:0">
          碰撞检测
        </el-checkbox>
      </el-button-group>
    <div v-show="eagle" style="
    position:relative;
  width: 30%;
  height: 100%;
  bottom: 40%;
  left: 70%;
  border: solid blue 1px;
  z-index: 999;">
      <qe-viewer
        :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>
    </div>
    <qe-viewer style="height: 85%;"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
      @ready="getViewer"
    >
      <qe-key-board-roaming
        :enable="enableRoaming"
        :collision="collision"
        :track-mouse="trackMouse"
        @ready="getKeyBoard"
      />
      <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,
QeKeyBoardRoaming,
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 mainView,eagleView
export default {
  components: {
    QeViewer,
    QeKeyBoardRoaming,
    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
              }
            }
          ]
        }
      ],
      enableRoaming: false,
      collision: true,
      trackMouse: true
    };
  },
  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
    },
    switchKeyBoardRoaming() {
      this.enableRoaming = !this.enableRoaming
    },
    switchTrackMouse() {
      this.trackMouse = !this.trackMouse
    },
    switchCollision() {
      this.collison = !this.collison
    },
  }
}
</script>

# Attributes

参数 说明 类型 可选值 默认值
enable 是否开启漫游 boolean true,false false
collision 是否开启模型内部碰撞检测 boolean true,false false
trackMouse 是否跟随鼠标 boolean true,false false
turnRange 相机转动范围角度[横向，纵向] array [400,200]
rotateRate 旋转速率弧度 number 0.1
moveRate 移动速率 number 1
keyMode 键位模式 1-WASD 2-↑↓←→ String 1,2 1

# KeyBoard Operations

KeyMode 0(default) 1
前进 W ↑
后退 S ↓
左移 A ←
右移 D →
上移 SHIFT+W SHIFT+W
下移 SHIFT+S SHIFT+S
左旋 Q Q
右旋 E E
左转 ← A
右转 → D
上转 ↑ W
下转 ↓ S

# Events

// 可选事件
"ready" // 组件装载后，返回当前实例对象
"collision" // 检测到碰撞时的事件
最后更新时间: 9/15/2022, 9:23:41 AM

← qe-flight →