# qe-viewer

三维场景视图组件是用于构建三维程序的基础组件，包含并包装所有其他组件。已适配接入的在线地图，坐标系已统一，可随意切换底图使用。

# 实例

隐藏代码

<template>

<div  style="height: 8%;padding-bottom:5px;">   
  <el-select v-model="map"  placeholder="请选择地图源">
  <el-option
    v-for="item in basemaps"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select> 
 <el-select v-model="maptype"  placeholder="请选择地图源">
  <el-option
    v-for="item in styles"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>     
  <el-button type="primary" @click="changeMap(map,maptype)">切换</el-button>   
      <!-- <el-dropdown size="mini" @command="changeMap">
        <el-button type="primary" size="mini">
      切换底图<i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(bp, i) in basemaps"
            :key="i"
            :command="{
              imagerytype: bp.imagerytype,
              onlinemaptype: bp.onlinemaptype,
            }"
          >
            {{ bp.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown> -->
  </div>
  <div style="height: 450px;">
    <qe-viewer 
      :imagery-type="imagerytype"
      :online-map-type="onlinemaptype"
      :fullscreen-button="true"
      :default-view="defaultView"
    ></qe-viewer>
  </div>
</template>

<script>
import { QeViewer } 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
  },
  data () {
    return {
       viewer: null,
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      basemaps: [
        { label: "天地图", value: "TMap"},

        { label: "高德地图", value: "AMap"},

        { label: "腾讯地图", value: "TencentMap"},
        { label: "ArcGIS地图", value: "ArcGIS"},
      ],
        styles: [
        { label: "影像图",  value: "satellite" },
        { label: "矢量图",  value: "normal" },
        { label: "矢量午夜蓝",  value: "midnight-blue" },
        { label: "矢量浅蓝",  value: "light-blue" },
        { label: "矢量蓝黑",  value: "blue-black" },
        { label: "矢量浅灰",  value: "light-gray" },
        { label: "矢量暗色",  value: "dark" }
      ],
      map:'TMap',
      maptype:'satellite',
      imagerytype:'TMap',
      onlinemaptype:'satellite'
    };
  },
  methods: {
    changeMap(map,maptype) {
      (this.imagerytype = map), (this.onlinemaptype = maptype);
    },
  }
}
</script>

# Attributes

参数	说明	类型	可选值	默认值
imageryType	基础底图类型：`AMap`-高德地图 `TMap`-天地图	string	`TMap`/`AMap`/`ArcGIS`/`TencentMap`	`TMap`
onlineMapType	地图默认底图类型：`normal`-街道地图 `satellite`-卫星地图	string	`normal`/`satellite`/`midnight-blue`/`light-blue`/`blue-black`/`light-gray`/`dark`	`satellite`
defaultView	初始默认视图，可以使用 `viwer.cameraPosition`获得手动调整好的视图参数	array	[lng,lat,alt,heading,pitch,roll],参数说明：`lng--相机位置经度，lat--相机位置纬度，alt--相机高度，heading--偏航角，pitch--俯仰角，roll--翻滚角(对应的单位为°)`	[117.1119439, 36.30287856, 7770925.91, 358.97, -89.97, 0]
locationBar	用于启用或者禁用位置兰控件	boolean	—	true
viewerMode	用于地图模式切换，`2D/2.5D/3D`	string	`2D/2.5D/3D`	3D
defaultCenter	用于 2D 模式下设置当前视图，具体格式:`[lng,lat,alt]`,一般可以通过 `Viewer.centerPosition` 获取，不设置会自动根据三维视角计算当前中心点相关位置	array	—	—
navigation	用于启用或者禁用罗盘相关导航控件	object	参照 navigationOptions	—
underground	是否开启地下模式	boolean	—	false
depthTestAgainstTerrain	是否开启地形检测	boolean	—	true
globeTranslucency	地表透明度设置,只有当开启地下模式的时候才有效, `alpha` --地表透明度，`undergroundColor`--地表透明的地下背景色	object	`{alpha: 0.5,undergroundColor:'gray'}`	—
fullscreenButton	用于启用或者禁用全屏控件	boolean	—	true
infoBox	是否显示信息框	boolean	—	false
animation	是否显示动画控件	boolean	—	false
timeline	是否显示时间轴控件	boolean	—	false
navigationHelpButton	是否显示导航帮助按钮	boolean	—	false
sceneModePicker	是否显示场景模式切换按钮	boolean	—	false
selectionIndicator	是否显示选择指示符	boolean	—	false
homeButton	是否显示主页按钮	boolean	—	false
geocoder	是否显示地理编码器搜索框	boolean	—	false
vrButton	是否显示 VR 功能按钮	boolean	—	false
scene3DOnly	如果为 true，则每个几何实例仅以 3D 形式呈现以节省 GPU 内存。	boolean	—	false
skyBoxOnGround	近地天空盒	object	{positiveX:右侧图片,negativeX:左侧, positiveY:后侧,negativeY:前侧,positiveZ:顶图, negativeZ:底图 }	—
shouldAnimate	时钟是否应尝试延长仿真时间	boolean	—	false
viewOptions	更多的 viewer 相关的参数设置	object	更多参照官方 API (opens new window)	—

# navigationOptions

const navigation = {
  enableCompass: true, // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。
  enableZoomControls: true, // 用于启用或禁用缩放控件。
  enableDistanceLegend: true, // 用于启用或禁用距离图例。
  enableCompassOuterRing: true // 用于启用或禁用指南针外环。
}

# Events

事件的使用请参照上面Viewer 实例

"init" // qe-viewer 视图组件初始事件，返回 QEarth API 对象
"ready" // 组件装载后，返回当前实例对象
"click" // 鼠标点击事件
"rightclick" // 鼠标右击事件
"dblclick" // 鼠标双击事件
"mousemove" // 鼠标移动事件
"wheel" // 鼠标滚轮事件
"addlayer" // 添加图层时触发事件
"removelayer" // 移出图层时触发事件
"addeffect" // 添加特效时触发事件
"removeeffect" // 移出特效时触发事件

← 组件入门介绍 qe-vector-tile-layer →