From 20444e9243116af2a2286badb8cd784ba5abdc1a Mon Sep 17 00:00:00 2001 From: hym Date: Tue, 25 Nov 2025 21:09:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=AF=E7=94=A8=20mapbox=20=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE=E6=8E=A7=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E4=BA=A4=E4=BA=92=E9=80=BB=E8=BE=91=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dataSearch.vue | 263 ++++++++++++++++++++++++++++++--------- 1 file changed, 206 insertions(+), 57 deletions(-) diff --git a/src/views/dataSearch.vue b/src/views/dataSearch.vue index 0352911..966f792 100644 --- a/src/views/dataSearch.vue +++ b/src/views/dataSearch.vue @@ -26,21 +26,24 @@
-
+

编号规则:航次号_潜次号_设备类型_数据样品类型

-

{{ item.dataset_name }} {{ item.file_total }}

+

{{ item.dataset_name }} {{ item.file_total }}

{{ item.create_time }}
  • {{ sample.sample_name }} + v-for="(sample, i) in item.sampleArray" :key="i" @click.stop="onSample(sample)">{{ sample.sample_name }}

航次：

- {{ item.voyage_name }} + {{ item.voyage_name + }}

平台类型：

@@ -82,7 +85,8 @@

{{ item.voyage_name }} - {{ item.voyage_mileage }}海里

+ {{ item.voyage_mileage }}海里 +

{{ item.funding_org }}
@@ -115,11 +119,15 @@ {{ item.serect_status == 'Active' ? '是' : '否' }}
- - - - - + + + + +
@@ -139,58 +147,46 @@
- - - + + + - - - + + + - - - + + + - - - + + + - +

{{ voyageInfo.voyage_name }}

{{ voyageInfo.voyage_remark }}

@@ -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,16 +453,26 @@ 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 === '数据样品集') { - this.getDataPoints(arr) + try { + this.getDataPoints(arr) + } + catch (err) { + console.log(err); + } } }) }, @@ -481,8 +492,8 @@ export default { this.dataList[i].highlight = true; }, // 清除高亮 - clearHighlight() { - this.dataList.map(item => {item.highlight = false}) + clearHighlight(voyageName, i) { + 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.divingImage(item) + // this.addSingleLineImg(item.voyage_name, null) + // 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹） + // 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 {