Class: ClusterLayer

ClusterLayer

聚散图层,用于聚散展示三维图元数据。

function _generatePosition (num, space) {
  const positions = []
  for (let i = 0; i < num; i++) {
    const lng = 118.62964491 + Math.random() * space
    const lat = 32.08659388 + Math.random() * space
    positions.push(new Position(lng, lat, 60.72400439))
  }
  return positions
}
const layer = new ClusterLayer({
    style: 'clustering'
  }).addToViewer(viewer)
const positions = _generatePosition(2000, 0.005)
positions.forEach((item, index) => {
  const marker = new Marker({
    position: item,
    billboard: {
      icon: require('../../assets/dataImages/locate.png')
    },
    label: {
      text: `测试点位${index}`,
      direction: 'right'
    }
  }).addToLayer(layer)
  marker.on(MouseEventType.CLICK, evt => {
    console.log(evt)
  })
})
viewer.flyTo(layer)

new ClusterLayer(options, tickCallback)

layer/ClusterLayer.js, line 74
Name Type Description
options LayerOptions

图层可选参数

Name Type Default Description
size Number 18 optional

聚合图形的基础尺寸
pixelRange Number 40 optional

聚合的像素范围
fontSize Number 14 optional

聚合图形上文字字体大小
fontColor String Color.BLACK optional

聚合图形上字体颜色
style String 'clustering' optional

聚合图形样式，circle--圆形、 clustering--聚合图形、custom--自定义聚散图标
clusterCount Array [20, 100,1000] optional

当style='custom'才起作用，不同聚散数量对应不同的聚散图标， 如：聚散数量<= 20的聚散点、<= 100 && >20的聚散点、<=1000 && > 100的聚散点、> 1000聚散点
clusterBillboards Array

当style='custom'才起作用，自定义clusterCount对应期间的聚散图标参数, 暂支持四个范围,四个范围对应四种图标
gradient Object

聚合图形的幅度颜色设置
zoomScale number 2 optional

点击聚散点，地图缩放的视角比例
enableZoom Boolean true optional

点击聚散点，是否启用缩放动画
overlays Array.<(Entity|Primitive)>

想添加到图层上的覆盖物数组
tickCallback function

点击聚散点的回调函数，返回值为：entities--entity数组， overlays--覆盖物数组，layer--当前图层对象
Example
// 聚合图形的幅度颜色设置示例
gradient: {
      0.0001: Color.DEEPSKYBLUE,
      0.001: Color.GREEN,
      0.01: Color.ORANGE,
      0.1: Color.RED
    }
// 自定义聚散图标
{
      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
        }
      ]
}

Extends

  • Layer

Classes

ClusterLayer

Members

enableZoom

设置/获取点击聚散点，是否启用缩放动画

Methods

clear()

layer/ClusterLayer.js, line 437

清空图层