增加图层按查询条件显示

src/views/dataSearch.vue

@@ -28,20 +28,24 @@
         <div class="left4-sample-wrap" v-if="radio == '数据样品集'">
           <p class="rule-text">编号规则：航次编号_平台类型_设备类型_数据样品类型</p>
           <div class="left4">
-            <div v-for="(item, index) in dataList" :key="index" :id="item.tsy_id" class="left4_1" >
+            <div v-for="(item, index) in dataList" :key="index" :id="item.tsy_id" class="left4_1">
               <div class="left4_top">
-                <p @click="openList(item, 'list')" style="font-weight: 400;font-size: 14px;cursor: pointer;color: #409eff" >{{ item.dataset_name }} <span class="mileage">{{ item.file_total }}</span></p>
+                <p @click="openList(item, 'list')"
+                  style="font-weight: 400;font-size: 14px;cursor: pointer;color: #409eff">{{ item.dataset_name }} <span
+                    class="mileage">{{ item.file_total }}</span></p>
                 <span class="org">{{ item.create_time }}</span>
               </div>
               <ul v-show="currenId == item.tsy_id && fold">
                 <li :class="sample.tsy_id == currenSample ? 'bg-color' : ''" class="sample" :id="sample.tsy_id"
-                    v-for="(sample, i) in item.sampleArray" :key="i" @click.stop="onSample(sample, item.job_type)">{{ sample.sample_name }}
+                  v-for="(sample, i) in item.sampleArray" :key="i" @click.stop="onSample(sample, item.job_type)">{{
+                    sample.sample_name }}
                 </li>
               </ul>
               <div class="left4_list">
                 <div class="list1">
                   <p>航次：</p>
-                  <span class="hover-color" style="color: #409eff" @click="turnDeatilPage(item)">{{ item.voyage_name }}</span>
+                  <span class="hover-color" style="color: #409eff" @click="turnDeatilPage(item)">{{ item.voyage_name
+                  }}</span>
                 </div>
                 <div class="list1">
                   <p>平台类型：</p>
@@ -232,7 +236,7 @@ import { getParamsList, getVoyageLine } from '../api/home'
 import { regInfo } from '@/api/dataSearch'
 import Cookies from 'js-cookie'
 import Vue from 'vue'
-import { loadVectorLayer } from '@/utils/vector-layer-utils'
+import { setMapLayoutProperty, loadVectorLayer } from '@/utils/vector-layer-utils'
 import { ColorGenerator } from '@/utils/color-generator';
 import { initMapbox, triggerLayerClick } from "@/utils/mapbox-utils";
 
@@ -359,8 +363,8 @@ export default {
       center: [122, 15],
       minZoom: 2,
       maxZoom: 29,
-      coastlineOn:false,
+      coastlineOn: false,
-      contourOn:false
+      contourOn: false
     });
   },
   methods: {
@@ -448,6 +452,9 @@ export default {
         FrameSessionId: Cookies.get('JSESSIONID')
       }
       getDataList(params).then(res => {
+        // 先隐藏所有图层，再根据筛选结果显示对应图层
+        setMapLayoutProperty('dataSearchMap', 'none')
+
         const arr = res.page.records
         if (this.radio === '航次') {
           if (arr.length) {
@@ -456,7 +463,6 @@ export default {
             arr.forEach(item => {
               item.highlight = false
               item.show = true
-              // this.addSingleLineImg(item.voyage_name, null)
               // 加载轨迹图层
               loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearchMap", "dsds");
               i++;
@@ -753,7 +759,7 @@ export default {
         display: flex;
         flex-direction: column;
 
-        > .rule-text {
+        >.rule-text {
           flex-shrink: 0;
           margin-top: 12px;
           margin-bottom: 10px;
@@ -763,7 +769,7 @@ export default {
           overflow-x: auto;
         }
 
-        > .left4 {
+        >.left4 {
           flex: 1;
           min-height: 0;
         }
@@ -998,5 +1004,4 @@ export default {
   color: #fff;
   background: none !important;
 }
-
 </style>