# qe-custom-billboard

这个组件主要用于三维中添加自定义的带有辅助标记线的图标。

# 实例

隐藏代码

<template>

  <div style="height: 450px;">
    <qe-viewer
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
      @init="getApi"
    >
      <qe-entity-layer v-if="isShowLayer">
        <qe-custom-billboard
          :position="[118.78600228, 31.9135434, 1.66113721]"
          :icon="require('../../src/assets/dataImages/locate.png')"
          :size="[40, 40]"
          :height="40"
          :styles="bdStyles"
          :line-styles="lineStyles"
          :attr="{name: '测试点位'}"
          @click="handler"
          @ready="getOriginInstance"
        ></qe-custom-billboard>
      </qe-entity-layer>
    </qe-viewer>
  </div>
</template>

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

export default {
  components: {
    QeViewer, 
    QeEntityLayer, 
    QeCustomBillboard
  },
  data () {
    return {
      markers:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true,
      bdStyles: {
        verticalOrigin: 1
      },
      lineStyles: {
        material: "rgba(241,12,12,0.7)"
      },
      qEarth: null
    };
  },
  methods: {
    handler(evt) {
      const attr = evt.overlay.attr;
      alert(`该点的名称为--${attr.name}`)
    },
    getApi(qEarth) {
      this.qEarth = qEarth;
    },
    getOriginInstance(customBillboard) {
      const { PolylineDashMaterialProperty, Color } = this.qEarth;
      customBillboard.setVLine({
        material: new PolylineDashMaterialProperty({
          color: Color.YELLOW
        })
      })
    }
  }
}
</script>

# Attributes

参数	说明	类型	可选值	默认值
position	标记点坐标，`[lng-经度,lat-纬度,alt-高度]`	array	—	—
icon	图标资源地址	string/object	—	—
size	图标大小	array	—	[32, 32]
height	辅助标记线的高度	number	—	—
styles	图标可选样式参数	object	参照 styles	—
lineStyles	辅助标记线可选样式参数	object	参照 line-styles	—
attr	用户自定义属性，支持 JavaScript API 任意数据类型	*	—	—

# styles

  // 样式参数(可选)
  {
    "scale": 1, //比例
    "pixelOffset": { "x": 0, "y": 0 }, //偏移像素
    "rotation": 0, //旋转角度
    "horizontalOrigin": 0, // 指定 billboard 水平对齐方式。CENTER: 0, LEFT: 1, RIGHT: -1
    "verticalOrigin": 0, // 指定 billboard 垂直对齐方式。 CENTER: 0, BOTTOM: 1, BASELINE: 2, TOP: -1
    "heightReference": 0, // 指定 billboard 高度模式。 NONE: 0, CLAMP_TO_GROUND: 1, RELATIVE_TO_GROUND: 2
    "color": "white", // 指定 billboard 图片的颜色。
    "translucencyByDistance": {
      "near": 0, //最近距离
      "nearValue": 0, //最近距离值
      "far": 1, //最远距离值
      "farValue": 0 //最远距离值
    }, //根据距离设置透明度
    "scaleByDistance": {
      "near": 0, //最近距离
      "nearValue": 0, //最近距离值
      "far": 1, //最远距离值
      "farValue": 0 //最远距离值
    }, //根据距离设置比例
    "distanceDisplayCondition": {
      "near": 0, //最近距离
      "far": Number.MAX_VALUE //最远距离
    }, //根据距离设置可见
    "disableDepthTestDistance": 0 // 深度检测距离，用于防止剪切地形，设置为零时，将始终应用深度测试。设置为Number.POSITIVE_INFINITY时，永远不会应用深度测试。
  }

# line-styles

  // 样式参数(可选)
  {
    "width": 1, //线宽
    "material": "red", //材质
    "arcType": 1, // 线条类型。NONE: 0, GEODESIC: 1, RHUMB: 2
    "clampToGround": false, //是否贴地
    "shadows": 0, //阴影类型，0：禁用、1：启用 、2：投射、3：接受
    "distanceDisplayCondition": {
      "near": 0, //最近距离
      "far": Number.MAX_VALUE //最远距离
    }, //根据距离设置可见
    "classificationType": 2, //分类 是否影响地形，3D切片或同时影响这两者。0:地形、1:3D切片、2：两者
    "zIndex": 0 //层级
  }

# Events

覆盖物事件的使用请参照上面CustomBillboard 实例

// 覆盖物可选事件
"ready" // 组件装载后，返回当前实例对象
"click" // 鼠标点击事件
"rightclick" // 鼠标右击事件
"dblclick" // 鼠标双击事件
"mousemove" // 鼠标移动事件
"wheel" // 鼠标滚轮事件
"mouseover" // 鼠标移入事件
"mouseout" // 鼠标移出事件

← qe-rectangle qe-custom-label →