Ver Fonte

添加自动获取最新geoserver图层的逻辑

yangtaodemon há 1 mês atrás
pai
commit
fa815a93c6
1 ficheiros alterados com 94 adições e 15 exclusões
  1. 94 15
      src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

+ 94 - 15
src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

@@ -246,6 +246,16 @@ export default {
       dataMap:{},
       fluxDataMap: {}, // 存储通量Cd数据
       fluxDataLoaded: false, // 通量Cd数据是否已加载
+      geoserverConfig: {
+          baseUrl: 'http://localhost:8080/geoserver',
+          workspace: 'soilgd',
+          wmsService: 'WMS',
+          version: '1.1.0'
+        },
+      currentLayerInfo: null, // 当前图层信息
+      layerLoading: false, // 图层加载状态
+      layerInfoFetched: false, // 新增:标记是否已获取图层信息
+      fetchingLayer: false,    // 新增:标记是否正在获取中
     };
   },
 
@@ -285,6 +295,67 @@ export default {
 
 
   methods: {
+    // 新增:获取最新GeoServer图层信息
+    async fetchLatestLayerInfo() {
+      // 如果正在获取或已获取,直接返回
+      if (this.fetchingLayer || this.layerInfoFetched) {
+        return this.currentLayerInfo || this.getDefaultLayerInfo();
+      }
+      
+      try {
+        this.fetchingLayer = true;
+        const response = await api8000.get('/api/geoserver/latest-layer');
+        
+        if (response.data && response.data.geoserver && response.data.geoserver.exists) {
+          this.currentLayerInfo = response.data;
+          this.layerInfoFetched = true; // 标记为已获取
+          console.log('获取到最新图层信息:', this.currentLayerInfo);
+          return this.currentLayerInfo;
+        } else {
+          console.warn('未找到最新图层信息,使用默认配置');
+          return this.getDefaultLayerInfo();
+        }
+      } catch (error) {
+        console.error('获取最新图层信息失败:', error);
+        return this.getDefaultLayerInfo();
+      } finally {
+        this.fetchingLayer = false;
+      }
+    },
+
+    // 新增:获取默认图层配置
+    getDefaultLayerInfo() {
+      return {
+        geoserver: {
+          exists: true,
+          layer_name: 'shapeMap',
+          full_name: `${this.geoserverConfig.workspace}:shapeMap`,
+          workspace: this.geoserverConfig.workspace
+        },
+        wms: {
+          wms_url: `${this.geoserverConfig.baseUrl}/${this.geoserverConfig.workspace}/wms`,
+          layer_name: `${this.geoserverConfig.workspace}:shapeMap`
+        }
+      };
+    },
+
+    // 新增:构建WMS服务URL
+    getWmsUrl() {
+      if (this.currentLayerInfo && this.currentLayerInfo.wms) {
+        return this.currentLayerInfo.wms.wms_url;
+      }
+      return `${this.geoserverConfig.baseUrl}/${this.geoserverConfig.workspace}/wms`;
+    },
+
+    // 新增:获取图层名称
+    getLayerName() {
+      if (this.currentLayerInfo && this.currentLayerInfo.geoserver) {
+        return this.currentLayerInfo.geoserver.full_name || 
+              `${this.geoserverConfig.workspace}:${this.currentLayerInfo.geoserver.layer_name}`;
+      }
+      return `${this.geoserverConfig.workspace}:shapeMap`;
+    },
+    
     async fetchFluxData() {
       try {
         this.loadingTownshipMap = true;
@@ -491,8 +562,19 @@ export default {
 
     // 初始化乡镇边界地图
 async initTownshipMap() {
+   // 如果正在加载,直接返回
+    if (this.loadingTownshipMap) {
+      return;
+    }
+    
     try {
       this.loadingTownshipMap = true;
+      
+      // 只有在未获取过图层信息时才获取
+      if (!this.layerInfoFetched) {
+        await this.fetchLatestLayerInfo();
+      }
+    
       if (!this.fluxDataLoaded) {
         await this.fetchFluxData();
       }
@@ -747,8 +829,8 @@ renderTownshipMap() {
     }).addTo(this.townshipMapInstance);
 
     // 添加GeoServer WMS图层作为底图
-    const wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/soilgd/wms', {
-      layers: 'soilgd:shapeMap', // 替换为你的图层名称
+    const wmsLayer = L.tileLayer.wms(this.getWmsUrl(), {
+      layers: this.getLayerName(), // 替换为你的图层名称
       format: 'image/png',
       transparent: true,
       version: '1.1.0',
@@ -792,13 +874,13 @@ async handleWmsFeatureClick(e) {
     const y = Math.round(containerPoint.y);
 
     // 2. 构造 GetFeatureInfo 请求 URL(强制 JSON + 修正参数)
-    const wmsBaseUrl = 'http://localhost:8080/geoserver/soilgd/wms'; // 确保工作区和服务名正确
+    const wmsBaseUrl = this.getWmsUrl();
     const params = new URLSearchParams({
       SERVICE: 'WMS',
       VERSION: '1.1.1', // 建议用 1.1.1(GeoServer 更兼容)
       REQUEST: 'GetFeatureInfo',
-      LAYERS: 'soilgd:shapeMap',
-      QUERY_LAYERS: 'soilgd:shapeMap',
+      LAYERS: this.getLayerName(),
+      QUERY_LAYERS: this.getLayerName(),
       FORMAT: 'image/png',
       TRANSPARENT: 'true',
       INFO_FORMAT: 'application/json', // 强制返回 JSON
@@ -833,11 +915,11 @@ async handleWmsFeatureClick(e) {
 
     const properties = featureData.features[0].properties || {};
       this.currentFeatureInfo = {
-        avgmean: properties._avgmean,       // 平均镉含量
-        lncd: properties.Ln_Cd,             // 输入镉通量
-        outcd: properties.Out_Cd,           // 输出镉通量
-        netcd: properties.Net_Cd,           // 净镉通量
-        endcd: properties.End_Cd            // 最终镉浓度
+        avgmean: properties.CropCd_mean,       // 平均镉含量
+        lncd: properties.In_Cd_mean,             // 输入镉通量
+        outcd: properties.Out_Cd_mean,           // 输出镉通量
+        netcd: properties.Net_Cd_mean,           // 净镉通量
+        endcd: properties.End_Cd_mean            // 最终镉浓度
       };
       
       // 打印验证(可选)
@@ -857,15 +939,13 @@ async handleWmsFeatureClick(e) {
       let tooltipContent = `<div class="town-tooltip"><h3>${townName}</h3>`;
       
       // 水稻Cd数据部分
-      tooltipContent += `<div style="margin-bottom: 10px;"><strong>水稻Cd</strong></div>`;
       if (!riceData?.data?.基础统计) {
         tooltipContent += '<p>水稻Cd数据加载中...</p>';
       } else {
         const stats = riceData.data.基础统计;
         const dist = riceData.data.分布统计表格;
         tooltipContent += `
-          <p><strong>样本数量:</strong> ${stats.采样点数量 ?? '无数据'}</p>
-          <p><strong>平均值:</strong> ${stats.平均值?.toFixed(4) ?? '无数据'} mg/kg</p>
+          <p><strong>水稻cd含量:</strong> ${stats.平均值?.toFixed(4) ?? '无数据'} mg/kg</p>
           <p><strong>安全区间占比:</strong> ${dist?.汇总?.安全区间占比 ?? '无'}</p>
           <p><strong>预警区间占比:</strong> ${dist?.汇总?.预警区间占比 ?? '无'}</p>
           <p><strong>超标区间占比:</strong> ${dist?.汇总?.超标区间占比 ?? '无'}</p>
@@ -873,7 +953,6 @@ async handleWmsFeatureClick(e) {
       }
       
       // 通量Cd数据部分
-      tooltipContent += `<div style="margin-top: 10px; margin-bottom: 10px;"><strong>通量Cd</strong></div>`;
       if (!fluxData) {
         tooltipContent += '<p>通量Cd数据加载中...</p>';
       } else {
@@ -881,7 +960,7 @@ async handleWmsFeatureClick(e) {
           <p><strong>输入通量:</strong> ${fluxData.in_cd?.mean?.toFixed(4) ?? '无数据'} ${fluxData.in_cd?.unit ?? ''}</p>
           <p><strong>输出通量:</strong> ${fluxData.out_cd?.mean?.toFixed(4) ?? '无数据'} ${fluxData.out_cd?.unit ?? ''}</p>
           <p><strong>净通量:</strong> ${fluxData.net_cd?.mean?.toFixed(4) ?? '无数据'} ${fluxData.net_cd?.unit ?? ''}</p>
-          <p><strong>土壤Cd浓度:</strong> ${fluxData.end_cd?.mean?.toFixed(4) ?? '无数据'} ${fluxData.end_cd?.unit ?? ''}</p>
+          <p><strong>当年浓度:</strong> ${fluxData.end_cd?.mean?.toFixed(4) ?? '无数据'} ${fluxData.end_cd?.unit ?? ''}</p>
         `;
       }