启用 mapbox 地图控件，优化相关交互逻辑。

src/views/dataSearch.vue

@@ -26,10 +26,12 @@
           </el-radio-group>
         </div>
         <div class="left4" v-if="radio == '数据样品集'">
-          <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 class="rule-text">编号规则:航次号_潜次号_设备类型_数据样品类型</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>
+              <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">
@@ -40,7 +42,8 @@
             <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>
@@ -82,7 +85,8 @@
             <div class="left4_top">
               <p :style="currentVoyage === item.tsy_id ? 'color: #409eff' : ''">
                 <span style="color: #409eff" @click="turnDeatilPage(item)">{{ item.voyage_name }}</span>
-                <span class="mileage">{{ item.voyage_mileage }}海里</span></p>
+                <span class="mileage">{{ item.voyage_mileage }}海里</span>
+              </p>
               <span class="org">{{ item.funding_org }}</span>
             </div>
             <div class="left4_list">
@@ -115,11 +119,15 @@
                 <span>{{ item.serect_status == 'Active' ? '是' : '否' }}</span>
               </div>
               <div class="btns">
-                <el-button v-if="!item.highlight" icon="el-icon-s-opportunity" circle @click="addHighlightLayer(item.voyage_name, index)" />
+                <el-button v-if="!item.highlight" icon="el-icon-s-opportunity" circle
-                <el-button v-if="item.highlight" type="primary" icon="el-icon-s-opportunity" circle @click="clearHighlight" />
+                  @click="addHighlightLayer(item.voyage_name, index)" />
-                <el-button v-if="!item.show" icon="el-icon-view" circle @click="addSingleLineImg(item.voyage_name, index)" />
+                <el-button v-if="item.highlight" type="primary" icon="el-icon-s-opportunity" circle
-                <el-button v-if="item.show" type="primary" icon="el-icon-view" circle @click="removeSingleLineImg(item.voyage_name, index)" />
+                  @click="clearHighlight(item.voyage_name, index)" />
-                <el-button icon="el-icon-location-information" circle />
+                <el-button v-if="!item.show" icon="el-icon-view" circle
+                  @click="addSingleLineImg(item.voyage_name, index)" />
+                <el-button v-if="item.show" type="primary" icon="el-icon-view" circle
+                  @click="removeSingleLineImg(item.voyage_name, index)" />
+                <!-- <el-button icon="el-icon-location-information" circle /> -->
               </div>
             </div>
           </div>
@@ -139,58 +147,46 @@
       </div>
     </div>
     <!--  航次名称弹窗-->
-    <el-dialog
+    <el-dialog title="请选择航次名称" :visible.sync="dialog1" width="1000px">
-      title="请选择航次名称"
+      <el-table ref="tableData1" border highlight-current-row @current-change="handleCurrentChange1" max-height="480"
-      :visible.sync="dialog1"
+        :data="tableData1" :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
-      width="1000px"
+        :cell-style="{ textAlign: 'center' }">
-    >
+        <el-table-column type="index" label="#" width="50" />
-      <el-table ref="tableData1" border highlight-current-row @current-change="handleCurrentChange1" max-height="480" :data="tableData1" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
-        <el-table-column type="index" label="#" width="50"/>
         <el-table-column prop="name" label="航次名称" />
       </el-table>
     </el-dialog>
     <!--  平台类型弹窗-->
-    <el-dialog
+    <el-dialog title="请选择平台类型" :visible.sync="dialog2" width="1000px">
-      title="请选择平台类型"
+      <el-table ref="tableData2" border @current-change="handleCurrentChange2" :data="tableData2" max-height="480"
-      :visible.sync="dialog2"
+        :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
-      width="1000px"
+        :cell-style="{ textAlign: 'center' }">
-    >
+        <el-table-column type="index" label="#" width="50" />
-      <el-table ref="tableData2" border @current-change="handleCurrentChange2" :data="tableData2" max-height="480" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
-        <el-table-column type="index" label="#" width="50"/>
         <el-table-column prop="name" label="平台类型名称" />
         <el-table-column prop="value" label="英文类型名称" />
       </el-table>
     </el-dialog>
     <!--  设备类型弹窗-->
-    <el-dialog
+    <el-dialog title="请选择设备类型" :visible.sync="dialog3" width="1000px">
-      title="请选择设备类型"
+      <el-table ref="tableData3" border @current-change="handleCurrentChange3" :data="tableData3" max-height="480"
-      :visible.sync="dialog3"
+        :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
-      width="1000px"
+        :cell-style="{ textAlign: 'center' }">
-      >
+        <el-table-column type="index" label="#" width="50" />
-      <el-table ref="tableData3" border @current-change="handleCurrentChange3" :data="tableData3" max-height="480" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
-        <el-table-column type="index" label="#" width="50"/>
         <el-table-column prop="name" label="设备类型名称" />
         <el-table-column prop="value" label="英文名称" />
       </el-table>
     </el-dialog>
     <!--  数据样品类型弹窗-->
-    <el-dialog
+    <el-dialog title="请选择数据样品类型" :visible.sync="dialog4" width="1000px">
-      title="请选择数据样品类型"
+      <el-table ref="tableData4" border @current-change="handleCurrentChange4" :data="tableData4" max-height="480"
-      :visible.sync="dialog4"
+        :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
-      width="1000px"
+        :cell-style="{ textAlign: 'center' }">
-      >
+        <el-table-column type="index" label="#" width="50" />
-      <el-table ref="tableData4" border @current-change="handleCurrentChange4" :data="tableData4" max-height="480" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
-        <el-table-column type="index" label="#" width="50"/>
         <el-table-column prop="name" label="数据样品类型类型名称" />
         <el-table-column prop="value" label="英文名称" />
       </el-table>
     </el-dialog>
     <!--  航次信息弹窗-->
-    <el-dialog
+    <el-dialog title="航次信息" :visible.sync="dialog5" width="800px">
-      title="航次信息"
-      :visible.sync="dialog5"
-      width="800px"
-    >
       <div class="detail_b">
         <h3 style="padding-bottom: 10px;">{{ voyageInfo.voyage_name }}</h3>
         <p>{{ voyageInfo.voyage_remark }}</p>
@@ -240,6 +236,10 @@ import Cookies from 'js-cookie'
 import {
   setImageryViewModels
 } from '@/utils/common'
+import Vue from 'vue'
+import { loadVectorLayer } from '@/utils/vector-layer-utils'
+import { ColorGenerator } from '@/utils/color-generator';
+import { handleWheel } from "@/utils/mapbox-utils";
 
 const Cesium = window.Cesium
 export default {
@@ -362,7 +362,8 @@ export default {
   },
   mounted() {
     this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-    this.initCesium()
+    this.initMapbox()
+    // this.initCesium()
   },
   methods: {
     // 获取菜单
@@ -452,17 +453,27 @@ export default {
         const arr = res.page.records
         if (this.radio === '航次') {
           if (arr.length) {
+            let i = 0;
+            const colors = ColorGenerator.generateDivergingColors(arr.length);
             arr.forEach(item => {
               item.highlight = false
               item.show = true
-              this.addSingleLineImg(item.voyage_name, null)
+              // this.addSingleLineImg(item.voyage_name, null)
+              // 加载轨迹图层
+              loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
+              i++;
             })
           }
           this.dataList = arr
         }
         if (this.radio === '数据样品集') {
+          try {
             this.getDataPoints(arr)
           }
+          catch (err) {
+            console.log(err);
+          }
+        }
       })
     },
     // 添加高亮图层
@@ -481,8 +492,8 @@ export default {
       this.dataList[i].highlight = true;
     },
     // 清除高亮
-    clearHighlight() {
+    clearHighlight(voyageName, i) {
-      this.dataList.map(item => {item.highlight = false})
+      this.dataList.map(item => { item.highlight = false })
       // 移除地图上的高亮图层
       if (this.highlightLayer) {
         this.viewer.imageryLayers.remove(this.highlightLayer);
@@ -491,7 +502,13 @@ export default {
     },
     // 显示
     addSingleLineImg(voyageName, i) {
-
+      if (i !== null) {
+        this.dataList[i].show = true;
+      }
+      // 显示图层
+      Vue.config.maps["dataSearch"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "visible");
+      Vue.config.maps["dataSearch"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "visible");
+      return;
       // 检查该航次图层是否已存在，避免重复添加
       if (this.trackLayerMap[voyageName]) {
         console.warn(`航次 ${voyageName} 的轨迹图层已存在`);
@@ -518,6 +535,16 @@ export default {
 
     // 隐藏
     removeSingleLineImg(voyageName, i) {
+      if (i !== null) {
+        this.dataList[i].show = false;
+      }
+      // 隐藏图层
+      // let visibility = Vue.config.maps["dataSearch"].getLayoutProperty(`vector-${voyageName}-symbol`, "visibility");
+      // visibility = visibility == "visible" ? "none" : "visible";
+      Vue.config.maps["dataSearch"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "none");
+      Vue.config.maps["dataSearch"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "none");
+      return;
+
       const layerInstance = this.trackLayerMap[voyageName];
       if (layerInstance) {
         // 从Cesium的imageryLayers中移除该图层
@@ -581,7 +608,7 @@ export default {
     },
     // 清除所有轨迹图层
     clearAll() {
-      this.clearHighlight()
+      // this.clearHighlight()
       if (this.trackLayerMap.length) {
         this.trackLayerMap.forEach(layer => {
           this.viewer.imageryLayers.remove(layer);
@@ -597,9 +624,15 @@ export default {
     // 获取数据样品集坐标点位
     getDataPoints(arr) {
       if (!arr.length) return false
+      let i = 0;
+      const colors = ColorGenerator.generateDivergingColors(arr.length);
       arr.forEach(item => {
-        this.addSingleLineImg(item.voyage_name, null)
+        // this.addSingleLineImg(item.voyage_name, null)
-        this.divingImage(item)
+        // 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
+        // loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
+        i++;
+        // this.dataList[i].show = true;
+        // this.divingImage(item)
       })
       const voyageList = arr
       voyageList.map(item => {
@@ -610,8 +643,14 @@ export default {
           }).then(res => {
             item.sampleArray = res.array
             if (res.array.length) {
+              let i = 0;
+              const colors = ColorGenerator.generateDivergingColors(res.array.length);
               res.array.forEach(sample => {
-                this.sampleLineImage(sample)
+                console.log(sample);
+                // this.sampleLineImage(sample)
+                // 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
+                // loadVectorLayer(sample.sample_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
+                i++;
               })
             }
           })
@@ -624,8 +663,13 @@ export default {
             item.sampleArray = res.array
             // 格式化坐标点
             if (res.array.length) {
+              let i = 0;
+              const colors = ColorGenerator.generateDivergingColors(res.array.length);
               res.array.forEach(sample => {
-                this.sampleLineImage(sample)
+                // this.sampleLineImage(sample)
+                // 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
+                // loadVectorLayer(sample.sample_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
+                i++;
               })
             }
           })
@@ -635,6 +679,91 @@ export default {
       console.log(this.dataList)
     },
 
+    // 初始化 mapbox
+    initMapbox() {
+      window.mapboxgl.accessToken = 'pk.eyJ1IjoicWRod2kiLCJhIjoiY2xiaXppcjEyMGNhMjNwbzVrcHl4d20zOSJ9.0ETMJM3-zllFh2GRrRVUZg'
+      const map = new window.mapboxgl.Map({
+        container: 'cesiumContainerData',
+        // style: 'mapbox://styles/mapbox/standard',
+        style: {
+          "version": 8,
+          "name": "default_style",
+          // mapbox地图使用的图标
+          "sprite": `${Vue.config.baseUrl}/oe/${Vue.config.wwwrootBaseUrl}/sprites/sprite`,
+          // 使用官方标注字体（需联网）
+          "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
+          // 自部署标注字体（无需联网），glyphs 前有两个斜杠时，可能导致404
+          // "glyphs": `${Vue.config.baseUrl}/oe/${Vue.config.wwwrootBaseUrl}/glyphs/{fontstack}/{range}.pbf`,
+          "sources": {
+            "影像地图": {
+              "type": "raster",
+              "tiles": [`${Vue.config.baseUrl}/geoserver/gwc/service/wmts/rest/ougp:world/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=image/jpeg`],
+              "tileSize": 256,
+              // "minzoom": 0,
+              // "maxzoom": baseMapMaxZoom
+            }
+          },
+          "layers": [
+            {
+              "id": "影像地图",
+              "type": "raster",
+              "source": "影像地图",
+              "layout": { visibility: "visible" },
+              // "minzoom": 0,
+              // "maxzoom": baseMapMaxZoom
+            }
+          ]
+        },
+        config: {
+          basemap: {
+            theme: 'monochrome',
+            lightPreset: 'night'
+          }
+        },
+        zoom: 5,
+        center: [113, 15.5],
+        minZoom: 2,
+        maxZoom: 29,
+        trackResize: true,
+        scrollZoom: false, // 禁用滚轮缩放
+        // 地图默认字体
+        localIdeographFontFamily: "Microsoft YoHei, 'Noto Sans', 'Noto Sans CJK SC', sans-serif",
+        pitch: 0,
+        bearing: 0,
+        // maxBounds: [[-180, -90], [180, 90]],// Set the map's geographical boundaries.
+        antialias: true,
+        attributionControl: false,
+        boxZoom: true,//如果为true，则启用了“缩放框”交互，按住shift并在地图上拖框放大
+        preserveDrawingBuffer: false,//如果为true，地图的canvas可以使用导出到png，通过map.getCanvas().toDataURL()。默认为false，会提高地图性能。
+        projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
+      });
+      Vue.config.maps["dataSearch"] = map;
+
+      // 确保窗口大小改变时，地图能正确铺满容器
+      window.addEventListener('resize', (event) => {
+        map.resize();
+        // // maps.forEach((key: string, value: any) => {
+        // //     console.log(`${key}: ${value}`);
+        // // });
+        // for (let [key, value] of Object.entries(maps)) {
+        //   // value.resize();
+        // }
+        // Object.values(maps).forEach((map) => {
+        //   map.resize();
+        // });
+      });
+
+      handleWheel("dataSearch");
+
+      map.on('load', () => {
+        // 加载海岸线
+        loadVectorLayer("GSHHS_f_L1", ["line"], ["#5c71c3"], "visible", "dataSearch", 'ougp');
+        // 加载等深线
+        // loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "visible", "dataSearch", 'ougp');
+        // loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "visible", "dataSearch", 'ougp');
+      });
+    },
+
     // 初始化cesium
     initCesium() {
       Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
@@ -723,7 +852,7 @@ export default {
     },
     turnDeatilPage(item) {
       this.dialog5 = true
-      regInfo({voyage_name: item.voyage_name}).then(res => {
+      regInfo({ voyage_name: item.voyage_name }).then(res => {
         this.voyageInfo = res.map.voyage
       })
     },
@@ -738,9 +867,17 @@ export default {
     },
     shousuo() {
       this.show = true
+      // 等待布局变化完成后触发地图 resize
+      setTimeout(() => {
+        Vue.config.maps["dataSearch"].resize();
+      }, 10);
     },
     toshow() {
       this.show = false
+      // 等待布局变化完成后触发地图 resize
+      setTimeout(() => {
+        Vue.config.maps["dataSearch"].resize();
+      }, 10);
     },
     // 展开数据样品列表
     openList(item, type) {
@@ -782,6 +919,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
+// #cesiumContainerData {
+//   // position: absolute;
+//   left: 0px;
+//   top: 0px;
+//   bottom: 0px;
+//   right: 0px;
+//   padding: 0px;
+//   margin: 0px;
+//   width: 100%;
+//   height: 100vh;
+// }
+
 .shuju {
   width: 100%;
   height: 100%;
@@ -1034,7 +1183,7 @@ export default {
         position: absolute;
         bottom: 0;
         right: 20px;
-        color: rgba(255,255, 255, 0.8);
+        color: rgba(255, 255, 255, 0.8);
       }
     }
   }