revisit
/
DSDSWeb
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

更新图层操作逻辑

This commit is contained in:
hym 2026-06-25 21:33:25 +08:00
parent 84270bd4eb
commit f7c3baa76f
6 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/dataSearch.vue
View File

@ -464,7 +464,7 @@ export default {
item.highlight = false item.highlight = false
item.show = true 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++; i++;
}) })
} }
@ -482,12 +482,12 @@ export default {
}, },
// 添加高亮图层 // 添加高亮图层
addHighlightLayer(voyageName, i) { 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; this.dataList[i].highlight = true;
}, },
// 清除高亮 // 清除高亮
clearHighlight(voyageName, i) { 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; this.dataList[i].highlight = false;
}, },
// 显示 // 显示
@ -496,8 +496,8 @@ export default {
this.dataList[i].show = true; this.dataList[i].show = true;
} }
// 显示图层 // 显示图层
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "visible"); Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${Vue.config.layers[voyageName]}-symbol`, "visibility", "visible");
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "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"); // let visibility = Vue.config.maps["dataSearchMap"].getLayoutProperty(`vector-${voyageName}-symbol`, "visibility");
// visibility = visibility == "visible" ? "none" : "visible"; // visibility = visibility == "visible" ? "none" : "visible";
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "none"); Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${Vue.config.layers[voyageName]}-symbol`, "visibility", "none");
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "none"); Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${Vue.config.layers[voyageName]}-line`, "visibility", "none");
}, },
// 清除所有轨迹图层 // 清除所有轨迹图层
clearAll() { 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"}); // loadVectorLayer({layerId:item.voyage_name, features:["line", "symbol"], colors:[colors[i], colors[i]], visibility:"visible", mapId:"dataSearchMap", workspace:"dsds"});
// 添加测线/站位图层 // 添加测线/站位图层
if (item.job_type == "测线作业") { 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 { } 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++; i++;
}) })

36
src/views/home.vue
View File

@ -234,7 +234,7 @@ import { getVoyage, statisticsNums } from '../api/home'
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css' import 'swiper/swiper-bundle.css'
import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer' 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 { ColorGenerator } from '@/utils/color-generator';
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils"; import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
@ -310,10 +310,10 @@ export default {
this.dataUpdate() this.dataUpdate()
this.sampleDataUpdate() this.sampleDataUpdate()
}, },
mounted() { async mounted() {
initMapbox("homeMap", { initMapbox("homeMap", {
tileKey: "World_Imagery", tileKey: "World_Imagery",
zoom: 1.5, zoom: 3,
center: [122, 15], center: [122, 15],
minZoom: 1, minZoom: 1,
maxZoom: 29, maxZoom: 29,
@ -328,13 +328,16 @@ export default {
// 加载海岸线 // 加载海岸线
// loadVectorLayer("GSHHS_f_L1", ["line"], ["#FEFEFE"], "homeMap", 'ougp'); // loadVectorLayer("GSHHS_f_L1", ["line"], ["#FEFEFE"], "homeMap", 'ougp');
// 加载等深线（默认不显示） // 加载等深线（默认不显示）
loadVectorLayer({ layerId: "contour-4500m", 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: "contour-6000m", 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: { methods: {
// 查询航次列表 // 查询航次列表
getVoyageList() { async getVoyageList() {
// 用 await，确保调用 getGeoserverCapabilities 完成后再执行 getVoyage
await getGeoserverCapabilities();
getVoyage({ getVoyage({
start: 0, start: 0,
limit: 10 limit: 10
@ -345,7 +348,7 @@ export default {
const colors = ColorGenerator.generateDivergingColors(this.voyageList.length); const colors = ColorGenerator.generateDivergingColors(this.voyageList.length);
this.voyageList.forEach(element => { 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++; i++;
}); });
@ -359,10 +362,10 @@ export default {
// 行点击事件处理 // 行点击事件处理
handleRowClick(row, column, event) { 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"; visibility = visibility == "visible" ? "none" : "visible";
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility", visibility); Vue.config.maps["homeMap"].setLayoutProperty(`vector-${Vue.config.layers[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]}-line`, "visibility", visibility);
this.$refs.multipleTable.toggleRowSelection(row); this.$refs.multipleTable.toggleRowSelection(row);
}, },
@ -379,8 +382,8 @@ export default {
// 移除不再需要的轨迹图层 // 移除不再需要的轨迹图层
voyagesToRemove.forEach(voyage => { voyagesToRemove.forEach(voyage => {
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "none"); Vue.config.maps["homeMap"].setLayoutProperty(`vector-${Vue.config.layers[voyage]}-symbol`, "visibility", "none");
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "none"); Vue.config.maps["homeMap"].setLayoutProperty(`vector-${Vue.config.layers[voyage]}-line`, "visibility", "none");
}); });
// 添加新选择的轨迹图层 // 添加新选择的轨迹图层
@ -388,8 +391,8 @@ export default {
// 从val中找出对应航次的完整数据项 // 从val中找出对应航次的完整数据项
const correspondingItem = val.find(item => item.voyage_name === voyage); const correspondingItem = val.find(item => item.voyage_name === voyage);
if (correspondingItem) { if (correspondingItem) {
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "visible"); Vue.config.maps["homeMap"].setLayoutProperty(`vector-${Vue.config.layers[voyage]}-symbol`, "visibility", "visible");
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "visible"); Vue.config.maps["homeMap"].setLayoutProperty(`vector-${Vue.config.layers[voyage]}-line`, "visibility", "visible");
} }
}); });
@ -403,12 +406,13 @@ export default {
// **方案2: 允许同时多个按钮被选中，点击切换自身状态** // **方案2: 允许同时多个按钮被选中，点击切换自身状态**
const index = this.selectedDepths.indexOf(depth); const index = this.selectedDepths.indexOf(depth);
console.log("depth>>>",depth);
if (index > -1) { if (index > -1) {
this.selectedDepths.splice(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 { } else {
this.selectedDepths.push(depth); // 如果未选中，则添加 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");
} }
}, },

2
src/views/statistics/AuvStatistics.vue
View File

@ -235,7 +235,7 @@ export default {
// 添加轨迹图层 // 添加轨迹图层
res.array.forEach(item => { 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++; i++;
}) })
}) })

2
src/views/statistics/HovStatistics.vue
View File

@ -235,7 +235,7 @@ export default {
const colors = ColorGenerator.generateDivergingColors(res.array.length); const colors = ColorGenerator.generateDivergingColors(res.array.length);
res.array.forEach(item => { 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++; i++;
}) })
}) })

2
src/views/statistics/RovStatistics.vue
View File

@ -235,7 +235,7 @@ export default {
// 添加轨迹图层 // 添加轨迹图层
res.array.forEach(item => { 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++; i++;
}) })
}) })

2
src/views/statistics/ShipStatistics.vue
View File

@ -250,7 +250,7 @@ export default {
// 添加轨迹图层 // 添加轨迹图层
res.array.forEach(item => { 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++ i++
}) })
}) })