人口网格

.env.development

@@ -1,5 +1,10 @@
 NEW_FILE_CODE
 
+# 后端地址
 VITE_BACKEND_BASE_URL=http://localhost:8081
 
+# 启动端口
 START_PORT=81
+
+# geoserver地址
+VITE_GEOSERVER_BASE_URL=http://47.92.216.173:4019/geoserver/xian

.env.production

@@ -1,4 +1,10 @@
 NEW_FILE_CODE
+
+# 后端地址
 VITE_BACKEND_BASE_URL=http://localhost:8080
 
+# 启动端口
 START_PORT=80
+
+# geoserver地址
+VITE_GEOSERVER_BASE_URL=http://10.22.245.246/geoserver/xian

env.d.ts

@@ -1,60 +1,61 @@
-NEW_FILE_CODE
+NEW_FILE_CODE;
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }
 
 // 声明环境变量类型
 interface ImportMetaEnv {
-  readonly VITE_BACKEND_BASE_URL: string
-  readonly START_PORT: number
-  readonly MODE: string
-  readonly DEV: boolean
-  readonly PROD: boolean
-  readonly SSR: boolean
+  readonly VITE_BACKEND_BASE_URL: string;
+  readonly START_PORT: number;
+  readonly VITE_GEOSERVER_BASE_URL: string;
+  readonly MODE: string;
+  readonly DEV: boolean;
+  readonly PROD: boolean;
+  readonly SSR: boolean;
 }
 
 interface ImportMeta {
-  readonly env: ImportMetaEnv,
-  readonly glob
+  readonly env: ImportMetaEnv;
+  readonly glob;
 }
 
 // 声明 CSS 模块类型
 declare module '*.css' {
-  const content: Record<string, string>
-  export default content
+  const content: Record<string, string>;
+  export default content;
 }
 
 // 声明静态资源类型
 declare module '*.svg' {
-  const content: string
-  export default content
+  const content: string;
+  export default content;
 }
 
 declare module '*.png' {
-  const content: string
-  export default content
+  const content: string;
+  export default content;
 }
 
 declare module '*.jpg' {
-  const content: string
-  export default content
+  const content: string;
+  export default content;
 }
 
 declare module '*.jpeg' {
-  const content: string
-  export default content
+  const content: string;
+  export default content;
 }
 
 declare module '*.gif' {
-  const content: string
-  export default content
+  const content: string;
+  export default content;
 }
 
 declare module '*.webp' {
-  const content: string
-  export default content
+  const content: string;
+  export default content;
 }

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>

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -225,9 +225,7 @@ export const useEarthquakeDisasterChain = () => {
         name: '显示人口网格',
         statusStore: statusStore.poiLayers,
         statusKey: 'showPopulationGrid' as const,
-        callback: (status: unknown) => {
-          console.log('显示人口网格', status);
-        },
+        callback: layerControl.clickPopulationGrid,
       },
       {
         name: '显示管网系统',

src/hooks/map/useMap.ts

@@ -80,6 +80,7 @@ export const useMap = () => {
           useLoadingInformationStore().resetStatue();
         }
       } else {
+        console.log(pickedObject);
         // 重置状态
         useLoadingInformationStore().resetStatue();
       }

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -255,9 +255,7 @@ export const useRainDisasterChain = () => {
         name: '显示人口网格',
         statusStore: statusStore.poiLayers,
         statusKey: 'showPopulationGrid' as const,
-        callback: (status: unknown) => {
-          console.log('显示人口网格', status);
-        },
+        callback: layerControl.clickPopulationGrid,
       },
       {
         name: '显示管网系统',

src/hooks/useLayerControl.ts

@@ -53,6 +53,14 @@ export const useLayerControl = () => {
     useStatusStore().poiLayers.showReservePoint.loading = true;
   };
 
+  /**
+   * 点击显示人口网格
+   */
+  const clickPopulationGrid = () => {
+    // 加载状态为true
+    useStatusStore().poiLayers.showPopulationGrid.loading = true;
+  };
+
   return {
     clickHiddenDangerPoint,
     clickHospital,
@@ -60,5 +68,6 @@ export const useLayerControl = () => {
     clickEmergencyShelter,
     clickFireStation,
     clickStorePoints,
+    clickPopulationGrid,
   };
 };

src/types/cesium/LayerConfig.ts

@@ -27,5 +27,5 @@ export interface LayerConfig {
   credit?: string;
 
   /** 图层参数 */
-  parameters?: Record<string, string>;
+  parameters?: Record<string, unknown>;
 }