人口网格

src/component/map/MapComponent.vue

@@ -19,7 +19,7 @@
 
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   import { xiAn } from '@/assets';
-  import { Color, UrlTemplateImageryProvider } from 'cesium';
+  import { Color } from 'cesium';
   import type { GeoJsonFileType } from '@/types/cesium/GeoJsonFileType';
   import config from '@/config/config.json';
   import { useMap } from '@/hooks/map/useMap';
@@ -65,13 +65,6 @@
     CesiumUtilsSingleton.viewToTarget(
       config.defaultPosition as [number, number, number]
     );
-
-    const mvtProvider = new UrlTemplateImageryProvider({
-      url: 'http://localhost:8081/people/{z}/{x}/{y}.mvt',
-    });
-    CesiumUtilsSingleton.getViewer()!.imageryLayers.addImageryProvider(
-      mvtProvider
-    );
   });
 </script>
 

src/component/rain-earthquake/ControlShowDetailComponent.vue

@@ -38,6 +38,14 @@
       useStatusStore().poiLayers.showReservePoint.loading
     "
   />
+
+  <!-- 人口网格 -->
+  <PopulationGridComponent
+    v-if="
+      useStatusStore().appLoadingCompleted &&
+      useStatusStore().poiLayers.showPopulationGrid.loading
+    "
+  />
 </template>
 
 <script lang="ts" setup>
@@ -47,6 +55,7 @@
   import EmergencyShelterComponent from './EmergencyShelterComponent.vue';
   import FireStationComponent from './FireStationComponent.vue';
   import StorePointsComponent from './StorePointsComponent.vue';
+  import PopulationGridComponent from './PopulationGridComponent.vue';
 </script>
 
 <style scoped lang="less"></style>

src/component/rain-earthquake/LoadingGeoserverLayer.vue

@@ -0,0 +1,48 @@
+<!-- 加载geoserver图层 -->
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup>
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import type { ImageryLayer } from 'cesium';
+  import { onMounted } from 'vue';
+
+  const props = defineProps<{
+    id: string;
+    layers: string;
+  }>();
+
+  const emits = defineEmits<{
+    (e: 'provideLayers', layer: ImageryLayer): void;
+  }>();
+
+  onMounted(() => {
+    // 从环境变量获取 GeoServer 地址
+    const geoserverBaseUrl = import.meta.env.VITE_GEOSERVER_BASE_URL;
+    const wmsUrl = `${geoserverBaseUrl}/wms`;
+
+    // 创建 WMS 图层并保存引用
+    const layers = CesiumUtilsSingleton.createLayersBatch([
+      {
+        id: props.id,
+        type: 'wms',
+        provider: 'xian',
+        url: wmsUrl,
+        layers: props.layers,
+        parameters: {
+          service: 'WMS',
+          version: '1.1.0',
+          request: 'GetMap',
+          transparent: true,
+          format: 'image/png',
+          srs: 'EPSG:4326',
+        },
+      },
+    ]);
+
+    emits('provideLayers', layers[0]!);
+  });
+</script>
+
+<style scoped></style>

src/component/rain-earthquake/PopulationGridComponent.vue

@@ -0,0 +1,38 @@
+<template>
+  <!-- 加载人口网格 -->
+  <LoadingGeoserverLayer
+    :id="`people`"
+    :layers="`xian:xian_people`"
+    @provide-layers="provideLayers"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { useStatusStore } from '@/stores/useStatusStore';
+  import type { ImageryLayer } from 'cesium';
+  import { onMounted, watch } from 'vue';
+  import LoadingGeoserverLayer from './LoadingGeoserverLayer.vue';
+
+  // 保存图层引用
+  let populationLayer: ImageryLayer | null = null;
+
+  onMounted(() => {
+    // 监听显示隐藏风险点
+    watch(
+      () => useStatusStore().poiLayers.showPopulationGrid.show,
+      (newValue: boolean) => {
+        populationLayer!.show = newValue;
+      }
+    );
+  });
+
+  /**
+   * 提供图层
+   * @param layer 图层
+   */
+  function provideLayers(layer: ImageryLayer) {
+    populationLayer = layer;
+  }
+</script>
+
+<style scoped></style>