更新底图

src/api/statistics.js

@@ -70,6 +70,26 @@ export function hovDiving(data) {
   })
 }
 
+// 遥控潜水器潜次统计
+export function rovDiving(data) {
+  return request({
+    url: '/report/platform/rov/diving.htm',
+    method: 'post',
+    type: 'application/x-www-form-urlencoded',
+    data
+  })
+}
+
+// 无人航行潜水器潜次统计
+export function auvDiving(data) {
+  return request({
+    url: '/report/platform/auv/diving.htm',
+    method: 'post',
+    type: 'application/x-www-form-urlencoded',
+    data
+  })
+}
+
 // 载人潜水器参航单位统计
 export function hovUnit(data) {
   return request({
@@ -80,6 +100,24 @@ export function hovUnit(data) {
   })
 }
 
+export function rovUnit(data) {
+  return request({
+    url: '/report/platform/rov/unit.htm',
+    method: 'post',
+    type: 'application/x-www-form-urlencoded',
+    data
+  })
+}
+
+export function auvUnit(data) {
+  return request({
+    url: '/report/platform/auv/unit.htm',
+    method: 'post',
+    type: 'application/x-www-form-urlencoded',
+    data
+  })
+}
+
 // 载人潜水器参航单位统计(年度)
 export function hovUnitYear(data) {
   return request({
@@ -90,6 +128,24 @@ export function hovUnitYear(data) {
   })
 }
 
+export function rovUnitYear(data) {
+  return request({
+    url: '/report/platform/rov/unit/year.htm',
+    method: 'post',
+    type: 'application/x-www-form-urlencoded',
+    data
+  })
+}
+
+export function auvUnitYear(data) {
+  return request({
+    url: '/report/platform/auv/unit/year.htm',
+    method: 'post',
+    type: 'application/x-www-form-urlencoded',
+    data
+  })
+}
+
 // 无人航行潜水器统计
 export function platformAuv(data) {
   return request({

src/main.js

@@ -51,3 +51,9 @@ if (Vue.config.firstRender) {
 }
 
 window.mapboxgl.accessToken = 'pk.eyJ1IjoicWRod2kiLCJhIjoiY2xiaXppcjEyMGNhMjNwbzVrcHl4d20zOSJ9.0ETMJM3-zllFh2GRrRVUZg'
+
+Vue.config.tiles = {
+  "world_horizon_1": `${Vue.config.baseUrl}/geoserver/gwc/service/wmts/rest/ougp:world_horizon_1/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=image/jpeg`,
+  "GEBCO_basemap_NCEI": "https://tiles.arcgis.com/tiles/C8EMgrsFcRFL6LrL/arcgis/rest/services/GEBCO_basemap_NCEI/MapServer/tile/{z}/{y}/{x}",
+  "gaode":"https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&scl=2&style=8&x={x}&y={y}&z={z}"
+};

src/router/index.js

@@ -379,9 +379,9 @@ export const constantRoutes = [
         }
       },
       {
-        path: 'uuv',
-        name: 'uuv',
-        component: () => import('@/views/statistics/UuvStatistics.vue'),
+        path: 'auv',
+        name: 'auv',
+        component: () => import('@/views/statistics/AuvStatistics.vue'),
         meta: {
           title: '无人潜水器汇总统计',
           icon: 'peoples',

src/utils/mapbox-utils.js

@@ -1,5 +1,96 @@
 import Vue from 'vue'
 
+export function initMapbox(mapId, options = {}) {
+    const map = new window.mapboxgl.Map({
+        container: mapId,
+        // 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.tiles[options.tileKey || "gaode"]
+                    ],
+                    "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: options.zoom || 5,
+        center: options.center || [112, 20],
+        minZoom: options.minZoom || 2,
+        maxZoom: options.maxZoom || 29,
+        trackResize: true,
+        scrollZoom: false, // 禁用滚轮缩放
+        // 地图默认字体
+        localIdeographFontFamily: "Microsoft YoHei, 'Noto Sans', 'Noto Sans CJK SC', sans-serif",
+        pitch: 0,
+        bearing: 0,
+        // // 禁用所有旋转和俯仰角控制
+        // dragRotate: false,
+        // touchZoomRotate: false,
+        // pitchWithRotate: false,
+        // 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[mapId] = 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("voyageMap_ship");
+    Vue.config.maps[mapId].scrollZoom.enable();
+    initSprites(mapId)
+
+    map.on('load', () => {
+        // 加载海岸线
+        // loadVectorLayer("GSHHS_f_L1", ["line"], ["#5c71c3"], "visible", "workUnitMap_ship", 'ougp');
+        // 加载等深线
+        // loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "visible", "workUnitMap_ship", 'ougp');
+        // loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "visible", "workUnitMap_ship", 'ougp');
+    });
+}
+
 /**
  * 获取所有图层信息
  * @param {mapboxgl.Map} map - Mapbox 地图实例
@@ -132,7 +223,7 @@ export async function triggerLayerClick(mapId, sourceLayerId, layerId, lnglat, o
 
     // 在浏览器控制台或 triggerLayerClick 中运行（替换 sourceId/sourceLayerName）
     const feats = map.querySourceFeatures(sourceId, { sourceLayer: "sample_station_TS-46-1_Ship_CTDI_SY" }) || [];
-    console.log(sourceId,">>>>>>>>>>>>>>>>>>>>sample_station_TS-46-1_Ship_CTDI_SY",' ======sample of features:', feats.slice(0, 5));
+    console.log(sourceId, ">>>>>>>>>>>>>>>>>>>>sample_station_TS-46-1_Ship_CTDI_SY", ' ======sample of features:', feats.slice(0, 5));
     console.log('props keys:', feats.slice(0, 5).map(f => Object.keys(f.properties || {})));
 
     let relatedTracks = map.querySourceFeatures(sourceId, {

src/utils/vector-layer-utils.js

@@ -464,9 +464,7 @@ export async function loadJsonLineFeature(layerId, color, geojson, mapId) {
     }
 }
 
-export async function loadJsonPointFeature(layerId, color, geojson, mapId) {
-    // console.log("layerId: ",layerId);
-
+export async function loadJsonPointFeature(layerId, color, geojson,text_field, mapId) {
     let source = Vue.config.maps[mapId].getSource(layerId);
     if (!source) {
         Vue.config.maps[mapId].addSource(layerId, {
@@ -490,7 +488,7 @@ export async function loadJsonPointFeature(layerId, color, geojson, mapId) {
                 'icon-image': 'dot.png',
                 'icon-size': 0.5,
                 // get the title name from the source's "title" property
-                'text-field': ['get', 'sample_name'],
+                'text-field': ['get', text_field],
                 'text-font': [
                     'Open Sans Semibold',
                     'Arial Unicode MS Bold'

src/views/dataSearch.vue

@@ -707,7 +707,7 @@ export default {
           "sources": {
             "影像地图": {
               "type": "raster",
-              "tiles": [`${Vue.config.baseUrl}/geoserver/gwc/service/wmts/rest/ougp:world/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=image/jpeg`],
+              "tiles": [Vue.config.tiles["GEBCO_basemap_NCEI"]],
               "tileSize": 256,
               // "minzoom": 0,
               // "maxzoom": baseMapMaxZoom

src/views/statistics/AuvStatistics.vue

@@ -5,11 +5,7 @@
         <span class="titles">{{ currentTitle }}<i class="el-icon-arrow-down el-icon--right" /></span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="全部无人航行潜水器">全部无人航行潜水器</el-dropdown-item>
-          <el-dropdown-item
-            v-for="item in titles"
-            :key="item.tsy_id"
-            :command="item.report_name"
-          >
+          <el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
             {{ item.report_name }}
           </el-dropdown-item>
         </el-dropdown-menu>
@@ -25,59 +21,34 @@
     <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_auv" ref="workUnitMap_auv" 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_auv" ref="voyageMap_auv" style="height: 100%;width:100%;" />
       </div>
     </div>
     <!-- echarts板块-->
     <div class="echarts-module">
       <div class="bezel">
-        <BarChart
-          :title="barData1.title"
-          :chart-data="barData1.salesData"
-          :categories="barData1.productCategories"
-          chart-type="single"
-        />
+        <BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
+          chart-type="single" />
       </div>
       <div class="bezel">
-        <BarChart
-          :title="barData2.title"
-          :chart-data="barData2.salesData"
-          :categories="barData2.productCategories"
-          chart-type="stacked"
-          stack-name="新增单位数"
-        />
+        <BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
+          chart-type="stacked" stack-name="新增单位数" />
       </div>
       <div class="bezel">
-        <BarChart
-          :title="barData3.title"
-          :chart-data="barData3.salesData"
-          :categories="barData3.productCategories"
-        />
+        <BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
       </div>
       <div class="bezel">
-        <BarChart
-          :title="barData4.title"
-          :chart-data="barData4.salesData"
-          :categories="barData4.productCategories"
-        />
+        <BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
       </div>
       <div class="bezel">
-        <BarChart
-          :title="barData5.title"
-          :chart-data="barData5.salesData"
-          :categories="barData5.productCategories"
-        />
+        <BarChart :title="barData5.title" :chart-data="barData5.salesData" :categories="barData5.productCategories" />
       </div>
       <div class="bezel">
-        <PieChart
-          :chart-data="pieData"
-          title="下潜单位类型"
-          chart-type="ring"
-        />
+        <PieChart :chart-data="pieData" title="下潜单位类型" chart-type="ring" />
       </div>
     </div>
   </div>
@@ -87,8 +58,11 @@
 import BarChart from './components/BarChart.vue'
 import PieChart from './components/PieChart.vue'
 import { setImageryViewModels } from '../../utils/common'
-import { reportList, platformHov, hovUnit, hovUnitYear, hovDiving } from '../../api/statistics'
+import { reportList, platformAuv, auvUnit, auvUnitYear, auvDiving } 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 {
@@ -139,16 +113,31 @@ export default {
   },
   created() {
     this.getTypeList()
-    this.getHovList()
-    this.getHovUnit()
-    this.gitHovDiving()
-    this.gitHovUnitYear()
+    this.getAuvList()
+    this.getAuvUnit()
+    this.gitAuvDiving()
+    this.gitAuvUnitYear()
     this.getChartBar({ year: '2025' })
   },
   mounted() {
-    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-    this.initCesium() // 初始化航次地图
-    this.initBaiduCesium() // 初始化参航单位地图
+    initMapbox("workUnitMap_auv", {
+      tileKey: "gaode",
+      zoom: 3,
+      center: [110, 31],
+      minZoom: 2,
+      maxZoom: 29
+    });
+    initMapbox("voyageMap_auv", {
+      tileKey: "GEBCO_basemap_NCEI",
+      zoom: 4,
+      center: [113, 15],
+      minZoom: 2,
+      maxZoom: 29
+    });
+
+    // this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
+    // this.initCesium() // 初始化航次地图
+    // this.initBaiduCesium() // 初始化参航单位地图
   },
   beforeDestroy() {
     // 清理Cesium资源
@@ -171,20 +160,20 @@ export default {
       this.currentTitle = command
       this.removeSingleLineImg()
       if (command === '全部无人航行潜水器') {
-        this.getHovList()
-        this.gitHovDiving()
-        this.gitHovUnitYear()
+        this.getAuvList()
+        this.gitAuvDiving()
+        this.gitAuvUnitYear()
         this.getChartBar({ year: '2025' })
       } else {
-        this.getHovList({ platform_name: command })
-        this.gitHovDiving({ platform_name: command })
-        this.gitHovUnitYear({ platform_name: command })
+        this.getAuvList({ platform_name: command })
+        this.gitAuvDiving({ platform_name: command })
+        this.gitAuvUnitYear({ platform_name: command })
         this.getChartBar({ year: '2025', platform_name: command })
       }
     },
     // 汇总统计数据
-    getHovList(params = {}) {
-      platformHov(params).then(res => {
+    getAuvList(params = {}) {
+      platformAuv(params).then(res => {
         const obj = res.array[0]
         this.numbers[0].value = obj.diving_total
         this.numbers[1].value = obj.driver_member_total
@@ -193,13 +182,34 @@ export default {
       })
     },
     // 下潜单位统计
-    getHovUnit() {
-      hovUnit().then(res => {
-        // 清除之前的标记
-        this.clearBaiduCesiumMarkers()
+    getAuvUnit() {
+      auvUnit().then(res => {
+        let geojson = {
+          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_auv");
 
-        // 创建参航单位标记
-        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
@@ -261,11 +271,17 @@ export default {
       }
     },
     // 潜次统计
-    gitHovDiving(params = {}) {
-      hovDiving(params).then(res => {
+    gitAuvDiving(params = {}) {
+      auvDiving(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_auv", "dsds");
+          i++;
+
+          // this.addSingleLineImg(item)
         })
       })
     },
@@ -367,8 +383,8 @@ export default {
       }
     },
     // 参潜单位年度
-    gitHovUnitYear(params = {}) {
-      hovUnitYear(params).then(res => {
+    gitAuvUnitYear(params = {}) {
+      auvUnitYear(params).then(res => {
         const originalData = res.array
         const sortedData = originalData.sort((a, b) => a.voyage_year - b.voyage_year)
         this.barData2 = {
@@ -391,7 +407,7 @@ export default {
     },
     // 柱状图数据
     getChartBar(params) {
-      platformHov(params).then(res => {
+      platformAuv(params).then(res => {
         const originalData = res.array
         const sortedData = originalData.sort((a, b) => a.year - b.year)
         this.barData1 = {
@@ -452,24 +468,29 @@ export default {
         flex-direction: column;
         justify-content: center;
         align-items: center;
+
         .value {
           font-size: 56px;
           font-weight: bold;
+
           .unit {
             font-size: 26px;
           }
         }
+
         .label {
           font-size: 18px;
         }
       }
     }
   }
+
   .map-module {
     padding: 50px 50px;
     display: flex;
     justify-content: space-between;
     gap: 50px;
+
     .bezel {
       flex: 1;
       width: 100%;
@@ -487,6 +508,7 @@ export default {
         z-index: 8888;
         font-size: 22px;
       }
+
       .map-year {
         position: absolute;
         top: 20px;
@@ -497,6 +519,7 @@ export default {
       }
     }
   }
+
   .echarts-module {
     padding: 0 50px 50px;
     display: grid;

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)
-    this.initCesium() // 初始化航次地图
-    this.initBaiduCesium() // 初始化参航单位地图
+     initMapbox("workUnitMap_hov", {
+      tileKey: "gaode",
+      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 => {
-        // 清除之前的标记
-        this.clearBaiduCesiumMarkers()
+        let geojson = {
+          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,

src/views/statistics/RovStatistics.vue

@@ -5,11 +5,7 @@
         <span class="titles">{{ currentTitle }}<i class="el-icon-arrow-down el-icon--right" /></span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="全部遥控潜水器">全部遥控潜水器</el-dropdown-item>
-          <el-dropdown-item
-            v-for="item in titles"
-            :key="item.tsy_id"
-            :command="item.report_name"
-          >
+          <el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
             {{ item.report_name }}
           </el-dropdown-item>
         </el-dropdown-menu>
@@ -25,59 +21,34 @@
     <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_rov" ref="workUnitMap_rov" 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_rov" ref="voyageMap_rov" style="height: 100%;width:100%;" />
       </div>
     </div>
     <!-- echarts板块-->
     <div class="echarts-module">
       <div class="bezel">
-        <BarChart
-          :title="barData1.title"
-          :chart-data="barData1.salesData"
-          :categories="barData1.productCategories"
-          chart-type="single"
-        />
+        <BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
+          chart-type="single" />
       </div>
       <div class="bezel">
-        <BarChart
-          :title="barData2.title"
-          :chart-data="barData2.salesData"
-          :categories="barData2.productCategories"
-          chart-type="stacked"
-          stack-name="新增单位数"
-        />
+        <BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
+          chart-type="stacked" stack-name="新增单位数" />
       </div>
       <div class="bezel">
-        <BarChart
-          :title="barData3.title"
-          :chart-data="barData3.salesData"
-          :categories="barData3.productCategories"
-        />
+        <BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
       </div>
       <div class="bezel">
-        <BarChart
-          :title="barData4.title"
-          :chart-data="barData4.salesData"
-          :categories="barData4.productCategories"
-        />
+        <BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
       </div>
       <div class="bezel">
-        <BarChart
-          :title="barData5.title"
-          :chart-data="barData5.salesData"
-          :categories="barData5.productCategories"
-        />
+        <BarChart :title="barData5.title" :chart-data="barData5.salesData" :categories="barData5.productCategories" />
       </div>
       <div class="bezel">
-        <PieChart
-          :chart-data="pieData"
-          title="下潜单位类型"
-          chart-type="ring"
-        />
+        <PieChart :chart-data="pieData" title="下潜单位类型" chart-type="ring" />
       </div>
     </div>
   </div>
@@ -87,8 +58,11 @@
 import BarChart from './components/BarChart.vue'
 import PieChart from './components/PieChart.vue'
 import { setImageryViewModels } from '../../utils/common'
-import { reportList, platformHov, hovUnit, hovUnitYear, hovDiving } from '../../api/statistics'
+import { reportList, platformRov, rovUnit, rovUnitYear, rovDiving } 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 {
@@ -139,16 +113,31 @@ export default {
   },
   created() {
     this.getTypeList()
-    this.getHovList()
-    this.getHovUnit()
-    this.gitHovDiving()
-    this.gitHovUnitYear()
+    this.getRovList()
+    this.getRovUnit()
+    this.gitRovDiving()
+    this.gitRovUnitYear()
     this.getChartBar({ year: '2025' })
   },
   mounted() {
-    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-    this.initCesium() // 初始化航次地图
-    this.initBaiduCesium() // 初始化参航单位地图
+    initMapbox("workUnitMap_rov", {
+      tileKey: "gaode",
+      zoom: 3,
+      center: [110, 31],
+      minZoom: 2,
+      maxZoom: 29
+    });
+    initMapbox("voyageMap_rov", {
+      tileKey: "GEBCO_basemap_NCEI",
+      zoom: 4,
+      center: [113, 15],
+      minZoom: 2,
+      maxZoom: 29
+    });
+
+    // this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
+    // this.initCesium() // 初始化航次地图
+    // this.initBaiduCesium() // 初始化参航单位地图
   },
   beforeDestroy() {
     // 清理Cesium资源
@@ -171,20 +160,20 @@ export default {
       this.currentTitle = command
       this.removeSingleLineImg()
       if (command === '全部遥控潜水器') {
-        this.getHovList()
-        this.gitHovDiving()
-        this.gitHovUnitYear()
+        this.getRovList()
+        this.gitRovDiving()
+        this.gitRovUnitYear()
         this.getChartBar({ year: '2025' })
       } else {
-        this.getHovList({ platform_name: command })
-        this.gitHovDiving({ platform_name: command })
-        this.gitHovUnitYear({ platform_name: command })
+        this.getRovList({ platform_name: command })
+        this.gitRovDiving({ platform_name: command })
+        this.gitRovUnitYear({ platform_name: command })
         this.getChartBar({ year: '2025', platform_name: command })
       }
     },
     // 汇总统计数据
-    getHovList(params = {}) {
-      platformHov(params).then(res => {
+    getRovList(params = {}) {
+      platformRov(params).then(res => {
         const obj = res.array[0]
         this.numbers[0].value = obj.diving_total
         this.numbers[1].value = obj.driver_member_total
@@ -193,13 +182,34 @@ export default {
       })
     },
     // 下潜单位统计
-    getHovUnit() {
-      hovUnit().then(res => {
-        // 清除之前的标记
-        this.clearBaiduCesiumMarkers()
+    getRovUnit() {
+      rovUnit().then(res => {
+        let geojson = {
+          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_rov");
 
-        // 创建参航单位标记
-        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
@@ -261,17 +271,23 @@ export default {
       }
     },
     // 潜次统计
-    gitHovDiving(params = {}) {
-      hovDiving(params).then(res => {
+    gitRovDiving(params = {}) {
+      rovDiving(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_rov", "dsds");
+          i++;
+
+          // this.addSingleLineImg(item)
         })
       })
     },
     // 初始化Cesium - 参航单位地图
     initBaiduCesium() {
-      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.baiduCesiumContainer, {
+      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_rov, {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
@@ -367,8 +383,8 @@ export default {
       }
     },
     // 参潜单位年度
-    gitHovUnitYear(params = {}) {
-      hovUnitYear(params).then(res => {
+    gitRovUnitYear(params = {}) {
+      rovUnitYear(params).then(res => {
         const originalData = res.array
         const sortedData = originalData.sort((a, b) => a.voyage_year - b.voyage_year)
         this.barData2 = {
@@ -391,7 +407,7 @@ export default {
     },
     // 柱状图数据
     getChartBar(params) {
-      platformHov(params).then(res => {
+      platformRov(params).then(res => {
         const originalData = res.array
         const sortedData = originalData.sort((a, b) => a.year - b.year)
         this.barData1 = {
@@ -452,24 +468,29 @@ export default {
         flex-direction: column;
         justify-content: center;
         align-items: center;
+
         .value {
           font-size: 56px;
           font-weight: bold;
+
           .unit {
             font-size: 26px;
           }
         }
+
         .label {
           font-size: 18px;
         }
       }
     }
   }
+
   .map-module {
     padding: 50px 50px;
     display: flex;
     justify-content: space-between;
     gap: 50px;
+
     .bezel {
       flex: 1;
       width: 100%;
@@ -487,6 +508,7 @@ export default {
         z-index: 8888;
         font-size: 22px;
       }
+
       .map-year {
         position: absolute;
         top: 20px;
@@ -497,6 +519,7 @@ export default {
       }
     }
   }
+
   .echarts-module {
     padding: 0 50px 50px;
     display: grid;

src/views/statistics/ShipStatistics.vue

@@ -5,11 +5,7 @@
         <span class="titles">{{ currentTitle }}<i class="el-icon-arrow-down el-icon--right" /></span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="全部科考船">全部科考船</el-dropdown-item>
-          <el-dropdown-item
-            v-for="item in titles"
-            :key="item.tsy_id"
-            :command="item.report_name"
-          >
+          <el-dropdown-item v-for="item in titles" :key="item.tsy_id" :command="item.report_name">
             {{ item.report_name }}
           </el-dropdown-item>
         </el-dropdown-menu>
@@ -25,72 +21,49 @@
     <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_ship" ref="workUnitMap_ship" style="height: 100%;width:100%;" />
       </div>
       <div class="bezel">
         <div class="map-title">航次地图</div>
-        <el-date-picker
-          v-model="voyageYear"
-          type="year"
-          size="mini"
-          placeholder="选择年"
-          class="map-year"
-          format="yyyy"
-          @change="selectVoyageYear"
-        />
-        <div id="cesiumContainer" ref="cesiumContainer" style="height: 100%;width:100%;" />
+        <el-date-picker v-model="voyageYear" type="year" size="mini" placeholder="选择年" class="map-year" format="yyyy"
+          @change="selectVoyageYear" />
+        <div id="voyageMap_ship" ref="voyageMap_ship" style="height: 100%;width:100%;" />
       </div>
     </div>
     <!-- echarts板块-->
     <div class="echarts-module">
       <div class="bezel">
-        <BarChart
-          :title="barData1.title"
-          :chart-data="barData1.salesData"
-          :categories="barData1.productCategories"
-          chart-type="single"
-        />
+        <BarChart :title="barData1.title" :chart-data="barData1.salesData" :categories="barData1.productCategories"
+          chart-type="single" />
       </div>
       <div class="bezel">
-        <BarChart
-          :title="barData2.title"
-          :chart-data="barData2.salesData"
-          :categories="barData2.productCategories"
-          chart-type="stacked"
-          stack-name="新增单位数"
-        />
+        <BarChart :title="barData2.title" :chart-data="barData2.salesData" :categories="barData2.productCategories"
+          chart-type="stacked" stack-name="新增单位数" />
       </div>
       <div class="bezel">
-        <BarChart
-          :title="barData3.title"
-          :chart-data="barData3.salesData"
-          :categories="barData3.productCategories"
-        />
+        <BarChart :title="barData3.title" :chart-data="barData3.salesData" :categories="barData3.productCategories" />
       </div>
       <div class="bezel">
-        <BarChart
-          :title="barData4.title"
-          :chart-data="barData4.salesData"
-          :categories="barData4.productCategories"
-        />
+        <BarChart :title="barData4.title" :chart-data="barData4.salesData" :categories="barData4.productCategories" />
       </div>
       <div class="bezel">
-        <PieChart
-          :chart-data="pieData"
-          title="参航单位类型"
-          chart-type="ring"
-        />
+        <PieChart :chart-data="pieData" title="参航单位类型" chart-type="ring" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import Vue from 'vue'
 import BarChart from './components/BarChart.vue'
 import PieChart from './components/PieChart.vue'
 import { setImageryViewModels } from '../../utils/common'
 import { reportList, shipTotal, shipUnit, shipUnitYear, shipVoyage } from '../../api/statistics'
 import { getYearRange, 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 {
@@ -153,9 +126,23 @@ export default {
     this.getChartBar({ year: '2025' })
   },
   mounted() {
-    this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
-    this.initCesium() // 初始化航次地图
-    this.initBaiduCesium() // 初始化参航单位地图
+    initMapbox("workUnitMap_ship", {
+      tileKey: "gaode",
+      zoom: 3,
+      center: [110, 31],
+      minZoom: 2,
+      maxZoom: 29
+    });
+    initMapbox("voyageMap_ship", {
+      tileKey: "GEBCO_basemap_NCEI",
+      zoom: 4,
+      center: [113, 15],
+      minZoom: 2,
+      maxZoom: 29
+    });
+    // this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
+    // this.initBaiduCesium() // 初始化参航单位地图
+    // this.initCesium() // 初始化航次地图
   },
   beforeDestroy() {
     // 清理Cesium资源
@@ -203,11 +190,31 @@ export default {
     // 参航单位统计
     getShipUnit() {
       shipUnit().then(res => {
-        // 清除之前的标记
-        this.clearBaiduCesiumMarkers()
+        let geojson = {
+          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_ship");
 
-        // 创建参航单位标记
-        this.createBaiduCesiumMarkers(res.array)
+        // // 清除之前的标记
+        // this.clearBaiduCesiumMarkers()
+        // // 创建参航单位标记
+        // this.createBaiduCesiumMarkers(res.array)
 
         const typeCount = res.array.reduce((acc, unit) => {
           const type = unit.unit_type
@@ -272,15 +279,22 @@ export default {
     // 航次统计
     gitShipVoyage(params = {}) {
       shipVoyage(params).then(res => {
+        let i = 0;
+        const colors = ColorGenerator.generateDivergingColors(res.array.length);
         // 添加轨迹图层
         res.array.forEach(item => {
-          this.addSingleLineImg(item)
+          // 加载轨迹图层
+          loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], "#FFFFFF"], "visible", "voyageMap_ship", "dsds");
+          i++;
+
+          // this.addSingleLineImg(item)
         })
       })
     },
+
     // 初始化Cesium - 参航单位地图
     initBaiduCesium() {
-      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.baiduCesiumContainer, {
+      this.baiduCesiumViewer = new Cesium.Viewer(this.$refs.workUnitMap_ship, {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
@@ -316,7 +330,7 @@ export default {
     // 初始化cesium
     initCesium() {
       Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
-      this.viewer = new Cesium.Viewer('cesiumContainer', {
+      this.viewer = new Cesium.Viewer('voyageMap_ship', {
         sceneMode: Cesium.SceneMode.SCENE2D,
         shadows: false,
         timeline: false,
@@ -468,24 +482,29 @@ export default {
         flex-direction: column;
         justify-content: center;
         align-items: center;
+
         .value {
           font-size: 56px;
           font-weight: bold;
+
           .unit {
             font-size: 26px;
           }
         }
+
         .label {
           font-size: 18px;
         }
       }
     }
   }
+
   .map-module {
     padding: 50px 50px;
     display: flex;
     justify-content: space-between;
     gap: 50px;
+
     .bezel {
       flex: 1;
       width: 100%;
@@ -503,6 +522,7 @@ export default {
         z-index: 8888;
         font-size: 22px;
       }
+
       .map-year {
         position: absolute;
         top: 20px;
@@ -513,6 +533,7 @@ export default {
       }
     }
   }
+
   .echarts-module {
     padding: 0 50px 50px;
     display: grid;

src/views/statistics/index.vue

@@ -71,7 +71,7 @@
         <el-card
           class="stat-card"
           shadow="hover"
-          @click.native="goToDetail('uuv')"
+          @click.native="goToDetail('auv')"
         >
           <div class="card-content">
             <div class="card-icon">
@@ -79,8 +79,8 @@
             </div>
             <div class="card-info">
               <h3 class="card-title">无人航行潜水器汇总统计</h3>
-              <p class="card-count">{{ uuv.length }}艘</p>
-              <p class="card-desc"><span v-for="(item, index) in uuv" :key="index">{{ item.report_name }}<span v-if="index !== uuv.length - 1">、</span></span> </p>
+              <p class="card-count">{{ auv.length }}艘</p>
+              <p class="card-desc"><span v-for="(item, index) in auv" :key="index">{{ item.report_name }}<span v-if="index !== auv.length - 1">、</span></span> </p>
             </div>
           </div>
         </el-card>
@@ -137,7 +137,7 @@ export default {
       ship: [],
       hov: [],
       rov: [],
-      uuv: []
+      auv: []
     }
   },
   created() {
@@ -152,7 +152,7 @@ export default {
         this.ship = filterDictItems(res.array, '科考船')
         this.hov = filterDictItems(res.array, '载人潜水器')
         this.rov = filterDictItems(res.array, '遥控潜水器')
-        this.uuv = filterDictItems(res.array, '无人航行潜水器')
+        this.auv = filterDictItems(res.array, '无人航行潜水器')
       })
     },
   }