qe-mini-box

视图控制工具箱。

---

实例

custom

隐藏代码

<template>

  <div style="height: 450px;position:relative;">  
    <qe-viewer 
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
      <qe-layer-group :name="'测试图层组1'">
        <qe-entity-layer :name="'测试图层1'">
          <qe-marker
            :position="[118.78600228, 31.9137434, 1.66113721]"
            :billboard="billboardOpt"
            :label="{
              text: '测试点位1',
              direction: 'right'
            }"
          />
        </qe-entity-layer>
        <qe-layer-group :name="'测试图层组2'">
          <qe-entity-layer :name="'测试图层2'">
            <qe-marker
              :position="[118.78600228, 31.9145434, 1.66113721]"
              :billboard="billboardOpt"
              :label="{
                text: '测试点位2',
                direction: 'right'
              }"
            />
          </qe-entity-layer>
        </qe-layer-group>
      </qe-layer-group>
      <qe-mini-box :buttons="checkedButtons" @tabClick="handleTab">
        <a @click="handleCustomClick">custom</a>
      </qe-mini-box>
    </qe-viewer>
  </div>
</template>

<script>
import {
  QeViewer,
  QeEntityLayer,
  QeLayerGroup,
  QeMarker,
  QeMiniBox
} 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, 
    QeEntityLayer, 
    QeLayerGroup,
    QeMarker,
    QeMiniBox
  },
  data () {
    return {
      divIcons:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      billboardOpt: {
        icon: require('../../src/assets/dataImages/locate.png')
      },
      buttons: [
        'layercontrol',
        'reset',
        'fullscreen',
        '2d',
        'model',
        'imagery'
      ],
      checkedButtons:['layercontrol',
        'reset',
        'fullscreen',
        '2d',
        'model',
        'imagery']
    };
  },
  methods:{
    handleTab(type, value) {
      console.log(type, value)
    },
    handleCustomClick(item) {
      console.log(item)
    },
    updateButtons(val){
      console.log(val)
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
buttons	按钮列表	array	['layercontrol', 'reset','fullscreen','2d','model','imagery']	['layercontrol', 'reset','fullscreen','2d','model','imagery']

Events

---

"tabClick" // 默认点击事件
"click" // 自定义点击事件