qe-layer-control

图层控制组件，主要用于控制视图中已添加的图层的显示隐藏。

---

注意

图层控制组件依赖于 el-tree,请确保引入了element-ui (opens new window)及其样式文件，否则可能会导致错误。 图层控制组件中控制的图层，必须是图层名称不为空的图层。

实例

隐藏代码

<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-layer-control />
    </qe-viewer>
  </div>
</template>

<script>
import {
  QeViewer,
  QeEntityLayer,
  QeLayerGroup,
  QeMarker,
  QeLayerControl
} 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,
    QeLayerControl
  },
  data () {
    return {
      divIcons:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      billboardOpt: {
        icon: require('../../src/assets/dataImages/locate.png')
      }
    };
  }
}
</script>