From cb78e3b6d49daf441b42678c021d92f3373daf0d Mon Sep 17 00:00:00 2001 From: hym Date: Mon, 6 Apr 2026 23:06:43 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=9F=A2=E9=87=8F=E5=9B=BE?= =?UTF-8?q?=E5=B1=82=E5=8A=A0=E8=BD=BD=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 | 32 +++++++++++++++---------- src/views/home.vue | 6 ++--- src/views/statistics/AuvStatistics.vue | 4 ++-- src/views/statistics/HovStatistics.vue | 2 +- src/views/statistics/RovStatistics.vue | 4 ++-- src/views/statistics/ShipStatistics.vue | 2 +- 6 files changed, 28 insertions(+), 22 deletions(-) diff --git a/src/views/dataSearch.vue b/src/views/dataSearch.vue index 5f6a486..f13774e 100644 --- a/src/views/dataSearch.vue +++ b/src/views/dataSearch.vue @@ -236,7 +236,7 @@ import { getParamsList, getVoyageLine } from '../api/home' import { regInfo } from '@/api/dataSearch' import Cookies from 'js-cookie' import Vue from 'vue' -import { setMapLayoutProperty, loadVectorLayer } from '@/utils/vector-layer-utils' +import { setMapLayoutProperty, loadVectorLayer, showHighlightSampleInfo, lineWidthExpression } from '@/utils/vector-layer-utils' import { ColorGenerator } from '@/utils/color-generator'; import { initMapbox, triggerLayerClick } from "@/utils/mapbox-utils"; @@ -464,7 +464,7 @@ export default { item.highlight = false item.show = true // 加载轨迹图层 - loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearchMap", "dsds"); + loadVectorLayer({ layerId: item.voyage_name, features: ["line", "symbol"], colors: [colors[i], colors[i]], visibility: "visible", mapId: "dataSearchMap", workspace: "dsds" }); i++; }) } @@ -487,14 +487,6 @@ export default { }, // 清除高亮 clearHighlight(voyageName, i) { - let lineWidthExpression = [ - "case", - ["boolean", ["feature-state", "hover"], false], - 4, - ["boolean", ["feature-state", "click"], false], - 2, - 1.8 - ]; Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", lineWidthExpression); this.dataList[i].highlight = false; }, @@ -540,11 +532,13 @@ export default { let i = 0; const colors = ColorGenerator.generateDivergingColors(arr.length); arr.forEach(item => { + // 加载测线/站位所在航次的轨迹 + // loadVectorLayer({layerId:item.voyage_name, features:["line", "symbol"], colors:[colors[i], colors[i]], visibility:"visible", mapId:"dataSearchMap", workspace:"dsds"}); // 添加测线/站位图层 if (item.job_type == "测线作业") { - loadVectorLayer(`sample_line_${item.dataset_name}`, ["line"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearchMap", "dsds", "sample_name"); + loadVectorLayer({ layerId: `sample_line_${item.dataset_name}`, features: ["line"], colors: ["#FFFFFF", "#FFFFFF"], visibility: "visible", mapId: "dataSearchMap", workspace: "dsds", textField: "sample_name", callbackOnClick: this.setHightItem }); } else { - loadVectorLayer(`sample_station_${item.dataset_name}`, ["symbol"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearchMap", "dsds", "sample_name"); + loadVectorLayer({ layerId: `sample_station_${item.dataset_name}`, features: ["symbol"], colors: ["#FFFFFF", "#FFFFFF"], visibility: "visible", mapId: "dataSearchMap", workspace: "dsds", textField: "sample_name", callbackOnClick: this.setHightItem }); } i++; }) @@ -570,6 +564,13 @@ export default { this.dataList = voyageList }, + setHightItem(item) { + // 单击地图上的样品后，在左侧列表中高亮对应项 + this.currenSample = item.properties.tsy_id; + // this.currenId = item.properties.tsy_id; + console.log("clicked item:", item); + }, + turnDeatilPage(item) { this.dialog5 = true regInfo({ voyage_name: item.voyage_name }).then(res => { @@ -647,9 +648,14 @@ export default { }); let layerId = `vector-${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}-${job_type == "测线作业" ? "line" : "symbol"}`; let sourceLayerId = `${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}`; + // triggerLayerClick("dataSearchMap", sourceLayerId, layerId, [lon, lat], { "sample_name": sample.sample_name }); + // 单击样品时，同步在地图上显示样品信息弹窗 + showHighlightSampleInfo({ mapId: "dataSearchMap", job_type, sample, layerId, sourceLayerId }); + // 将选中的图层移动到最顶层，传入 undefined 作为第二个参数即可 + Vue.config.maps["dataSearchMap"].moveLayer(layerId, undefined); + // vector-sample_station_TS-46-1_FDZ377_Slurp_SWYP-symbol、vector-sample_line_TS2-29-1_SY612_GQXJ_PJZP-line // highlightFeaturesByProperty("dataSearchMap", `${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}`, layerId, "sample_name", sample.sample_name); - triggerLayerClick("dataSearchMap", sourceLayerId, layerId, [lon, lat], { "sample_name": sample.sample_name }); }, goHome() { this.$router.push({ name: 'home' }) diff --git a/src/views/home.vue b/src/views/home.vue index 023c605..d441c86 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -328,8 +328,8 @@ export default { // 加载海岸线 // loadVectorLayer("GSHHS_f_L1", ["line"], ["#FEFEFE"], "homeMap", 'ougp'); // 加载等深线（默认不显示） - loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp'); - loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "none", "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' }); }); }, methods: { @@ -345,7 +345,7 @@ export default { const colors = ColorGenerator.generateDivergingColors(this.voyageList.length); this.voyageList.forEach(element => { // 加载轨迹图层 - loadVectorLayer(element.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "homeMap", "dsds"); + loadVectorLayer({ layerId: element.voyage_name, features: ["line", "symbol"], colors: [colors[i], colors[i]], visibility: "visible", mapId: "homeMap", workspace: "dsds" }); i++; }); diff --git a/src/views/statistics/AuvStatistics.vue b/src/views/statistics/AuvStatistics.vue index 9889f2a..070623f 100644 --- a/src/views/statistics/AuvStatistics.vue +++ b/src/views/statistics/AuvStatistics.vue @@ -73,7 +73,7 @@ import PieChart from './components/PieChart.vue' import { reportList, platformAuv, auvUnit, auvUnitYear, auvDiving } from '../../api/statistics' import { filterDictItems } from '../../utils/index' import { initMapbox } from "@/utils/mapbox-utils"; -import { loadVectorLayer, loadJsonPointFeature,showUnitReport } from '@/utils/vector-layer-utils' +import { loadVectorLayer, loadJsonPointFeature, showUnitReport } from '@/utils/vector-layer-utils' import { ColorGenerator } from '@/utils/color-generator'; export default { @@ -235,7 +235,7 @@ export default { // 添加轨迹图层 res.array.forEach(item => { // 加载轨迹图层 - loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_auv", "dsds"); + loadVectorLayer({ layerId: 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 a4d82f2..6f8df35 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(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_hov", "dsds"); + loadVectorLayer({ layerId: 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 93c8109..ce684eb 100644 --- a/src/views/statistics/RovStatistics.vue +++ b/src/views/statistics/RovStatistics.vue @@ -73,7 +73,7 @@ import PieChart from './components/PieChart.vue' import { reportList, platformRov, rovUnit, rovUnitYear, rovDiving } from '../../api/statistics' import { filterDictItems } from '../../utils/index' import { initMapbox } from "@/utils/mapbox-utils"; -import { loadVectorLayer, loadJsonPointFeature,showUnitReport } from '@/utils/vector-layer-utils' +import { loadVectorLayer, loadJsonPointFeature, showUnitReport } from '@/utils/vector-layer-utils' import { ColorGenerator } from '@/utils/color-generator'; export default { @@ -235,7 +235,7 @@ export default { // 添加轨迹图层 res.array.forEach(item => { // 加载轨迹图层 - loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_rov", "dsds"); + loadVectorLayer({ layerId: 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 268d536..68e9ed8 100644 --- a/src/views/statistics/ShipStatistics.vue +++ b/src/views/statistics/ShipStatistics.vue @@ -250,7 +250,7 @@ export default { // 添加轨迹图层 res.array.forEach(item => { // 加载轨迹图层（已存在则设置为可见） - loadVectorLayer(item.voyage_name, ['line', 'symbol'], [colors[i], '#FFFFFF'], 'visible', 'voyageMap_ship', 'dsds') + loadVectorLayer({ layerId: item.voyage_name, features: ['line', 'symbol'], colors: [colors[i], '#FFFFFF'], visibility: 'visible', mapId: 'voyageMap_ship', workspace: 'dsds' }) i++ }) })