import * as Cesium from 'cesium';
import data2 from '@/assets/images/home/homeRight/data2.png';
import data1 from '@/assets/images/home/homeRight/data1.png';
import { win } from 'codemirror/src/util/dom';

export const getAggregation = () => {
  // 1️⃣ 创建数据源
  const dataSource = new Cesium.CustomDataSource('clusteredData');
  // 2️⃣ 启用聚合
  dataSource.clustering.enabled = true;
  dataSource.clustering.pixelRange = 50; // 多少像素范围内的点进行聚合
  dataSource.clustering.minimumClusterSize = 3; // 至少 3 个点才聚合

  // 3️⃣ 监听聚合事件
  dataSource.clustering.clusterEvent.addEventListener((clusteredEntities, cluster) => {
    if (clusteredEntities.length > 1) {
      // 这是聚合点
      cluster.label.show = true;
      cluster.label.text = clusteredEntities.length.toString(); // 显示聚合点数量
      cluster.billboard.show = true;
      cluster.billboard.image = data2; // 自定义聚合图标
      cluster.billboard.scale = 1.5;
    } else {
      // 这是单个点
      cluster.label.show = false;
      cluster.billboard.show = false;
    }
  });

  // 4️⃣ 添加点数据
  for (let i = 0; i < 20; i++) {
    dataSource.entities.add({
      position: Cesium.Cartesian3.fromDegrees(
        115.89 + Math.random() * 0.1,
        28.68 + Math.random() * 0.1
      ),
      billboard: {
        image: data1,
        width: 24,
        height: 24,
      },
    });
  }
  const viewer = window.$viewer;
  // 5️⃣ 加载数据源
  viewer.dataSources.add(dataSource);

  viewer.screenSpaceEventHandler.setInputAction(movement => {
    const pickedObject = viewer.scene.pick(movement.position);
    if (pickedObject && pickedObject.id) {
      console.log('点击聚合点，包含以下数据：', pickedObject.id);
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};