From 1efe9142bf07285dab8ae033506161fac3f26a50 Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Sat, 29 Mar 2025 09:06:03 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/layout/Header.vue | 8
/dev/null | 53 --------
src/views/Home/useAggregation.js | 133 ++++++++++++++++++++++
src/views/Home/Home.vue | 117 -------------------
4 files changed, 139 insertions(+), 172 deletions(-)
diff --git a/src/layout/Header.vue b/src/layout/Header.vue
index a1f5560..822e18f 100644
--- a/src/layout/Header.vue
+++ b/src/layout/Header.vue
@@ -53,12 +53,12 @@
if (!['首页', '任务管理'].includes(name)) return ElMessage.warning('正在开发中');
// 更新 leftList 的 active 状态
leftList.value.forEach(item => {
- item.active = item.router === path;
+ item.active = item.path === path;
});
// 更新 rightList 的 active 状态
rightList.value.forEach(item => {
- item.active = item.router === path;
+ item.active = item.path === path;
});
console.log(path);
// 跳转到指定页面
@@ -69,12 +69,12 @@
// 初始化 leftList 的 active 状态
const currentPath = route.path;
leftList.value.forEach(item => {
- item.active = item.router === currentPath;
+ item.active = item.path === currentPath;
});
// 初始化 rightList 的 active 状态
rightList.value.forEach(item => {
- item.active = item.router === currentPath;
+ item.active = item.path === currentPath;
});
});
</script>
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index f756399..50174fe 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -9,120 +9,7 @@
import HomeRight from './components/HomeRight/HomeRight.vue';
import HomeLeft from '@/views/Home/components/HomeLeft/HomeLeft.vue';
import SearchBox from '@/views/Home/SearchBox.vue';
-import jiangxi from '@/assets/geojson/jiangxi.json';
-import jiangxishi from '@/assets/geojson/jiangxishi.json';
-import zg from '@/assets/geojson/zg.json';
-import * as Cesium from 'cesium';
-import data1 from '@/assets/images/home/homeRight/data1.png';
-import data2 from '@/assets/images/home/homeRight/data2.png';
+import { useAggregation } from '@/views/Home/useAggregation';
-const list = [
- { name: '县', value: [0,48651], gJson: null },
- { name: '市', value: [48651,314863], gJson: jiangxishi },
- { name: '省', value: [314863,1169651], gJson: jiangxi },
- { name: '国', value: [1169651,37962800], gJson: zg },
-];
-let viewer = null;
-const active = ref('');
-const init = () => {
- determineScaling();
- viewer.camera.moveEnd.addEventListener(() => {
- determineScaling();
- });
-};
-
-const determineScaling = () => {
- let height = viewer.camera.positionCartographic.height;
- // 根据高度展示对应的 gJson
- for (let item of list) {
- // if (height < item.value) {
- if (height > item.value[0] && height <= item.value[1]) {
- if (active.value !== item.name) {
- viewer.dataSources.removeAll(true);
- viewer.entities.removeAll();
- active.value = item.name;
- if (item.gJson) {
- aggregation(item);
- }else{
- for (let i = 0; i < 50; i++) {
- viewer.entities.add({
- position: Cesium.Cartesian3.fromDegrees(
- 115.89 + Math.random() * 0.2,
- 28.68 + Math.random() * 0.2
- ),
- label: {
- // 随机整数
- text: Math.floor(Math.random() * 100)+'号机巢',
- font: '14pt monospace',
- fillColor: Cesium.Color.WHITE,
- outlineColor: Cesium.Color.BLACK,
- outlineWidth: 2,
- style: Cesium.LabelStyle.FILL_AND_OUTLINE,
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
- pixelOffset: new Cesium.Cartesian2(0, -9),
- },
- billboard: {
- image: data1,
- width: 24,
- height: 24,
- },
- });
- }
- }
- }
- break;
- }
- }
-};
-
-const aggregation = item => {
- const featuresList = item.gJson.features.map(item => ({
- name: item.properties.name,
- position: item.properties.center,
- }));
- // 遍历特征并添加实体
- featuresList.forEach(feature => {
- if (!feature.position) return;
- const position = Cesium.Cartesian3.fromDegrees(feature.position[0], feature.position[1]);
- viewer.entities.add({
- position: position,
- label: {
- // 随机整数
- text: feature.name + Math.floor(Math.random() * 100),
- font: '14pt monospace',
- fillColor: Cesium.Color.WHITE,
- outlineColor: Cesium.Color.BLACK,
- outlineWidth: 2,
- style: Cesium.LabelStyle.FILL_AND_OUTLINE,
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
- pixelOffset: new Cesium.Cartesian2(0, -9),
- },
- billboard: {
- image: data2,
- width: 24,
- height: 24,
- },
- });
- });
- // 加载新的 GeoJSON 数据
- Cesium.GeoJsonDataSource.load(item.gJson).then(dataSource => {
- viewer.dataSources.add(dataSource);
- item.dataSource = dataSource; // 保存数据源以便后续删除
- // 获取数据源中的实体
- const entities = dataSource.entities.values;
- entities.forEach(entity => {
- entity.polygon.material = new Cesium.ColorMaterialProperty(
- Cesium.Color.YELLOW.withAlpha(0) // 透明填充
- );
- entity.polygon.outline = new Cesium.ConstantProperty(true); // 显示边框
- entity.polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.YELLOW); // 黑色边框
- });
- });
-};
-onMounted(() => {
- nextTick(() => {
- viewer = window.$viewer;
- init();
- });
-});
+useAggregation()
</script>
diff --git a/src/views/Home/aggregation.js b/src/views/Home/aggregation.js
deleted file mode 100644
index 217ed9d..0000000
--- a/src/views/Home/aggregation.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as Cesium from 'cesium';
-import data2 from '@/assets/images/home/homeRight/data2.png';
-import data1 from '@/assets/images/home/homeRight/data1.png';
-
-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);
-};
diff --git a/src/views/Home/useAggregation.js b/src/views/Home/useAggregation.js
new file mode 100644
index 0000000..32756bd
--- /dev/null
+++ b/src/views/Home/useAggregation.js
@@ -0,0 +1,133 @@
+import * as Cesium from 'cesium';
+import data2 from '@/assets/images/home/homeRight/data2.png';
+import data1 from '@/assets/images/home/homeRight/data1.png';
+import jiangxishi from '@/assets/geojson/jiangxishi.json';
+import jiangxi from '@/assets/geojson/jiangxi.json';
+import zg from '@/assets/geojson/zg.json';
+
+/**
+ * 机巢聚合功能
+ */
+export const useAggregation = () => {
+ let viewer = null;
+ const scalingJudgment = [
+ { name: '县', value: [0, 48651], gJson: null },
+ { name: '市', value: [48651, 314863], gJson: jiangxishi },
+ { name: '省', value: [314863, 1169651], gJson: jiangxi },
+ { name: '国', value: [1169651, 37962800], gJson: zg },
+ ];
+ const active = ref('');
+ const init = () => {
+ determineScaling();
+ viewer.camera.moveEnd.addEventListener(() => {
+ determineScaling();
+ });
+ };
+
+ const removeFun = () => {
+ viewer.dataSources.removeAll(true);
+ viewer.entities.removeAll();
+ };
+
+ const determineScaling = () => {
+ let height = viewer.camera.positionCartographic.height;
+ // 根据高度展示对应的 gJson
+ for (let item of scalingJudgment) {
+ if (height > item.value[0] && height <= item.value[1]) {
+ if (active.value !== item.name) {
+ removeFun();
+ active.value = item.name;
+ item.gJson ? aggregation(item) : splashed();
+ }
+ break;
+ }
+ }
+ };
+
+ //散点机巢
+ function splashed() {
+ for (let i = 0; i < 50; i++) {
+ viewer.entities.add({
+ position: Cesium.Cartesian3.fromDegrees(
+ 115.89 + Math.random() * 0.2,
+ 28.68 + Math.random() * 0.2
+ ),
+ label: {
+ // 随机整数
+ text: Math.floor(Math.random() * 100) + '号机巢',
+ font: '14pt monospace',
+ fillColor: Cesium.Color.WHITE,
+ outlineColor: Cesium.Color.BLACK,
+ outlineWidth: 2,
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ pixelOffset: new Cesium.Cartesian2(0, -9),
+ },
+ billboard: {
+ image: new Cesium.ConstantProperty(data1),
+ width: 24,
+ height: 24,
+ },
+ });
+ }
+ }
+
+ // 聚合机巢
+ const aggregation = item => {
+ const featuresList = item.gJson.features.map(item => ({
+ name: item.properties.name,
+ position: item.properties.center,
+ }));
+ // 遍历特征并添加实体
+ featuresList.forEach(feature => {
+ if (!feature.position) return;
+ const position = Cesium.Cartesian3.fromDegrees(feature.position[0], feature.position[1]);
+ viewer.entities.add({
+ position: position,
+ label: {
+ // 随机整数
+ text: feature.name + Math.floor(Math.random() * 100),
+ font: '14pt monospace',
+ fillColor: Cesium.Color.WHITE,
+ outlineColor: Cesium.Color.BLACK,
+ outlineWidth: 2,
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ pixelOffset: new Cesium.Cartesian2(0, -9),
+ },
+ billboard: {
+ image: new Cesium.ConstantProperty(data2),
+ width: 24,
+ height: 24,
+ },
+ });
+ });
+ // 加载新的 GeoJSON 数据
+ Cesium.GeoJsonDataSource.load(item.gJson).then(dataSource => {
+ viewer.dataSources.add(dataSource);
+ item.dataSource = dataSource; // 保存数据源以便后续删除
+ // 获取数据源中的实体
+ const entities = dataSource.entities.values;
+ entities.forEach(entity => {
+ entity.polygon.material = new Cesium.ColorMaterialProperty(
+ Cesium.Color.YELLOW.withAlpha(0) // 透明填充
+ );
+ entity.polygon.outline = new Cesium.ConstantProperty(true); // 显示边框
+ entity.polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.YELLOW); // 黑色边框
+ });
+ });
+ };
+
+ onUnmounted(() => {
+ console.log('xiezai');
+ removeFun();
+ });
+
+ onMounted(() => {
+ console.log('触发');
+ nextTick(() => {
+ viewer = window.$viewer;
+ init();
+ });
+ });
+};
--
Gitblit v1.9.3