qe-popup

这个组件是三维中一些小部件，用于绘制弹窗。

---

注意

该组件直接挂载到 qe-viewer 组件上，不需要额外的图层组件来承载。

实例

启业云大数据（南京）有限公司

了解更多

隐藏代码

<template>

  <div style="height: 450px;">
    <qe-viewer
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
      <qe-popup
          v-if="isShowPopup"
          :position="[118.78600228, 31.9135434, 1.66113721]"
          :offset="[0, -40]"
          @cancel="popupEvts"
        >
          <div>
            <div>启业云大数据（南京）有限公司</div>
            <a href="https://www.qycloud.com.cn/">了解更多</a>
          </div>
      </qe-popup>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QePopup } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'

export default {
  components: {
    QeViewer, 
    QePopup
  },
  data () {
    return {
      markers:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowPopup: true
    };
  },
  methods: {
    popupEvts() {
      this.isShowPopup = false;
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
position	弹窗位置坐标，[lng-经度,lat-纬度,alt-高度]	array	—	—
offset	弹窗偏移距离	array	—	[0,0]
className	自定义弹窗样式类名	string	—	—

Events

弹窗事件的使用请参照上面Popup 实例

---

// 覆盖物可选事件
"ready" // 组件装载后，返回当前实例对象
"cancel" // 关闭弹窗时触发