# qe-cluster-layer

聚散图层组件，可以用来聚散展示三维图元，且支持自定义聚散图标。

# 实例

隐藏代码

<template>

  <div style="height: 450px;">
    <qe-viewer
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
      @ready="getViewer"
    >
      <qe-cluster-layer :name="'测试聚散图层'" :cluster-style="'clustering'" @clusterTick="clusterTick">
        <qe-marker
          v-for="(item, index) in markers"
          :key="'marker' + index"
          :position="item.ps"
          :billboard="item.bd"
          :label="item.lb"
          :attr="item.attr"
          @click="markerEvents"
        />
      </qe-cluster-layer>
    </qe-viewer>
  </div>
</template>

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

export default {
  components: {
    QeViewer, 
    QeClusterLayer, 
    QeMarker
  },
  data () {
    return {
      divIcons:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      markers: []
    };
  },
  created () {
    this.createMarkers()
    setTimeout(()=>{this.createMarkers()},2000)
  },
  methods: {
    getViewer(viewer){
      window.viewer=viewer
    },
    clusterTick(evt) {
      console.log(evt)
    },
    createMarkers () {
      for (let i = 0; i < 200; i++) {
        const ps = [
          Math.random() * 0.005 + 118.78600228,
          Math.random() * 0.005 + 31.9135434,
          0
        ]
        this.markers.push({
          ps,
          bd: {
            icon: require("../../src/assets/dataImages/locate.png")
          },
          lb: {
            text: `测试${i}`,
            direction: 'right'
          },
          attr: {
            ps,
            text: `测试${i}`
          }
        })
      }
    },
    markerEvents (evt) {
      const attr = evt.overlay.attr
      const { _lng, _lat, _alt } = evt.overlay.position
      alert(`当前数据名称为：${attr.text}`)
    }
  }
}
</script>

# Attributes

参数	说明	类型	可选值	默认值
size	聚合图形的基础尺寸	number	—	18
pixelRange	聚合的像素范围	number	—	40
fontSize	聚合图形上文字字体大小	number	—	12
fontColor	聚合图形上字体颜色	string	—	`black`
clusterStyle	聚合图形样式，`circle--圆形`、`clustering--聚合图形`、`custom--自定义聚散图标`	string	—	`clustering`
clusterCount	当`style='custom'`才起作用，不同聚散数量对应不同的聚散图标，如：聚散数量`<= 20`的聚散点、`<= 100 && >20`的聚散点、`<=1000 && > 100`的聚散点、`> 1000`聚散点	array	—	[20, 100,1000]
clusterBillboards	当`style='custom'`才起作用，自定义`clusterCount`对应期间的聚散图标参数,暂支持四个范围,四个范围对应四种图标	array	参照参数说明	—
gradient	聚合图形的幅度颜色设置	object	参照参数说明	有默认值
isAnimation	设置点击聚散点时是否有视图移动的动画	boolean	—	true
id	图层唯一标识 `id`，不设置会自动生成	string	—	—
visible	图层否可见，可以控制图层组里所有图层显示隐藏	boolean	—	true
name	图层名称,如果为空，将不会在图层控制组件中显示	string	—	—
minZoom	图层最小层级，低于最小层级则不显示	Number	—	0
maxZoom	图层最大层级，超过则不显示	Number	—	25
zoomScale	点击聚散点，地图缩放的视角比例	Number	—	2
enableZoom	点击聚散点，是否出现调整视角的动画	boolean	—	true
layerGroupOptions	图层组其他可选参数	object	—	—

# 参数说明

// 自定义聚散图标实例
{
  style: 'custom',
  clusterBillboards: [
    {
      image: require('../../assets/dataImages/cluster1.png'),
      width: 48,
      height: 48
    },
    {
      image: require('../../assets/dataImages/cluster2.png'),
      width: 48,
      height: 48
    },
    {
      image: require('../../assets/dataImages/cluster3.png'),
      width: 64,
      height: 64
    },
    {
      image: require('../../assets/dataImages/cluster3.png'),
      width: 64,
      height: 64
    }
  ]
}

// 聚合图形的幅度默认颜色设置
const gradient = {
  0.0001: '#00BFFF',
  0.001: 'green',
  0.01: 'orange',
  0.1: 'red'
}

# Events

事件的使用请参照上面ClusterLayer 实例

// 可选事件
"ready" // 组件装载后，返回当前实例对象
"clusterTick" // 点击聚散点的回调函数，返回值为：`entities--entity数组`，`overlays--覆盖物数组`，`layer--当前图层对象`

← qe-heatmap-layer qe-marker →