更新 hov 统计页面相关逻辑

src/views/statistics/HovStatistics.vue

@@ -25,11 +25,11 @@
     <div class="map-module">
       <div class="bezel">
         <div class="map-title">下潜单位</div>
-        <div id="baiduCesiumContainer" ref="baiduCesiumContainer" style="height: 100%;width:100%;" />
+        <div id="workUnitMap_hov" ref="workUnitMap_hov" style="height: 100%;width:100%;" />
       </div>
       <div class="bezel">
         <div class="map-title">下潜地图</div>
-        <div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;" />
+        <div id="voyageMap_hov" ref="voyageMap_hov" style="height: 100%;width:100%;" />
       </div>
     </div>
     <!-- echarts板块-->
@@ -89,6 +89,9 @@ import PieChart from './components/PieChart.vue'
 import { setImageryViewModels } from '../../utils/common'
 import { reportList, platformHov, hovUnit, hovUnitYear, hovDiving } from '../../api/statistics'
 import { filterDictItems } from '../../utils/index'
+import {initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
+import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
+import { ColorGenerator } from '@/utils/color-generator';
 const Cesium = window.Cesium
 
 export default {
@@ -146,9 +149,24 @@ export default {
     this.getChartBar({ year: '2025' })
   },
   mounted() {
-    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
+     initMapbox("workUnitMap_hov", {
-    this.initCesium() // 初始化航次地图
+      tileKey: "gaode",
-    this.initBaiduCesium() // 初始化参航单位地图
+      zoom: 3,
+      center: [110, 31],
+      minZoom: 2,
+      maxZoom: 29
+    });
+    initMapbox("voyageMap_hov", {
+      tileKey: "GEBCO_basemap_NCEI",
+      zoom: 4,
+      center: [113, 15],
+      minZoom: 2,
+      maxZoom: 29
+    });
+
+   // this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
+    // this.initCesium() // 初始化航次地图
+    // this.initBaiduCesium() // 初始化参航单位地图
   },
   beforeDestroy() {
     // 清理Cesium资源
@@ -195,11 +213,32 @@ export default {
     // 下潜单位统计
     getHovUnit() {
       hovUnit().then(res => {
-        // 清除之前的标记
+        let geojson = {
-        this.clearBaiduCesiumMarkers()
+          type: "FeatureCollection",
+          features: []
+        };
+        res.array.forEach(element => {
+          geojson.features.push({
+            type: "Feature",
+            geometry: {
+              type: "Point",
+              coordinates: [element.unit_lon, element.unit_lat]
+            },
+            properties: {
+              unit_name: element.unit_name,
+              unit_type: element.unit_type,
+              create_time: element.create_time,
+              tsy_id: element.tsy_id
+            }
+          });
+        });
+        loadJsonPointFeature("workUnit", "blue", geojson, "unit_name", "workUnitMap_hov");
 
-        // 创建参航单位标记
+        // // 清除之前的标记
-        this.createBaiduCesiumMarkers(res.array)
+        // this.clearBaiduCesiumMarkers()
+
+        // // 创建参航单位标记
+        // this.createBaiduCesiumMarkers(res.array)
         const typeCount = res.array.reduce((acc, unit) => {
           const type = unit.unit_type
           acc[type] = (acc[type] || 0) + 1 // 如果类型已存在则计数+1，否则初始化为1
@@ -263,15 +302,21 @@ export default {
     // 潜次统计
     gitHovDiving(params = {}) {
       hovDiving(params).then(res => {
+        let i = 0;
+        const colors = ColorGenerator.generateDivergingColors(res.array.length);
         // 添加轨迹图层
         res.array.forEach(item => {
-          this.addSingleLineImg(item)
+          // 加载轨迹图层
+          loadVectorLayer(item.diving_sn, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_hov", "dsds");
+          i++;
+      
+          // this.addSingleLineImg(item)
         })
       })
     },
     // 初始化Cesium - 参航单位地图
     initBaiduCesium() {
-      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.baiduCesiumContainer, {
+      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_hov, {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
@@ -307,7 +352,7 @@ export default {
     // 初始化cesium
     initCesium() {
       Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
-      this.viewer = new Cesium.Viewer('cesiumContainer', {
+      this.viewer = new Cesium.Viewer('voyageMap_hov', {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,