# qe-marker

这个组件主要用于三维绘制 marker 要素。

# 实例

隐藏代码

<template>

  <div style="height: 450px;">
    <div  style="height: 8%;">
      <button @click="createMarkers" style="height: 30px;">
      点位测试
      </button>
      <button @click="filterMarkers" style="height: 30px;">
      查询
      </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-marker
          v-for="(item, index) in markers"
          :key="'marker' + index"
          :id="'marker' + index"
          :position="item.ps"
          :billboard="item.bd"
          :label="item.lb"
          :attr="item.attr"
          @click="markerEvents"
        ></qe-marker>
      </qe-entity-layer>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QeEntityLayer, QeMarker } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
let layer;
export default {
  components: {
    QeViewer, 
    QeEntityLayer, 
    QeMarker
  },
  data () {
    return {
      markers:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true
    };
  },
  methods: {
    createMarkers() {
      for (let i = 0; i < 100; i++) {
        const ps = [
          Math.random() * 0.01 + 118.78600228,
          Math.random() * 0.01 + 31.9135434,
          0
        ];
        this.markers.push({
          ps,
          bd: {
            icon: require("../../src/assets/dataImages/locate.png"),
            pixelOffset:{x:0,y:0}
          },
          lb: {
            text: `测试${i}`,
            direction: "right"
          },
          attr: {
            ps,
            text: `测试${i}`
          }
        });
      }

        let [markerState,markerY]=[0,0]
        const markersJump=()=>{
          if(markerState===0){
            if(markerY<10){
              this.markers.forEach(marker=>{marker.bd.pixelOffset.y+=1})
              markerY++
            }
            else{
              markerState=1
            }
          }
          else{
            if(markerY>0){
              this.markers.forEach(marker=>{marker.bd.pixelOffset.y-=1})
              markerY--
            }
            else{
              markerState=0
            }
          }
          requestAnimationFrame(markersJump)
        }
        requestAnimationFrame(markersJump)
    },
    markerEvents(evt) {
      const attr = evt.overlay.attr;
      alert(`${attr.text}的坐标为--${attr.ps}`)
    },
    layerHandler(target){
      layer=target;
    },
    filterMarkers(){
      console.log(layer._cache,'====layer._cache')
      console.log(layer._cache['marker0'],'====layer._cache["marker0"]')
    }
  }
}
</script>

# Attributes

参数	说明	类型	可选值	默认值
position	标记点坐标，`[lng-经度,lat-纬度,alt-高度]`	array	—	—
billboard	图标可选属性设置	object	参照 billboardOptions	—
label	文字可选属性设置	object	参照 labelOptions	—
attr	用户自定义属性，支持 JavaScript API 任意数据类型	*	—	—

# billboard-options

  // 样式参数(可选)
    {
      "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时，永远不会应用深度测试。
    }

# label-options

  // 样式参数(可选)
    {
      "text": "测试文本", // 文本内容
      "style": 2, // 指定 label 绘制风格。`FILL: 0, OUTLINE: 1, FILL_AND_OUTLINE: 2`
      "direction": "right", //相对于图标的方位,可选值： 'top' 'right' 'bottom' 'left' 'center'
      "offset": [0, 0]  // 相对于 `direction` 的位置偏移
      "font": "30px sans-serif", // CSS 字体设置
      "scale": 1, //比例
      "pixelOffset": { "x": 0, "y": 0 }, //偏移像素
      "heightReference": 0, //高度参照，0：位置无参照，位置是绝对的，1：位置固定在地形上 2：位置高度是指地形上方的高度。
      "showBackground": false, //是否显示背景
      "backgroundColor":"black", //背景颜色
      "backgroundPadding": { "x": 0, "y": 0 }, //背景间隙
      "fillColor": "white", //文字颜色
      "outlineColor": "black", //边框颜色
      "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时，永远不会应用深度测试。
    }

# Events

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

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

← qe-cluster-layer qe-animation →