From 220da59e6237317f10926c59a7051d07017b7539 Mon Sep 17 00:00:00 2001
From: hym <hym@idsse.ac.cn>
Date: Fri, 21 Nov 2025 23:09:27 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=90=AF=E7=94=A8=20mapbox?=
 =?UTF-8?q?=20=E5=9C=B0=E5=9B=BE=E6=8E=A7=E4=BB=B6=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=9B=B8=E5=85=B3=E4=BA=A4=E4=BA=92=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home.vue | 192 ++++++++++++++++++++++++++++++++-------------
 1 file changed, 136 insertions(+), 56 deletions(-)

diff --git a/src/views/home.vue b/src/views/home.vue
index f4149cf..1c8c96f 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -65,35 +65,19 @@
       <div class="guiji_2">
         <div id="cesiumContainer" ref="cesiumContainer"
           onmouseleave="document.getElementById('mouseWheelTip').style.display = 'none'"
-          style="height: 100%;width:100%;">
+          onmouseenter="document.getElementById('mouseWheelTip').style.display = ''" 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"
-          >
+          <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)"
-              >
+              <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 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>
@@ -214,37 +198,38 @@
       </div>
     </div>
 
-<!--    <div class="gongju">-->
-<!--      <div class="gongju_top">-->
-<!--        <img src="../../static/images/shuju5.png" alt="">-->
-<!--      </div>-->
-<!--      <div class="gongju_con">-->
-<!--        <ul>-->
-<!--          <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
-<!--            <img src="../../static/images/mofang.png" alt="">-->
-<!--            <p>blast基因分析工具</p>-->
-<!--          </li>-->
-<!--          <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
-<!--            <img src="../../static/images/mofang.png" alt="">-->
-<!--            <p>温盐深分析工具</p>-->
-<!--          </li>-->
-<!--          <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
-<!--            <img src="../../static/images/mofang.png" alt="">-->
-<!--            <p>影像数据物种智能识别</p>-->
-<!--          </li>-->
-<!--          <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
-<!--            <img src="../../static/images/mofang.png" alt="">-->
-<!--            <p>海洋物理生态耦合模式分析</p>-->
-<!--          </li>-->
-<!--        </ul>-->
-<!--      </div>-->
-<!--    </div>-->
+    <!--    <div class="gongju">-->
+    <!--      <div class="gongju_top">-->
+    <!--        <img src="../../static/images/shuju5.png" alt="">-->
+    <!--      </div>-->
+    <!--      <div class="gongju_con">-->
+    <!--        <ul>-->
+    <!--          <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
+    <!--            <img src="../../static/images/mofang.png" alt="">-->
+    <!--            <p>blast基因分析工具</p>-->
+    <!--          </li>-->
+    <!--          <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
+    <!--            <img src="../../static/images/mofang.png" alt="">-->
+    <!--            <p>温盐深分析工具</p>-->
+    <!--          </li>-->
+    <!--          <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
+    <!--            <img src="../../static/images/mofang.png" alt="">-->
+    <!--            <p>影像数据物种智能识别</p>-->
+    <!--          </li>-->
+    <!--          <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
+    <!--            <img src="../../static/images/mofang.png" alt="">-->
+    <!--            <p>海洋物理生态耦合模式分析</p>-->
+    <!--          </li>-->
+    <!--        </ul>-->
+    <!--      </div>-->
+    <!--    </div>-->
 
     <Footer />
   </div>
 </template>
 
 <script>
+import Vue from 'vue'
 import Footer from '../components/public/Footer'
 import { getVoyage, statisticsNums } from '../api/home'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
@@ -253,6 +238,9 @@ import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer'
 import {
   modifyCesiumMouseWheel, setImageryViewModels
 } from '@/utils/common'
+import { loadVectorLayer } from '@/utils/vector-layer-utils'
+import { ColorGenerator } from '@/utils/color-generator';
+import { handleWheel } from "@/utils/mapbox-utils";
 
 const Cesium = window.Cesium
 
@@ -336,7 +324,7 @@ export default {
   },
   mounted() {
     this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-    this.initCesium()
+    this.initMapbox()
   },
   methods: {
     // 查询航次列表
@@ -345,7 +333,16 @@ export default {
         start: 0,
         limit: 10
       }).then(res => {
-        this.voyageList = res.page.records
+        this.voyageList = res.page.records;
+
+        let i = 0;
+        const colors = ColorGenerator.generateDivergingColors(this.voyageList.length);
+        this.voyageList.forEach(element => {
+          // 加载轨迹图层
+          loadVectorLayer(element.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "home", "dsds");
+          i++;
+        });
+
         this.$nextTick(() => {
           // 默认全选当前页
           this.$refs.multipleTable.toggleAllSelection()
@@ -353,6 +350,77 @@ export default {
       })
     },
 
+    // 初始化 mapbox
+    initMapbox() {
+      window.mapboxgl.accessToken = 'pk.eyJ1IjoicWRod2kiLCJhIjoiY2xiaXppcjEyMGNhMjNwbzVrcHl4d20zOSJ9.0ETMJM3-zllFh2GRrRVUZg'
+      const map = new window.mapboxgl.Map({
+        container: 'cesiumContainer',
+        // 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": ["https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"],
+              "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["home"] = map;
+
+      handleWheel("home");
+
+      map.on('load', () => {
+        // 加载海岸线
+        // loadVectorLayer("GSHHS_f_L1", ["line"], ["#FEFEFE"], "home", 'ougp');
+        // 加载等深线
+        loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "none", "home", 'ougp');
+        loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "none", "home", 'ougp');
+      });
+    },
+
     // 初始化cesium
     initCesium() {
       Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
@@ -432,6 +500,14 @@ export default {
     },
     // 行点击事件处理
     handleRowClick(row, column, event) {
+      // 原高亮逻辑改为图层显示/隐藏控制
+      let visibility = Vue.config.maps["home"].getLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility");
+      visibility = visibility == "visible" ? "none" : "visible";
+      Vue.config.maps["home"].setLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility", visibility);
+      Vue.config.maps["home"].setLayoutProperty(`vector-${row.voyage_name}-line`, "visibility", visibility);
+      this.$refs.multipleTable.toggleRowSelection(row);
+      return;
+
       // 如果点击的是当前已选中的行，则取消选择
       if (this.currentVoyage === row.voyage_name) {
         this.clearHighlight();
@@ -492,7 +568,9 @@ export default {
 
       // 移除不再需要的轨迹图层
       voyagesToRemove.forEach(voyage => {
-        this.removeSingleLineImg(voyage);
+        // this.removeSingleLineImg(voyage);
+        Vue.config.maps["home"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "none");
+        Vue.config.maps["home"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "none");
       });
 
       // 添加新选择的轨迹图层
@@ -500,7 +578,9 @@ export default {
         // 从val中找出对应航次的完整数据项
         const correspondingItem = val.find(item => item.voyage_name === voyage);
         if (correspondingItem) {
-          this.addSingleLineImg(correspondingItem);
+          // this.addSingleLineImg(correspondingItem);
+          Vue.config.maps["home"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "visible");
+          Vue.config.maps["home"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "visible");
         }
       });
 
@@ -517,7 +597,6 @@ export default {
         return;
       }
 
-      // 创建轨迹影像图层
       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}`,
@@ -552,10 +631,12 @@ export default {
       const index = this.selectedDepths.indexOf(depth);
       if (index > -1) {
         this.selectedDepths.splice(index, 1); // 如果已选中，则移除
-        this.removeSingleContourLine(depth); // 移除指定深度的单条等深线
+        // this.removeSingleContourLine(depth); // 移除指定深度的单条等深线
+        Vue.config.maps["home"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "none");
       } else {
         this.selectedDepths.push(depth); // 如果未选中，则添加
-        this.addSingleContourLine(depth); // 添加指定深度的单条等深线
+        // this.addSingleContourLine(depth); // 添加指定深度的单条等深线
+        Vue.config.maps["home"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "visible");
       }
     },
     // 添加单条指定深度的等深线
@@ -1356,8 +1437,7 @@ export default {
           justify-content: center;
 
           img {
-            width: auto;
-            height: auto;
+            width: auto;  height: auto;
             display: block;
             margin-bottom: 20px;
           }