qe-div-icon

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

---

实例

offset

隐藏代码

<template>

  <div style="height: 450px;">
    <div  style="height: 8%;">
      <button @click="createMarkers" style="height: 30px;">
      点位测试
      </button>
      <button @click="filterIcons" style="height: 30px;">
      filterIcons
      </button>
      offset<el-input-number v-model="offset" :min="0" :step="10" :precision="0" size="mini" style="margin:0">          
        </el-input-number>
    </div>
    <qe-viewer
      style="height: 90%;"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
      <qe-imagery-layer
        :imagery-provider-type="'arcgis'"
        :imagery-options="{
          url:
            'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
        }"
      ></qe-imagery-layer>
      <qe-html-layer @ready="layerHandler">
        <qe-div-icon 
          v-for="(item, index) in divIcons"
          :key="'div-icon' + index"
          :id="'div-icon' + index"
          :position="item.ps"
          :attr="item.attr"
          :offset="[offset,offset]"
          @ready="addClass"
          @click="markerEvents"
          >
          <div class="qe-animation-point" :style="{'color':item.color}">
            <p></p>
          </div>
        </qe-div-icon>
      </qe-html-layer>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QeHtmlLayer, QeDivIcon,QeImageryLayer } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
let layer;
export default {
  components: {
    QeViewer, 
    QeHtmlLayer, 
    QeDivIcon,
    QeImageryLayer
  },
  data () {
    return {
      divIcons:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true,
      offset:0
    };
  },
  methods: {
    createMarkers() {
      for (let i = 0; i < 100; i++) {
        const ps = [
          Math.random() * 0.01 + 118.78600228,
          Math.random() * 0.01 + 31.9135434,
          0
        ];
        const color = this.createColor();
        this.divIcons.push({
          ps,
          color,
          attr: { ps, color }
        });
      }
    },
    createColor(){
			const r = Math.floor(Math.random()*256);
			const g = Math.floor(Math.random()*256);
			const b = Math.floor(Math.random()*256);
			const color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
			return color;
		},
    markerEvents(evt) {
      const attr = evt.overlay.attr;
      alert(`当前点的颜色为--${attr.color}`)
    },
    addClass(icon){
      icon.setStyle({
        className:'test'
      })  
      console.log('removeClass')
      icon.removeClass('test')
    },
    layerHandler(target){
      layer=target;
    },
    filterIcons(){
      console.log(layer._cache,'====layer._cache')
      console.log(layer._cache['test'],'====layer._cache["marker0"]')
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
position	标记点坐标，[lng-经度,lat-纬度,alt-高度]	array	—	—
attr	用户自定义属性，支持 JavaScript API 任意数据类型	*	—	—

Events

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

---

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