From c2b6ebe136ff420bf3fda48896b49723b53d67af Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Fri, 28 Mar 2025 17:31:40 +0800
Subject: [PATCH] feat: 聚合demo
---
src/views/Home/Home.vue | 84 ++++++++++++++++++++++++++++++++++++++++-
1 files changed, 81 insertions(+), 3 deletions(-)
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index efd6de6..c7e3e76 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -2,7 +2,6 @@
<HomeLeft></HomeLeft>
<!-- <div>中间搜索</div> -->
<HomeRight></HomeRight>
-
<SearchBox />
</template>
@@ -11,11 +10,90 @@
import HomeLeft from '@/views/Home/components/HomeLeft/HomeLeft.vue';
import { getAggregation } from '@/views/Home/aggregation';
import SearchBox from '@/views/Home/SearchBox.vue';
+import jiangxi from '@/assets/geojson/jiangxi.json';
+import nanchang from '@/assets/geojson/nanchang.json';
+import jiangxishi from '@/assets/geojson/jiangxishi.json';
+import zg from '@/assets/geojson/zg.json';
+import * as Cesium from 'cesium';
+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;
+ console.log('缩放结束，高度为:', 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);
+ }
+ }
+ 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),
+ },
+ });
+ });
+ // 加载新的 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 = true; // 显示边框
+ entity.polygon.outlineColor = Cesium.Color.YELLOW; // 黑色边框
+ });
+ });
+};
onMounted(() => {
nextTick(() => {
- getAggregation();
+ viewer = window.$viewer;
+ init();
});
});
</script>
-<style scoped lang="scss"></style>
--
Gitblit v1.9.3