|
@@ -246,6 +246,16 @@ export default {
|
|
|
dataMap:{},
|
|
dataMap:{},
|
|
|
fluxDataMap: {}, // 存储通量Cd数据
|
|
fluxDataMap: {}, // 存储通量Cd数据
|
|
|
fluxDataLoaded: false, // 通量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: {
|
|
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() {
|
|
async fetchFluxData() {
|
|
|
try {
|
|
try {
|
|
|
this.loadingTownshipMap = true;
|
|
this.loadingTownshipMap = true;
|
|
@@ -491,8 +562,19 @@ export default {
|
|
|
|
|
|
|
|
// 初始化乡镇边界地图
|
|
// 初始化乡镇边界地图
|
|
|
async initTownshipMap() {
|
|
async initTownshipMap() {
|
|
|
|
|
+ // 如果正在加载,直接返回
|
|
|
|
|
+ if (this.loadingTownshipMap) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
try {
|
|
try {
|
|
|
this.loadingTownshipMap = true;
|
|
this.loadingTownshipMap = true;
|
|
|
|
|
+
|
|
|
|
|
+ // 只有在未获取过图层信息时才获取
|
|
|
|
|
+ if (!this.layerInfoFetched) {
|
|
|
|
|
+ await this.fetchLatestLayerInfo();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
if (!this.fluxDataLoaded) {
|
|
if (!this.fluxDataLoaded) {
|
|
|
await this.fetchFluxData();
|
|
await this.fetchFluxData();
|
|
|
}
|
|
}
|
|
@@ -747,8 +829,8 @@ renderTownshipMap() {
|
|
|
}).addTo(this.townshipMapInstance);
|
|
}).addTo(this.townshipMapInstance);
|
|
|
|
|
|
|
|
// 添加GeoServer WMS图层作为底图
|
|
// 添加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',
|
|
format: 'image/png',
|
|
|
transparent: true,
|
|
transparent: true,
|
|
|
version: '1.1.0',
|
|
version: '1.1.0',
|
|
@@ -792,13 +874,13 @@ async handleWmsFeatureClick(e) {
|
|
|
const y = Math.round(containerPoint.y);
|
|
const y = Math.round(containerPoint.y);
|
|
|
|
|
|
|
|
// 2. 构造 GetFeatureInfo 请求 URL(强制 JSON + 修正参数)
|
|
// 2. 构造 GetFeatureInfo 请求 URL(强制 JSON + 修正参数)
|
|
|
- const wmsBaseUrl = 'http://localhost:8080/geoserver/soilgd/wms'; // 确保工作区和服务名正确
|
|
|
|
|
|
|
+ const wmsBaseUrl = this.getWmsUrl();
|
|
|
const params = new URLSearchParams({
|
|
const params = new URLSearchParams({
|
|
|
SERVICE: 'WMS',
|
|
SERVICE: 'WMS',
|
|
|
VERSION: '1.1.1', // 建议用 1.1.1(GeoServer 更兼容)
|
|
VERSION: '1.1.1', // 建议用 1.1.1(GeoServer 更兼容)
|
|
|
REQUEST: 'GetFeatureInfo',
|
|
REQUEST: 'GetFeatureInfo',
|
|
|
- LAYERS: 'soilgd:shapeMap',
|
|
|
|
|
- QUERY_LAYERS: 'soilgd:shapeMap',
|
|
|
|
|
|
|
+ LAYERS: this.getLayerName(),
|
|
|
|
|
+ QUERY_LAYERS: this.getLayerName(),
|
|
|
FORMAT: 'image/png',
|
|
FORMAT: 'image/png',
|
|
|
TRANSPARENT: 'true',
|
|
TRANSPARENT: 'true',
|
|
|
INFO_FORMAT: 'application/json', // 强制返回 JSON
|
|
INFO_FORMAT: 'application/json', // 强制返回 JSON
|
|
@@ -833,11 +915,11 @@ async handleWmsFeatureClick(e) {
|
|
|
|
|
|
|
|
const properties = featureData.features[0].properties || {};
|
|
const properties = featureData.features[0].properties || {};
|
|
|
this.currentFeatureInfo = {
|
|
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>`;
|
|
let tooltipContent = `<div class="town-tooltip"><h3>${townName}</h3>`;
|
|
|
|
|
|
|
|
// 水稻Cd数据部分
|
|
// 水稻Cd数据部分
|
|
|
- tooltipContent += `<div style="margin-bottom: 10px;"><strong>水稻Cd</strong></div>`;
|
|
|
|
|
if (!riceData?.data?.基础统计) {
|
|
if (!riceData?.data?.基础统计) {
|
|
|
tooltipContent += '<p>水稻Cd数据加载中...</p>';
|
|
tooltipContent += '<p>水稻Cd数据加载中...</p>';
|
|
|
} else {
|
|
} else {
|
|
|
const stats = riceData.data.基础统计;
|
|
const stats = riceData.data.基础统计;
|
|
|
const dist = riceData.data.分布统计表格;
|
|
const dist = riceData.data.分布统计表格;
|
|
|
tooltipContent += `
|
|
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>
|
|
<p><strong>预警区间占比:</strong> ${dist?.汇总?.预警区间占比 ?? '无'}</p>
|
|
|
<p><strong>超标区间占比:</strong> ${dist?.汇总?.超标区间占比 ?? '无'}</p>
|
|
<p><strong>超标区间占比:</strong> ${dist?.汇总?.超标区间占比 ?? '无'}</p>
|
|
@@ -873,7 +953,6 @@ async handleWmsFeatureClick(e) {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 通量Cd数据部分
|
|
// 通量Cd数据部分
|
|
|
- tooltipContent += `<div style="margin-top: 10px; margin-bottom: 10px;"><strong>通量Cd</strong></div>`;
|
|
|
|
|
if (!fluxData) {
|
|
if (!fluxData) {
|
|
|
tooltipContent += '<p>通量Cd数据加载中...</p>';
|
|
tooltipContent += '<p>通量Cd数据加载中...</p>';
|
|
|
} else {
|
|
} 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.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.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>净通量:</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>
|
|
|
`;
|
|
`;
|
|
|
}
|
|
}
|
|
|
|
|
|