JSAPI Three API Reference
    正在准备搜索索引...

    类 ClusterPoint

    聚合点，它能够汇总一组点要素，统计数据，利用聚合统计得到的数据信息， 结合其他的可视化元素可以展示更丰富的效果。

    const cluster = engine.add(new mapvthree.ClusterPoint({
        cluster: {
            radius: 100,
            maxZoom: 18,
            minZoom: 5
        },
        icon: {
            width: 30,
            height: 30,
            mapSrc: 'path/to/icon.png'
        },
        label: {
            fontSize: 14,
            width: 90,
            height: 40,
            fillStyle: '#ffffff',
            background: 'website_assets/images/speed-panel.png',
        }
    }));
    // 指定聚合源数据
    let dataSource = mapvthree.GeoJSONDataSource.fromGeoJSON(data);
    cluster.dataSource = dataSource;

    // 添加自定义聚合组件
    cluster.addComponent(new mapvthree.Text({
        fontSize: 14,
        fillStyle: '#ffffff',
    }));
    // 设置聚合数据数据源属性
    cluster.clusterDataSource.defineAttribute('text', () => {
        return '自定义聚合组件';
    });

    层级

    • PointGroup
      • ClusterPoint
    索引

    构造函数

    constructor

    属性

    isEventEntitySupported isGeoObject

    方法

    addAttributeRename addComponent clearAttributeRename dispose removeAttributeRename removeComponent

    访问器

    clusterData clusterDataSource dataSource minUpdateInterval needsUpdate

    构造函数

    • 构造函数

      参数

      • parameters: {
            cluster?: { maxZoom?: number; minZoom?: number; radius?: number };
            icon?: { height?: number; mapSrc?: string; width?: number };
            label?: { fillStyle?: string; flat?: boolean; fontSize?: number };
        } = {}

        传入参数对象

        • 可选cluster?: { maxZoom?: number; minZoom?: number; radius?: number }

          聚合配置

          • 可选maxZoom?: number

            生成聚合数据的最大缩放级别, 默认18

          • 可选minZoom?: number

            生成聚合数据的最小缩放级别, 默认5

          • 可选radius?: number

            聚合半径, 单位px, 默认50px

        • 可选icon?: { height?: number; mapSrc?: string; width?: number }

          图标配置

          • 可选height?: number

            图标高度, 默认30px

          • 可选mapSrc?: string

            图标图片地址

          • 可选width?: number

            图标宽度, 默认30px

        • 可选label?: { fillStyle?: string; flat?: boolean; fontSize?: number }

          标签配置

          • 可选fillStyle?: string

            文字颜色, 默认#ccc

          • 可选flat?: boolean

            是否平面化显示, 默认false

          • 可选fontSize?: number

            文字大小, 默认16px

      返回 ClusterPoint

    属性

    isEventEntitySupported: boolean = true

    是否支持返回的事件参数中携带entity实体数据

    isGeoObject: true

    类型为GeoObject的标识

    方法

    • 添加属性重命名

      参数

      • key: string

        原始属性名，该组件的属性名

      • value: string

        重命名后的属性名，数据源的属性名

      返回 void

    • 添加GeoObject类型的部件

      参数

      • object: GeoObject

        添加的对象

      返回 GeoObject

      添加的对象

      const icon = new Icon({
          width: 30,
          height: 30,
          mapSrc: 'marker.png'
      });
      pointGroup.addComponent(icon);

    • 清空属性重命名

      返回 void

    • 销毁object上的geometry和material实例，释放资源, 调用engine.remove(object)会自动销毁资源，不需要手动调用

      返回 void

    • 移除属性重命名

      参数

      • key: string

        原始属性名

      返回 void

    • 移除部件

      参数

      • object: GeoObject

        要移除的地理对象

      返回 void

      const icon = new Icon();
      pointGroup.addComponent(icon);
      // ... 其他操作 ...
      pointGroup.removeComponent(icon); // 移除之前添加的图标组件

    访问器

    • get clusterData(): any[]

      当前聚合后的数据

      返回 any[]

      const data = clusterPoint.clusterData;
      console.log('当前聚合点数量:', data.length);

      [
          // 非聚合数据
          {
              type: 'Feature',
              geometry: {
                  coordinates: [119, 36],
              },
              properties: {
                  count: 9,
              }
          },
          // 聚合数据
          {
              type: 'Feature',
              geometry: {
                  coordinates: [120, 36],
              },
              properties: {
                  cluster: true, // 是否聚合
                  cluster_id: 1, // 聚合数据id
                  point_count: 10, // 聚合数据量
              }
          },
      ]
    • get clusterDataSource(): GeoJSONDataSource

      cluster聚合点的数据源, 聚合部件的子数据源

      返回 GeoJSONDataSource

      const clusterDataSource = clusterPoint.clusterDataSource;
      clusterDataSource.defineAttribute('text');
    • get dataSource(): DataSource

      object连接的数据源[[DataSource]]类

      返回 DataSource

    • set dataSource(dataSource: DataSource): void

      设置object的数据源

      参数

      • dataSource: DataSource

        数据源

      返回 void

    • get minUpdateInterval(): number

      更新最短的时间间隔, 单位ms, 默认300ms

      返回 number

    • set minUpdateInterval(value: number): void

      更新最短的时间间隔, 最小为16ms

      参数

      • value: number

      返回 void

    • get needsUpdate(): boolean

      是否需要更新

      返回 boolean

    • set needsUpdate(value: boolean): void

      设置object是否在下一帧更新

      参数

      • value: boolean

        设置为true，则下一帧渲染前更新该object

      返回 void

    显示设置

    成员可见性

    目录

    构造函数
    属性
    方法
    访问器