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);
|
};
|
