qe-html-overlay

这个组件是三维中一些小部件，用于绘制一些自定义的前端元素覆盖物。

---

注意

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

实例

隐藏代码

<template>

  <div style="height: 450px;">
    <qe-viewer
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
      <qe-html-overlay
        :position="[118.78600228, 31.9135434, 1.66113721]"
        :defTemp="true"
        @ready="overlayEvts"
      >
        <template v-slot:qeOverlayTitle>
          <div>测试企业信息</div>
        </template>
        <template v-slot:qeOverlayContent>
          <div class="data-li">
            <div class="data-label">
              实时流量：
            </div>
            <div class="data-value">
              <span class="label-num">198</span>
              <span class="label-unit">m³/s</span>
            </div>
          </div>
        </template>
      </qe-html-overlay>
    </qe-viewer>
  </div>
</template>

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

export default {
  components: {
    QeViewer, 
    QeHtmlOverlay
  },
  data () {
    return {
      markers:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ]
    };
  },
  methods: {
    overlayEvts(overlay) {
      overlay.id='testid';
      this.isShowPopup = false;
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
position	位置坐标，[lng-经度,lat-纬度,alt-高度]	array	—	—
offset	偏移距离	array	—	[0,0]
defTemp	是否使用默认模板	boolean	—	true

Events

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

---

// 覆盖物可选事件
"ready" // 组件装载后，返回当前实例对象