# qe-label

这个组件主要用于三维中绘制文字标签。

# 实例

隐藏代码

<template>

<div style="height: 450px;">
  <div  style="height: 8%;">
      <button @click="layerFilter" style="height: 30px;">
      layerFilter
      </button>
    </div>
    <qe-viewer style="height:90%"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
    <qe-entity-layer v-if="isShowLayer" @ready="layerHandler">
      <qe-label
      id="test"
        :position="[118.78600228, 31.9135434, 1.66113721]"
        :label-text="'启业云南京大数据'"
        :attr="{name: '测试数据'}"
        :styles="styles"
        @click="handler"
      ></qe-label>
    </qe-entity-layer>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QeEntityLayer, QeLabel } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
let layer;
export default {
  components: {
    QeViewer, 
    QeEntityLayer, 
    QeLabel
  },
  data () {
    return {
      markers:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true,
      styles: {
        showBackground: true,
        backgroundColor: "rgba(47, 53, 60, 0.8)",
        verticalOrigin: 1,
        font: "16px 宋体"
      }
    };
  },
  methods: {
    handler(evt) {
      const attr = evt.overlay.attr;
      alert(`该点的名称为--${attr.name}`)
    },
    layerHandler(target){
      layer=target;
    },
    layerFilter(){
      console.log(layer._cache,'====layer._cache')
      console.log(layer._cache['test'],'====layer._cache["test"]')
    }
  }
}
</script>

# Attributes

参数	说明	类型	可选值	默认值
position	位置坐标，`[lng-经度,lat-纬度,alt-高度]`	array	—	—
labelText	文本内容	string	—	—
styles	`label` 可选样式参数	object	参照 label-styles	—
backgroundImg	`backgroundImg` 背景图片可选样式参数	object	参照 backgroundImg-styles	__
backgroundCanvas	`backgroundCanva` 背景框可选样式参数	object	参照 backgroundCanvas-styles
attr	用户自定义属性，支持 JavaScript API 任意数据类型	*	—	—

# label-styles

  // 样式参数(可选)
  {
    "text": "测试文本", // 文本内容
    "font": "30px sans-serif", // CSS 字体设置
    "style": 2, // 指定 label 绘制风格。`FILL: 0, OUTLINE: 1, FILL_AND_OUTLINE: 2`
    "scale": 1, //比例
    "pixelOffset": { "x": 0, "y": 0 }, //偏移像素
    "horizontalOrigin": 0, // 水平对齐方式。CENTER: 0, LEFT: 1, RIGHT: -1
    "verticalOrigin": 0, // 垂直对齐方式。 CENTER: 0, BOTTOM: 1, BASELINE: 2, TOP: -1
    "heightReference": 0, //高度参照，0：位置无参照，位置是绝对的，1：位置固定在地形上 2：位置高度是指地形上方的高度。
    "showBackground": false, //是否显示背景
    "backgroundColor":"black", //背景颜色
    "backgroundPadding": { "x": 0, "y": 0 }, //背景间隙
    "fillColor": QEarth.Color.fromCssColorString('#000'), //文字颜色
    "outlineColor": QEarth.Color.fromCssColorString('#fff'), //边框颜色
    "outlineWidth": 0, //边框大小，
    "scaleByDistance": {
      "near": 0, //最近距离
      "nearValue": 0, //最近距离值
      "far": 1, //最远距离值
      "farValue": 0 //最远距离值
    }, //根据距离设置比例
    "translucencyByDistance": {
      "near": 0, //最近距离
      "nearValue": 0, //最近距离值
      "far": 1, //最远距离值
      "farValue": 0 //最远距离值
    }, //根据距离设置透明度
    "distanceDisplayCondition": {
      "near": 0, //最近距离
      "far": Number.MAX_VALUE //最远距离
    }, //根据距离设置可见
    "disableDepthTestDistance": 0 // 深度检测距离，用于防止剪切地形，设置为零时，将始终应用深度测试。设置为Number.POSITIVE_INFINITY时，永远不会应用深度测试。
  }

# backgroundImg-styles

   // 样式参数(可选)
   {
      "icon": require("../xxx.png"), // 图标资源，可以为 URI, Canvas等
      "size": [32,32], // 图标尺寸
      "scale": 1, //比例
      "pixelOffset": { "x": 0, "y": 0 }, // 偏移像素
      "rotation": 0, //旋转角度
      "heightReference": 0, // 指定 billboard 高度模式。 NONE: 0, CLAMP_TO_GROUND: 1, RELATIVE_TO_GROUND: 2
      "color": "#fff", // 指定 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时，永远不会应用深度测试。
    }

# backgroundcanvas-styles

    {
        "width": 128, // canvas宽度
        "height": 48, // canvas高度
        "radius": 20, // 圆角，只支持数字
        // 文字
        "label": {
          text: '文本文本'，
          font: 'bold 14px sans-serif',
          textAlign: 'center',
          textBaseline: 'middle',
          fillStyle: 'rgba(245,255,250)',
          labelLeft: 64,
          labelTop: 24
        }, // 边框
        "stroke": {
          lineWidth: 5,
          strokeStyle: 'rgba(200,128,128, 1)'
        }, // 填充
        "fill": {
          fillStyle: 'rgba(70,130,180, 0)'
        }
      }

# Events

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

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

← qe-ellipsoid qe-plane →