1.首页调整为显示最近的10个航次；

2.地图右上角增加小图标（船），鼠标滑动到图标上后显示这10个航次的列表；
3.点击：记录高亮、移除其他高亮图层、加载对应的航次高亮图层、，再次点击，取消航次记录高亮，移除该航次高亮突出;
4.Checkbox框：选中代表该航次图层显示在地图上，取消则隐藏该航次图层。默认10个航次全部选中;
5.增加4500米、6000米等深线按钮，点击触发：加载/取消对应的等深线图层

config/index.js

@@ -5,6 +5,7 @@
 const path = require('path')
 
 module.exports = {
+  lintOnSave: false,
   dev: {
 
     // Paths
@@ -26,7 +27,7 @@ module.exports = {
       },
       '/geoserver': {
         // target: 'http://120.48.105.88', // 线上
-        target: 'http://124.16.219.154:8080', // 测试环境
+        target: 'http://124.222.8.13:9801', // 测试环境
         changeOrigin: true, // 是否跨域
         secure: false, // 是否使用https
         pathRewrite: {

src/api/home.js

@@ -55,10 +55,11 @@ export function saveVisits(data) {
 // }
 
 // 航次列表
-export function getVoyage() {
+export function getVoyage(query) {
   return request({
     url: '/voyage/reg/page.htm',
-    method: 'get'
+    method: 'get',
+    params: query
   })
 }
 

src/views/home.vue

@@ -63,30 +63,44 @@
         <img src="../../static/images/guiji.png" alt="">
       </div>
       <div class="guiji_2">
-        <!-- <img src="../../static/images/guiji_1.jpg" alt="" /> -->
-        <div class="daohang">
-          <ul>
-            <li>
-              <a @click="onAll">All</a>
-            </li>
-            <li>
-              <a @click="clearAll">clear</a>
-            </li>
-            <li
-              v-for="(item, index) in voyageList"
-              :key="index"
-              :class="chooseIndex === index ? 'active' : ''"
-              @click="toChoose(item, index)"
-            >
-              <a>{{ item.voyage_name }}</a>
-            </li>
-          </ul>
-        </div>
         <div id="cesiumContainer" ref="cesiumContainer"
           onmouseleave="document.getElementById('mouseWheelTip').style.display = 'none'"
           style="height: 100%;width:100%;">
           <div class="son" style="display: none;">弹框插槽</div>
           <div id="mouseWheelTip" style="display: none;">地图缩放：按下 Ctrl + 鼠标滚轮</div>
+          <el-popover
+            placement="left-start"
+            title="航次列表"
+            width="300"
+            trigger="hover"
+          >
+            <div class="contour-line">
+              <span>等深线：</span>
+              <el-button
+                size="mini"
+                v-for="depth in depthOptions"
+                :key="depth"
+                :type="selectedDepths.includes(depth) ? 'primary' : ''"
+                @click="toggleDepth(depth)"
+              >
+                {{ depth }}米
+              </el-button>
+            </div>
+            <el-table
+              ref="multipleTable"
+              :data="voyageList"
+              @selection-change="handleSelectionChange"
+              @row-click="handleRowClick"
+              highlight-current-row
+              :current-row-key="currentVoyage"
+            >
+              <el-table-column type="selection" width="50" />
+              <el-table-column property="voyage_name" label="航次" />
+            </el-table>
+            <div class="right-top" slot="reference">
+              <img class="boat" src="../../static/images/boat_icon.png" alt="">
+            </div>
+          </el-popover>
         </div>
       </div>
     </div>
@@ -232,7 +246,7 @@
 
 <script>
 import Footer from '../components/public/Footer'
-import { getVoyage, getVoyageLine, getParamsList, statisticsNums } from '../api/home'
+import { getVoyage, statisticsNums } from '../api/home'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/swiper-bundle.css'
 import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer'
@@ -290,19 +304,21 @@ export default {
           }
         }
       },
-      chooseIndex: -1,
+      voyageList: [], // 航次列表数据
-      voyageList: [],
+      currentVoyage: null, // 当前选中的航次名称
+      highlightLayer: null, // 存储当前高亮图层实例
       dataUpdateList: [],
       sampleDataUpdateList: [],
       viewer: null,
       // 地图图层基础地址
-      CesiumHostAddr: '',
+      CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
       // 保存自定义底图
       imageryViewModels: [],
-      // 保存轨迹图层
+      multipleSelection: [], // 当前选中的航次数组
-      trackLineLayers: [],
+      trackLayerMap: {}, // 存储每个航次对应的轨迹图层实例 { voyage_name: layerInstance }
-      // 记录已渲染的轨迹
+      depthOptions: [4500, 6000], // 可扩展更多深度值
-      rendered: []
+      selectedDepths: [], // 存储当前选中的深度值
+      contourLayerMap: {}, // 改为对象形式，以深度值作为key存储对应的图层实例
     }
   },
 
@@ -313,35 +329,26 @@ export default {
   },
   created() {
     this.getVoyageList()
-    this.getParams()
     this.getStatisticsNums()
     this.dataUpdate()
     this.sampleDataUpdate()
   },
   mounted() {
-
+    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
+    this.initCesium()
   },
   methods: {
-    // 获取从参数列表
-    getParams() {
-      getParamsList().then(res => {
-        const arr = res.array
-        if (arr.length) {
-          arr.forEach(item => {
-            if (item.param_name === 'CesiumHostAddr') {
-              // this.CesiumHostAddr = item.param_value
-              this.CesiumHostAddr = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/tiles/`
-              this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-              this.initCesium()
-            }
-          })
-        }
-      })
-    },
     // 查询航次列表
     getVoyageList() {
-      getVoyage().then(res => {
+      getVoyage({
+        start: 0,
+        limit: 10
+      }).then(res => {
         this.voyageList = res.page.records
+        this.$nextTick(() => {
+          // 默认全选当前页
+          this.$refs.multipleTable.toggleAllSelection()
+        })
       })
     },
 
@@ -421,60 +428,170 @@ export default {
         }
       )
       this.viewer.imageryLayers.addImageryProvider(shipline)
-      // 增加6000米等深线
+    },
-      const contour6000 = new Cesium.WebMapTileServiceImageryProvider(
+    // 行点击事件处理
-        {
+    handleRowClick(row, column, event) {
-          url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:contour6000/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
+      // 如果点击的是当前已选中的行，则取消选择
-          layer: 'ougp:contour6000',
+      if (this.currentVoyage === row.voyage_name) {
-          style: 'default',
+        this.clearHighlight();
-          format: 'image/png',
+        return;
-          tileMatrixSetID: 'EPSG:4326',
+      }
-          tilingScheme: new Cesium.GeographicTilingScheme()
+
+      // 设置新的当前选中航次
+      this.currentVoyage = row.voyage_name;
+
+      // 先移除可能存在的旧高亮图层
+      if (this.highlightLayer) {
+        this.viewer.imageryLayers.remove(this.highlightLayer);
+        this.highlightLayer = null;
+      }
+
+      // 加载新高亮图层
+      this.addHighlightLayer(row.voyage_name);
+    },
+
+    // 添加高亮图层
+    addHighlightLayer(voyageName) {
+      const highlightLayer = new Cesium.WebMapTileServiceImageryProvider({
+        url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${voyageName}-highlight/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
+        layer: `dsds:${voyageName}-highlight`,
+        style: 'default',
+        format: 'image/png',
+        tileMatrixSetID: 'EPSG:4326',
+        tilingScheme: new Cesium.GeographicTilingScheme()
+      });
+
+      this.highlightLayer = this.viewer.imageryLayers.addImageryProvider(highlightLayer);
+    },
+
+    // 清除高亮
+    clearHighlight() {
+      // 移除地图上的高亮图层
+      if (this.highlightLayer) {
+        this.viewer.imageryLayers.remove(this.highlightLayer);
+        this.highlightLayer = null;
+      }
+
+      // 清除表格高亮
+      this.currentVoyage = null;
+
+      // 如果需要清除行高亮，可以调用El-Table的方法
+      this.$refs.multipleTable.setCurrentRow(null);
+    },
+    // 处理表格选择项变化
+    handleSelectionChange(val) {
+      // 获取新旧选中的航次名称数组
+      const newVoyages = val.map(item => item.voyage_name);
+      const oldVoyages = this.multipleSelection.map(item => item.voyage_name);
+
+      // 找出需要新增的航次（在新数组不在旧数组）
+      const voyagesToAdd = newVoyages.filter(voyage => !oldVoyages.includes(voyage));
+      // 找出需要移除的航次（在旧数组不在新数组）
+      const voyagesToRemove = oldVoyages.filter(voyage => !newVoyages.includes(voyage));
+
+      // 移除不再需要的轨迹图层
+      voyagesToRemove.forEach(voyage => {
+        this.removeSingleLineImg(voyage);
+      });
+
+      // 添加新选择的轨迹图层
+      voyagesToAdd.forEach(voyage => {
+        // 从val中找出对应航次的完整数据项
+        const correspondingItem = val.find(item => item.voyage_name === voyage);
+        if (correspondingItem) {
+          this.addSingleLineImg(correspondingItem);
         }
-      )
+      });
-      this.viewer.imageryLayers.addImageryProvider(contour6000)
+
+      // 更新当前选中项
+      this.multipleSelection = val;
     },
-    // 清除所有轨迹图层
+    // 添加单个航次的轨迹图层
-    clearAll() {
+    addSingleLineImg(item) {
-      this.chooseIndex = -1
+      const voyageName = item.voyage_name;
-      if (this.trackLineLayers.length) {
+
-        this.trackLineLayers.forEach(line => {
+      // 检查该航次图层是否已存在，避免重复添加
-          this.viewer.imageryLayers.remove(line)
+      if (this.trackLayerMap[voyageName]) {
-        })
+        console.warn(`航次 ${voyageName} 的轨迹图层已存在`);
+        return;
       }
-      this.rendered = []
+
+      // 创建轨迹影像图层
+      const trackLine = new Cesium.WebMapTileServiceImageryProvider({
+        url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${voyageName}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
+        layer: `dsds:${voyageName}`,
+        style: 'default',
+        format: 'image/png',
+        tileMatrixSetID: 'EPSG:4326',
+        tilingScheme: new Cesium.GeographicTilingScheme()
+      });
+
+      // 添加图层到Cesium并存储引用
+      const layerInstance = this.viewer.imageryLayers.addImageryProvider(trackLine);
+      this.trackLayerMap[voyageName] = layerInstance; // 以航次名为键存储图层实例
     },
-    // 全部轨迹
+
-    onAll() {
+    // 移除单个航次的轨迹图层
-      if (this.voyageList.length) {
+    removeSingleLineImg(voyageName) {
-        this.voyageList.forEach(ele => {
+      const layerInstance = this.trackLayerMap[voyageName];
-          this.toChoose(ele, -1)
+      if (layerInstance) {
-        })
+        // 从Cesium的imageryLayers中移除该图层
+        this.viewer.imageryLayers.remove(layerInstance);
+        // 删除映射表中对该图层的引用
+        delete this.trackLayerMap[voyageName];
+      } else {
+        console.warn(`未找到航次 ${voyageName} 的轨迹图层`);
       }
     },
-    // 选择轨迹
+    toggleDepth(depth) {
-    toChoose(item, index) {
+      // **方案1: 如果要求同时只能有一个按钮被选中**
-      this.chooseIndex = index
+      // this.selectedDepths = [depth]; // 数组只保留当前点击的深度
-      // 查询轨迹是否渲染过，避免重复渲染
+
-      if (this.rendered.length) {
+      // **方案2: 允许同时多个按钮被选中，点击切换自身状态**
-        const isRendered = this.rendered.find(ele => ele === item.voyage_name)
+      const index = this.selectedDepths.indexOf(depth);
-        if (isRendered) return
+      if (index > -1) {
+        this.selectedDepths.splice(index, 1); // 如果已选中，则移除
+        this.removeSingleContourLine(depth); // 移除指定深度的单条等深线
+      } else {
+        this.selectedDepths.push(depth); // 如果未选中，则添加
+        this.addSingleContourLine(depth); // 添加指定深度的单条等深线
+      }
+    },
+    // 添加单条指定深度的等深线
+    addSingleContourLine(deep) {
+      // 先检查该深度的图层是否已存在，避免重复创建
+      if (this.contourLayerMap[deep]) {
+        // 图层已存在，只需将其设置为显示（如果需要控制显示隐藏的话）
+        console.warn(`等深线 ${deep} 米图层已存在`);
+        return;
+      }
+
+      const contour = new Cesium.WebMapTileServiceImageryProvider({
+        url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/ougp:contour${deep}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
+        layer: `ougp:contour${deep}`,
+        style: 'default',
+        format: 'image/png',
+        tileMatrixSetID: 'EPSG:4326',
+        tilingScheme: new Cesium.GeographicTilingScheme()
+      });
+
+      // 添加图层并存储引用
+      const layerInstance = this.viewer.imageryLayers.addImageryProvider(contour);
+      this.contourLayerMap[deep] = layerInstance; // 以深度值为键存储图层实例
+    },
+
+    // 移除单条指定深度的等深线
+    removeSingleContourLine(deep) {
+      // 根据深度值从映射表中获取对应的图层实例
+      const layerInstance = this.contourLayerMap[deep];
+      if (layerInstance) {
+        // 从Cesium的imageryLayers中移除该图层
+        this.viewer.imageryLayers.remove(layerInstance);
+        // 删除映射表中对该图层的引用
+        delete this.contourLayerMap[deep];
+      } else {
+        console.warn(`未找到 ${deep} 米等深线图层`);
       }
-      // 轨迹影像参数
-      const trackLine = new Cesium.WebMapTileServiceImageryProvider(
-        {
-          url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.voyage_name}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
-          layer: `dsds:${item.voyage_name}`,
-          style: 'default',
-          format: 'image/png',
-          tileMatrixSetID: 'EPSG:4326',
-          tilingScheme: new Cesium.GeographicTilingScheme()
-        }
-      )
-      const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
-      this.trackLineLayers.push(trackLineLayer)
-      // 记录已渲染的轨迹，防止重复渲染
-      this.rendered.push(item.voyage_name)
     },
     // 统计数据
     getStatisticsNums() {
@@ -1289,6 +1406,23 @@ export default {
   position: relative;
 }
 
+.right-top {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 8px;
+}
+
+.boat {
+  border-radius: 50%;
+}
+
 .text-ellipsis--3-lines {
   /* 限制显示的行数 */
   -webkit-line-clamp: 3;
@@ -1301,4 +1435,16 @@ export default {
   /* 文本溢出时显示省略号 */
   text-overflow: ellipsis;
 }
+
+/* 增强当前行高亮效果 */
+.el-table__body tr.current-row>td {
+  background-color: #ecf5ff !important;
+  color: #409eff;
+}
+
+/* 鼠标悬停效果 */
+.el-table__body tr:hover>td {
+  background-color: #f5f7fa !important;
+  cursor: pointer;
+}
 </style>