feat: 点聚合测试

罗广辉

2025-03-27 8e1c3c8612f261f632ad76d330303c251aeb001a

feat: 点聚合测试

 src/assets/svg/user.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681105122900" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2621" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" p-id="2622"></path></svg>

 src/views/Home/Home.vue

@@ -4,26 +4,19 @@
    <HomeRight></HomeRight>
</template>

<script>
<script setup>
import HomeRight from './components/HomeRight/HomeRight.vue';
import HomeLeft from '@/views/Home/components/HomeLeft/HomeLeft.vue';
import { getAggregation } from '@/views/Home/aggregation';

export default {
  components: {
    HomeLeft,
    HomeRight,
  },
  name: 'index',
  provide() {
    return {
      index: this,
    };
  },
  computed: {},
  props: [],
  methods: {},
  mounted() {},
};
onMounted(() => {
  nextTick(() => {
    getAggregation()
  })
})



</script>
<style scoped lang="scss">
</style>

 src/views/Home/aggregation.js

New file
@@ -0,0 +1,54 @@
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);
};