修改行政区划展示方式

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "basic_template_not_login_front",
+  "name": "xian_vue_new",
   "private": true,
   "version": "0.0.0",
   "type": "module",

src/component/map/AdministrativeDivision.vue

@@ -0,0 +1,73 @@
+<!-- 加载行政区划 -->
+<template>
+
+</template>
+
+<script lang="ts" setup>
+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';
+import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+import { Color } from 'cesium';
+import { onMounted } from 'vue';
+
+const areas = [BaQiiao, BeiLin, ChangAn, GaoLing, HuYi, LanTian, LianHu, LinTong, WeiYang, XinCheng, YanLiang, YanTa, ZhouZhi]
+const areasId = ['baqiao', 'beilin', 'changan', 'gaoling', 'huyi', 'lantian', 'lianhu', 'lintong', 'weiyang', 'xincheng', 'yanliang', 'yanta', 'zhouzhi'];
+const areasColor = [
+            new Color(255 / 255, 153 / 255, 0 / 255),
+            new Color(255 / 255, 51 / 255, 102 / 255),
+            new Color(0 / 255, 178 / 255, 255 / 255),
+            new Color(102 / 255, 255 / 255, 102 / 255),
+            new Color(204 / 255, 102 / 255, 255 / 255),
+            new Color(255 / 255, 204 / 255, 0 / 255),
+            new Color(0 / 255, 204 / 255, 153 / 255),
+            new Color(255 / 255, 102 / 255, 102 / 255),
+            new Color(102 / 255, 153 / 255, 255 / 255),
+            new Color(255 / 255, 178 / 255, 102 / 255),
+            new Color(153 / 255, 255 / 255, 204 / 255),
+            new Color(255 / 255, 153 / 255, 204 / 255),
+            new Color(190 / 255, 255 / 255, 232 / 255)
+        ]
+const areaTransparency = 0.3;
+const labelTransparency = 0.7;
+
+onMounted(() => {
+    CesiumUtilsSingleton.batchAddGeoJsonLayers(
+        areasId,
+        areas,
+        new Array(areas.length).fill(true),
+        areas.map((area, index) => {
+            const areaName = area.features[0].properties.name;
+            console.log(areaName);
+            return {
+                showName: true,
+                default: true,
+                labelStyle: {
+                    labelText: areaName,
+                    center: [area.features[0].properties.center[0], area.features[0].properties.center[1], 0],
+                    labelColor: Color.BLACK,
+                    backgroundColor: areasColor[index].withAlpha(labelTransparency)
+                },
+                polygonStyle: {
+                    fill: true,
+                    fillColor: areasColor[index].withAlpha(areaTransparency),
+                    outline: false
+                }
+            }
+        })
+    );
+})
+
+</script>
+
+<style scoped></style>

src/component/map/Map.vue

@@ -1,63 +1,25 @@
 <template>
     <div class="map_container" id="map-container"></div>
+
+    <!-- 行政区划 -->
+    <AdministrativeDivision v-if="viewerLoadingCompleted"/>
 </template>
 
 <script lang="ts" setup>
-import { Color, type Viewer } from 'cesium';
+import { onMounted, ref } from 'vue';
-import { onMounted } from 'vue';
 import config from '@/config/config.json';
 import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+import AdministrativeDivision from './AdministrativeDivision.vue';
 
-import BaQiiao from '@/assets/json/BaQiao.json';
+// 指示器加载完成
-import BeiLin from '@/assets/json/BeiLin.json';
+let viewerLoadingCompleted = ref(false);
-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(() => {
     CesiumUtilsSingleton.initCesiumViewer({
         containerId: 'map-container'
     })
+    viewerLoadingCompleted.value = true;
     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,
-                default: 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>