From 8e1c3c8612f261f632ad76d330303c251aeb001a Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 27 Mar 2025 22:01:12 +0800
Subject: [PATCH] feat: 点聚合测试
---
src/views/Home/aggregation.js | 54 +++++++++++++++++++++++++++
src/views/Home/Home.vue | 27 +++++--------
src/assets/svg/user.svg | 1
3 files changed, 65 insertions(+), 17 deletions(-)
diff --git a/src/assets/svg/user.svg b/src/assets/svg/user.svg
new file mode 100644
index 0000000..4d8de46
--- /dev/null
+++ b/src/assets/svg/user.svg
@@ -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>
\ No newline at end of file
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 1579e5d..8c17d8f 100644
--- a/src/views/Home/Home.vue
+++ b/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>
diff --git a/src/views/Home/aggregation.js b/src/views/Home/aggregation.js
new file mode 100644
index 0000000..55ca0e9
--- /dev/null
+++ b/src/views/Home/aggregation.js
@@ -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);
+};
--
Gitblit v1.9.3