更新矢量图层加载逻辑

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' })

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({ layerId: "contour-4500m", features: ["line"], colors: ["#FEFEFE"], visibility: "none", mapId: "homeMap", workspace: 'ougp' });
-      loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "none", "homeMap", '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++;
         });
 

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++;
         })
       })

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++;
         })
       })

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++;
         })
       })

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++
         })
       })