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 | 136 +++++++++++++++++++++++++++++++--------------
1 files changed, 93 insertions(+), 43 deletions(-)
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 6697a5f..c7e3e76 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -1,49 +1,99 @@
<template>
- <Header></Header>
- <div class="warp">
- <HomeLeft></HomeLeft>
- <!-- <div>中间搜索</div> -->
- <HomeRight></HomeRight>
- </div>
+ <HomeLeft></HomeLeft>
+ <!-- <div>中间搜索</div> -->
+ <HomeRight></HomeRight>
+ <SearchBox />
</template>
-<script>
-import index from '@/mixins';
-import { mapGetters } from 'vuex';
-import Header from '../Home/components/Header.vue';
-import HomeLeft from '../Home/components/HomeLeft/Index.vue'
-import HomeRight from '../Home/components/HomeRight/Index.vue'
+<script setup>
+import HomeRight from './components/HomeRight/HomeRight.vue';
+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';
-export default {
- mixins: [index],
- components: {
- Header,
- HomeLeft,
- HomeRight,
- },
- name: 'index',
- provide() {
- return {
- index: this,
- };
- },
- computed: {},
- props: [],
- methods: {
-
- },
+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();
+ });
};
-</script>
-<style scoped lang="scss">
-.page-home {
- height: 100vh;
- width: 100%;
- background-size: 100% 100%;
- background-repeat: no-repeat;
- font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
- .warp {
- display: flex;
- justify-content: space-between;
+
+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;
+ }
}
-}
-</style>
+};
+
+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(() => {
+ viewer = window.$viewer;
+ init();
+ });
+});
+</script>
--
Gitblit v1.9.3