设置初始化基本加载内容

env.d.ts

@@ -18,7 +18,8 @@ interface ImportMetaEnv {
 }
 
 interface ImportMeta {
-  readonly env: ImportMetaEnv
+  readonly env: ImportMetaEnv,
+  readonly glob
 }
 
 // 声明 CSS 模块类型

src/component/map/Map.vue

@@ -3,20 +3,60 @@
 </template>
 
 <script lang="ts" setup>
-import { CesiumUtils } from '@/utils/cesium/CesiumUtils';
-import { Cartesian3, type Viewer } from 'cesium';
+import { Color, type Viewer } from 'cesium';
 import { onMounted } from 'vue';
 import config from '@/config/config.json';
+import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
 
-const cesiumUtils = new CesiumUtils();
-let viewer: Viewer;
+import BaQiiao from '@/assets/json/BaQiao.json';
+import BeiLin from '@/assets/json/BeiLin.json';
+import ChangAn from '@/assets/json/ChangAn.json';
+import GaoLing from '@/assets/json/GaoLing.json';
+import HuYi from '@/assets/json/HuYi.json';
+import LanTian from '@/assets/json/LanTian.json';
+import LianHu from '@/assets/json/LianHu.json';
+import LinTong from '@/assets/json/LinTong.json';
+import WeiYang from '@/assets/json/WeiYang.json';
+import XinCheng from '@/assets/json/XinCheng.json';
+import YanLiang from '@/assets/json/YanLiang.json';
+import YanTa from '@/assets/json/YanTa.json';
+import ZhouZhi from '@/assets/json/ZhouZhi.json';
+
+let viewer: Viewer = CesiumUtilsSingleton.getViewer() as Viewer;
+
+const displayAreas = [BaQiiao, BeiLin, ChangAn, GaoLing, HuYi, LanTian, LianHu, LinTong, WeiYang, XinCheng, YanLiang, YanTa, ZhouZhi]
 
 onMounted(() => {
-    viewer = cesiumUtils.initCesiumViewer({
-        containerId: 'map-container',
+    CesiumUtilsSingleton.initCesiumViewer({
+        containerId: 'map-container'
     })
-
-    cesiumUtils.viewToTarget(viewer, config.defaultPosition as [number, number, number]);
+    CesiumUtilsSingleton.viewToTarget(config.defaultPosition as [number, number, number]);
+    CesiumUtilsSingleton.batchAddGeoJsonLayers(
+        displayAreas.map(area => area.features[0].properties.name),
+        displayAreas,
+        new Array(displayAreas.length).fill(true),
+        displayAreas.map((area, index) => {
+            const areaName = area.features[0].properties.name;
+            return {
+                showName: true,
+                labelStyle: {
+                    labelText: areaName,
+                    center: [area.features[0].properties.center[0], area.features[0].properties.center[1], 0],
+                    labelColor: Color.BLACK,
+                    backgroundColor: Color.WHITE
+                },
+                polygonStyle: {
+                    fill: true,
+                    fillColor: Color.fromBytes(
+                        Math.ceil(Math.random() * 255), 
+                        Math.ceil(Math.random() * 255), 
+                        Math.ceil(Math.random() * 255)
+                    ).withAlpha(0.3),
+                    outline: false
+                }
+            }
+        })
+    );
 })
 
 </script>

src/types/cesium/EntityOptions.ts

@@ -1,4 +1,5 @@
 import type { Cartesian3, Color } from "cesium"
+import { HeightReference, MaterialProperty } from 'cesium'
 
 /**
  * 实体配置通用类型
@@ -15,6 +16,7 @@ export interface EntityOptions {
     pixelSize?: number // 像素大小（默认：8）
     outlineColor?: Color // 轮廓颜色（默认：白色）
     outlineWidth?: number // 轮廓宽度（默认：1）
+    heightReference?: HeightReference // 高度参考（默认：CLAMP_TO_GROUND）
   }
   // 线配置（type='polyline' 时必填）
   polylineOptions?: {
@@ -30,17 +32,19 @@ export interface EntityOptions {
     color?: Color // 颜色（默认：白色）
     verticalOrigin?: number // 垂直对齐方式（默认：CENTER）
     horizontalOrigin?: number // 水平对齐方式（默认：CENTER）
+    heightReference?: HeightReference // 高度参考（默认：CLAMP_TO_GROUND）
   }
   // 面配置（type='polygon' 时必填）
   polygonOptions?: {
     hierarchy: Cartesian3[] | [number, number, number][]  // 面顶点数组
-    color?: Color // 颜色（默认：绿色）
+    // color?: Color // 颜色（默认：绿色）
     outline?: boolean // 是否显示轮廓（默认：true）
     outlineColor?: Color // 轮廓颜色（默认：黑色）
     outlineWidth?: number // 轮廓宽度（默认：1）
     height?: number // 高度（默认：0）
     extrudedHeight?: number //  extrudedHeight 高度（默认：0）
-    perPositionHeight?: boolean // 是否每个顶点高度不同（默认：true）
+    heightReference?: HeightReference // 高度参考（默认：CLAMP_TO_GROUND）
+    material?: MaterialProperty // 材质（默认：Color.WHITE）
   }
   attributes?: Record<string, unknown> // 自定义属性（用于存储额外信息）
 }

src/types/cesium/GeoJsonOptions.ts

@@ -0,0 +1,35 @@
+import type {
+    Cartesian3,
+  Color,
+  DataSource,
+} from "cesium";
+import type { LabelConfig } from "./LabelConfig";
+
+// 数据源：字符串路径/URL | GeoJSON对象
+export type CustomizeGeoJsonDataSource = string | object;
+
+// 唯一配置项接口
+export interface GeoJsonOptions {
+  showName?: boolean;
+  labelStyle?: LabelConfig;
+  polygonStyle?: {
+    fill?: boolean;
+    fillColor?: Color;
+    outline?: boolean;
+    outlineColor?: Color;
+    outlineWidth?: number;
+    center?: Cartesian3 | [number, number, number];
+  };
+  polylineStyle?: {
+    width?: number;
+    material?: Color;
+    clampToGround?: boolean;
+  };
+  pointStyle?: {
+    pixelSize?: number;
+    color?: Color;
+    outlineColor?: Color;
+    outlineWidth?: number;
+  };
+  onComplete?: (dataSource: DataSource) => void;
+}

src/types/cesium/LabelConfig.ts

@@ -0,0 +1,13 @@
+import type { Cartesian3, Color, HorizontalOrigin, VerticalOrigin } from 'cesium'
+
+export interface LabelConfig {
+  labelText?: string // 文本，默认空白
+  labelFont?: string // 字体样式，默认16px "微软雅黑"
+  labelColor?: Color // 标签颜色， 默认白色
+  labelSize?: number // 字体大小，默认16
+  labelOffset?: { x: number; y: number } // 标签偏移，默认0,0
+  horizontalOrigin?: HorizontalOrigin // 水平位置，默认居中
+  verticalOrigin?: VerticalOrigin // 垂直位置，默认居中
+  backgroundColor?: Color // 背景颜色，默认透明
+  center?: Cartesian3 | [number, number, number]
+}