From f7c3baa76fa33fdcee79f051b327ead745e667e9 Mon Sep 17 00:00:00 2001 From: hym Date: Thu, 25 Jun 2026 21:33:25 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=9B=BE=E5=B1=82=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dataSearch.vue | 18 ++++++------- src/views/home.vue | 36 ++++++++++++++----------- src/views/statistics/AuvStatistics.vue | 2 +- src/views/statistics/HovStatistics.vue | 2 +- src/views/statistics/RovStatistics.vue | 2 +- src/views/statistics/ShipStatistics.vue | 2 +- 6 files changed, 33 insertions(+), 29 deletions(-) diff --git a/src/views/dataSearch.vue b/src/views/dataSearch.vue index f13774e..8d5231e 100644 --- a/src/views/dataSearch.vue +++ b/src/views/dataSearch.vue @@ -464,7 +464,7 @@ export default { item.highlight = false item.show = true // 加载轨迹图层 - loadVectorLayer({ layerId: item.voyage_name, features: ["line", "symbol"], colors: [colors[i], colors[i]], visibility: "visible", mapId: "dataSearchMap", workspace: "dsds" }); + loadVectorLayer({ layerId: Vue.config.layers[item.voyage_name], features: ["line", "symbol"], colors: [colors[i], colors[i]], visibility: "visible", mapId: "dataSearchMap", workspace: "dsds" }); i++; }) } @@ -482,12 +482,12 @@ export default { }, // 添加高亮图层 addHighlightLayer(voyageName, i) { - Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", 4); + Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${Vue.config.layers[voyageName]}-line`, "line-width", 4); this.dataList[i].highlight = true; }, // 清除高亮 clearHighlight(voyageName, i) { - Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", lineWidthExpression); + Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${Vue.config.layers[voyageName]}-line`, "line-width", lineWidthExpression); this.dataList[i].highlight = false; }, // 显示 @@ -496,8 +496,8 @@ export default { this.dataList[i].show = true; } // 显示图层 - Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "visible"); - Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "visible"); + Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${Vue.config.layers[voyageName]}-symbol`, "visibility", "visible"); + Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${Vue.config.layers[voyageName]}-line`, "visibility", "visible"); }, // 隐藏 @@ -508,8 +508,8 @@ export default { // 隐藏图层 // let visibility = Vue.config.maps["dataSearchMap"].getLayoutProperty(`vector-${voyageName}-symbol`, "visibility"); // visibility = visibility == "visible" ? "none" : "visible"; - Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "none"); - Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "none"); + Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${Vue.config.layers[voyageName]}-symbol`, "visibility", "none"); + Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${Vue.config.layers[voyageName]}-line`, "visibility", "none"); }, // 清除所有轨迹图层 clearAll() { @@ -536,9 +536,9 @@ export default { // loadVectorLayer({layerId:item.voyage_name, features:["line", "symbol"], colors:[colors[i], colors[i]], visibility:"visible", mapId:"dataSearchMap", workspace:"dsds"}); // 添加测线/站位图层 if (item.job_type == "测线作业") { - loadVectorLayer({ layerId: `sample_line_${item.dataset_name}`, features: ["line"], colors: ["#FFFFFF", "#FFFFFF"], visibility: "visible", mapId: "dataSearchMap", workspace: "dsds", textField: "sample_name", callbackOnClick: this.setHightItem }); + loadVectorLayer({ layerId: `${Vue.config.layers["sample_line_" + item.dataset_name]}`, features: ["line"], colors: ["#FFFFFF", "#FFFFFF"], visibility: "visible", mapId: "dataSearchMap", workspace: "dsds", textField: "sample_name", callbackOnClick: this.setHightItem }); } else { - loadVectorLayer({ layerId: `sample_station_${item.dataset_name}`, features: ["symbol"], colors: ["#FFFFFF", "#FFFFFF"], visibility: "visible", mapId: "dataSearchMap", workspace: "dsds", textField: "sample_name", callbackOnClick: this.setHightItem }); + loadVectorLayer({ layerId: `${Vue.config.layers["sample_station_" + item.dataset_name]}`, features: ["symbol"], colors: ["#FFFFFF", "#FFFFFF"], visibility: "visible", mapId: "dataSearchMap", workspace: "dsds", textField: "sample_name", callbackOnClick: this.setHightItem }); } i++; }) diff --git a/src/views/home.vue b/src/views/home.vue index d441c86..d6a362d 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -234,7 +234,7 @@ import { getVoyage, statisticsNums } from '../api/home' import { swiper, swiperSlide } from 'vue-awesome-swiper' import 'swiper/swiper-bundle.css' import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer' -import { loadVectorLayer } from '@/utils/vector-layer-utils' +import { loadVectorLayer, getGeoserverCapabilities } from '@/utils/vector-layer-utils' import { ColorGenerator } from '@/utils/color-generator'; import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils"; @@ -310,10 +310,10 @@ export default { this.dataUpdate() this.sampleDataUpdate() }, - mounted() { + async mounted() { initMapbox("homeMap", { tileKey: "World_Imagery", - zoom: 1.5, + zoom: 3, center: [122, 15], minZoom: 1, maxZoom: 29, @@ -328,13 +328,16 @@ export default { // 加载海岸线 // loadVectorLayer("GSHHS_f_L1", ["line"], ["#FEFEFE"], "homeMap", 'ougp'); // 加载等深线（默认不显示） - loadVectorLayer({ layerId: "contour-4500m", features: ["line"], colors: ["#FEFEFE"], visibility: "none", mapId: "homeMap", workspace: 'ougp' }); - loadVectorLayer({ layerId: "contour-6000m", features: ["line"], colors: ["#FEFEFE"], visibility: "none", mapId: "homeMap", workspace: 'ougp' }); + loadVectorLayer({ layerId: (Vue.config.layers["4500米等深线"] || Vue.config.layers["contour-4500m"]), features: ["line"], colors: ["#FEFEFE"], visibility: "none", mapId: "homeMap", workspace: 'ougp' }); + loadVectorLayer({ layerId: (Vue.config.layers["6000米等深线"] || Vue.config.layers["contour-6000m"]), features: ["line"], colors: ["#FEFEFE"], visibility: "none", mapId: "homeMap", workspace: 'ougp' }); }); }, methods: { // 查询航次列表 - getVoyageList() { + async getVoyageList() { + // 用 await，确保调用 getGeoserverCapabilities 完成后再执行 getVoyage + await getGeoserverCapabilities(); + getVoyage({ start: 0, limit: 10 @@ -345,7 +348,7 @@ export default { const colors = ColorGenerator.generateDivergingColors(this.voyageList.length); this.voyageList.forEach(element => { // 加载轨迹图层 - loadVectorLayer({ layerId: element.voyage_name, features: ["line", "symbol"], colors: [colors[i], colors[i]], visibility: "visible", mapId: "homeMap", workspace: "dsds" }); + loadVectorLayer({ layerId: Vue.config.layers[element.voyage_name], features: ["line", "symbol"], colors: [colors[i], colors[i]], visibility: "visible", mapId: "homeMap", workspace: "dsds", textField: "name" }); i++; }); @@ -359,10 +362,10 @@ export default { // 行点击事件处理 handleRowClick(row, column, event) { // 原高亮逻辑改为图层显示/隐藏控制 - let visibility = Vue.config.maps["homeMap"].getLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility"); + let visibility = Vue.config.maps["homeMap"].getLayoutProperty(`vector-${Vue.config.layers[row.voyage_name]}-symbol`, "visibility"); visibility = visibility == "visible" ? "none" : "visible"; - Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility", visibility); - Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-line`, "visibility", visibility); + Vue.config.maps["homeMap"].setLayoutProperty(`vector-${Vue.config.layers[row.voyage_name]}-symbol`, "visibility", visibility); + Vue.config.maps["homeMap"].setLayoutProperty(`vector-${Vue.config.layers[row.voyage_name]}-line`, "visibility", visibility); this.$refs.multipleTable.toggleRowSelection(row); }, @@ -379,8 +382,8 @@ export default { // 移除不再需要的轨迹图层 voyagesToRemove.forEach(voyage => { - Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "none"); - Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "none"); + Vue.config.maps["homeMap"].setLayoutProperty(`vector-${Vue.config.layers[voyage]}-symbol`, "visibility", "none"); + Vue.config.maps["homeMap"].setLayoutProperty(`vector-${Vue.config.layers[voyage]}-line`, "visibility", "none"); }); // 添加新选择的轨迹图层 @@ -388,8 +391,8 @@ export default { // 从val中找出对应航次的完整数据项 const correspondingItem = val.find(item => item.voyage_name === voyage); if (correspondingItem) { - Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "visible"); - Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "visible"); + Vue.config.maps["homeMap"].setLayoutProperty(`vector-${Vue.config.layers[voyage]}-symbol`, "visibility", "visible"); + Vue.config.maps["homeMap"].setLayoutProperty(`vector-${Vue.config.layers[voyage]}-line`, "visibility", "visible"); } }); @@ -403,12 +406,13 @@ export default { // **方案2: 允许同时多个按钮被选中，点击切换自身状态** const index = this.selectedDepths.indexOf(depth); + console.log("depth>>>",depth); if (index > -1) { this.selectedDepths.splice(index, 1); // 如果已选中，则移除 - Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "none"); + Vue.config.maps["homeMap"].setLayoutProperty(`vector-${(Vue.config.layers[depth + "米等深线"] || Vue.config.layers["contour-" + depth + "m"])}-line`, "visibility", "none"); } else { this.selectedDepths.push(depth); // 如果未选中，则添加 - Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "visible"); + Vue.config.maps["homeMap"].setLayoutProperty(`vector-${(Vue.config.layers[depth + "米等深线"] || Vue.config.layers["contour-" + depth + "m"])}-line`, "visibility", "visible"); } }, diff --git a/src/views/statistics/AuvStatistics.vue b/src/views/statistics/AuvStatistics.vue index 070623f..f349089 100644 --- a/src/views/statistics/AuvStatistics.vue +++ b/src/views/statistics/AuvStatistics.vue @@ -235,7 +235,7 @@ export default { // 添加轨迹图层 res.array.forEach(item => { // 加载轨迹图层 - loadVectorLayer({ layerId: item.diving_sn, features: ["line", "symbol"], colors: [colors[i], "#FFFFFF"], visibility: "visible", mapId: "voyageMap_auv", worksapce: "dsds" }); + loadVectorLayer({ layerId: Vue.config.layers[item.diving_sn], features: ["line", "symbol"], colors: [colors[i], "#FFFFFF"], visibility: "visible", mapId: "voyageMap_auv", worksapce: "dsds" }); i++; }) }) diff --git a/src/views/statistics/HovStatistics.vue b/src/views/statistics/HovStatistics.vue index 6f8df35..4a11fa3 100644 --- a/src/views/statistics/HovStatistics.vue +++ b/src/views/statistics/HovStatistics.vue @@ -235,7 +235,7 @@ export default { const colors = ColorGenerator.generateDivergingColors(res.array.length); res.array.forEach(item => { // 加载下潜轨迹 - loadVectorLayer({ layerId: item.diving_sn, features: ["line", "symbol"], colors: [colors[i], "#FFFFFF"], visibility: "visible", mapId: "voyageMap_hov", workspace: "dsds" }); + loadVectorLayer({ layerId: Vue.config.layers[item.diving_sn], features: ["line", "symbol"], colors: [colors[i], "#FFFFFF"], visibility: "visible", mapId: "voyageMap_hov", workspace: "dsds" }); i++; }) }) diff --git a/src/views/statistics/RovStatistics.vue b/src/views/statistics/RovStatistics.vue index ce684eb..7731f3a 100644 --- a/src/views/statistics/RovStatistics.vue +++ b/src/views/statistics/RovStatistics.vue @@ -235,7 +235,7 @@ export default { // 添加轨迹图层 res.array.forEach(item => { // 加载轨迹图层 - loadVectorLayer({ layerId: item.diving_sn, features: ["line", "symbol"], colors: [colors[i], "#FFFFFF"], visibility: "visible", mapId: "voyageMap_rov", workspace: "dsds" }); + loadVectorLayer({ layerId: Vue.config.layers[item.diving_sn], features: ["line", "symbol"], colors: [colors[i], "#FFFFFF"], visibility: "visible", mapId: "voyageMap_rov", workspace: "dsds" }); i++; }) }) diff --git a/src/views/statistics/ShipStatistics.vue b/src/views/statistics/ShipStatistics.vue index 68e9ed8..e2f64c8 100644 --- a/src/views/statistics/ShipStatistics.vue +++ b/src/views/statistics/ShipStatistics.vue @@ -250,7 +250,7 @@ export default { // 添加轨迹图层 res.array.forEach(item => { // 加载轨迹图层（已存在则设置为可见） - loadVectorLayer({ layerId: item.voyage_name, features: ['line', 'symbol'], colors: [colors[i], '#FFFFFF'], visibility: 'visible', mapId: 'voyageMap_ship', workspace: 'dsds' }) + loadVectorLayer({ layerId: Vue.config.layers[item.voyage_name], features: ['line', 'symbol'], colors: [colors[i], '#FFFFFF'], visibility: 'visible', mapId: 'voyageMap_ship', workspace: 'dsds' }) i++ }) })