diff --git a/index.html b/index.html index 17ebb31..e69ca70 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,6 @@ - - diff --git a/package-lock.json b/package-lock.json index 1e3e961..6839f87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1462,41 +1462,6 @@ "to-fast-properties": "^2.0.0" } }, - "@cesium/engine": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/@cesium/engine/-/engine-11.1.0.tgz", - "integrity": "sha512-vrEQAbYQuXt2cMYF9BpBu4Kxu+8uje1CrFHfyI5aNp7gCrUK1RYquldyqT7TDr3YKe7oZMHL+Xeb5Vm8ua6gZQ==", - "requires": { - "@tweenjs/tween.js": "^25.0.0", - "@zip.js/zip.js": "^2.7.34", - "autolinker": "^4.0.0", - "bitmap-sdf": "^1.0.3", - "dompurify": "^3.0.2", - "draco3d": "^1.5.1", - "earcut": "^3.0.0", - "grapheme-splitter": "^1.0.4", - "jsep": "^1.3.8", - "kdbush": "^4.0.1", - "ktx-parse": "^0.7.0", - "lerc": "^2.0.0", - "mersenne-twister": "^1.1.0", - "meshoptimizer": "^0.21.0", - "pako": "^2.0.4", - "protobufjs": "^7.1.0", - "rbush": "3.0.1", - "topojson-client": "^3.1.0", - "urijs": "^1.19.7" - } - }, - "@cesium/widgets": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@cesium/widgets/-/widgets-8.1.0.tgz", - "integrity": "sha512-WD5eokNfSQmB3oqe97KmdmDefwzooHaMWBm9kE/Af9edyD2j3eQVTrbNhiJ06UIyEjd01U1af2iDOawI9adAgA==", - "requires": { - "@cesium/engine": "^11.1.0", - "nosleep.js": "^0.12.0" - } - }, "@eslint/eslintrc": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", @@ -4565,15 +4530,6 @@ "lazy-cache": "^1.0.3" } }, - "cesium": { - "version": "1.121.1", - "resolved": "https://registry.npmjs.org/cesium/-/cesium-1.121.1.tgz", - "integrity": "sha512-WpdaGFd8qCOHiE9khV0sWWjCMXAX1U9Aou8MzMC/F0Akp6YqcOk4HLk4LLhZKeOjO/Bh27iTIW2mxEZ5+dtCxg==", - "requires": { - "@cesium/engine": "^11.0.0", - "@cesium/widgets": "^8.0.0" - } - }, "chai-nightwatch": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/chai-nightwatch/-/chai-nightwatch-0.1.1.tgz", diff --git a/package.json b/package.json index ddb284f..62eab5d 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,6 @@ }, "dependencies": { "axios": "^0.19.2", - "baidu-map": "^0.1.4", - "cesium": "^1.117.0", "echarts": "^4.9.0", "echarts-gl": "^1.1.0", "element-ui": "^2.13.0", @@ -32,9 +30,7 @@ "swiper": "^6.8.4", "vue": "^2.5.2", "vue-awesome-swiper": "^3.1.3", - "vue-baidu-map": "^0.21.22", "vue-router": "^3.0.1", - "vue2-google-maps": "^0.10.7", "vuex": "^3.1.1", "xml2js": "^0.6.2" }, diff --git a/src/router/index.js b/src/router/index.js index 12ffd27..7591ef5 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -208,16 +208,6 @@ export const constantRoutes = [ loginAuthority: true } }, - // { - // path: 'GMRT', - // name: 'GMRT', - // component: () => import('@/views/GMRT.vue'), - // meta: { - // title: '地图', - // icon: 'peoples', - // loginAuthority: true - // } - // }, { path: 'dataSearch', name: 'dataSearch', @@ -298,16 +288,16 @@ export const constantRoutes = [ loginAuthority: true } }, - { - path: 'physicalDataSearchCTD', - name: 'physicalDataSearchCTD', - component: () => import('@/views/sublibrary/physicalDataSearchCTD.vue'), - meta: { - title: '温盐深(CTD) 数据应用', - icon: 'peoples', - loginAuthority: true - } - }, + // { + // path: 'physicalDataSearchCTD', + // name: 'physicalDataSearchCTD', + // component: () => import('@/views/sublibrary/physicalDataSearchCTD.vue'), + // meta: { + // title: '温盐深(CTD) 数据应用', + // icon: 'peoples', + // loginAuthority: true + // } + // }, { path: 'phoneVideoIndex', name: 'phoneVideoIndex', @@ -328,16 +318,6 @@ export const constantRoutes = [ loginAuthority: true } }, - // { - // path: 'analyse', - // name: 'analyse', - // component: () => import('@/views/analyse.vue'), - // meta: { - // title: '统计分析', - // icon: 'peoples', - // loginAuthority: true - // } - // }, { path: 'statistics', name: 'statistics', diff --git a/src/utils/common.js b/src/utils/common.js index 065b700..14e1e9d 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -1,83 +1 @@ -import { getParamsList } from '../api/home' - -export function modifyCesiumMouseWheel(viewer) { - // 地图缩放改为按下 Ctrl + 鼠标滚轮 - viewer.scene.screenSpaceCameraController.zoomEventTypes = [{ eventType: Cesium.CameraEventType.WHEEL, modifier: Cesium.KeyboardEventModifier.CTRL }]; - - // 改写 Cesium 原生鼠标滚轮事件 - const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); - handler.setInputAction((event) => { - if (event < 0) { - window.scrollBy({ left: 0, top: 15, behavior: 'auto' }); - } else { - window.scrollBy({ left: 0, top: -15, behavior: 'auto' }); - } - }, Cesium.ScreenSpaceEventType.WHEEL); - - // 鼠标移动时显示提示信息 - handler.setInputAction((event) => { - document.getElementById('mouseWheelTip').style.display = ''; - }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); -} - -let imageryViewModels = []; -export function setImageryViewModels(cesiumHostAddr) { - if (imageryViewModels.length == 0) { - // 世界影像地图 - const world_imagery = new Cesium.WebMapTileServiceImageryProvider( - { - url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' - // url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' - // url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer' - } - ); - // 彩色地形底图 - const colorMap = new Cesium.WebMapTileServiceImageryProvider( - { - url: cesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg', - layer: 'ougp:world', - style: 'default', - format: 'image/jpeg', - tileMatrixSetID: 'EPSG:4326', - tilingScheme: new Cesium.GeographicTilingScheme() - } - ); - // 灰度地形底图 - const grayMap = new Cesium.WebMapTileServiceImageryProvider( - { - url: cesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:world_gray/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/jpeg', - layer: 'ougp:world_gray', - style: 'default', - format: 'image/jpeg', - tileMatrixSetID: 'EPSG:4326', - tilingScheme: new Cesium.GeographicTilingScheme() - } - ); - // 自定义底图 - imageryViewModels.push(new Cesium.ProviderViewModel({ - name: "世界影像地图", - iconUrl: "static/images/world_imagery.png", - tooltip: "世界影像地图", - creationFunction: function () { - return world_imagery; - } - })); - imageryViewModels.push(new Cesium.ProviderViewModel({ - name: "地形地图", - iconUrl: "static/images/world_color.png", - tooltip: "彩色地形底图", - creationFunction: function () { - return colorMap; - } - })); - imageryViewModels.push(new Cesium.ProviderViewModel({ - name: "灰度地图", - iconUrl: "static/images/world_gray.png", - tooltip: "灰度地形底图", - creationFunction: function () { - return grayMap; - } - })); - } - return imageryViewModels; -} \ No newline at end of file +import { getParamsList } from '../api/home' \ No newline at end of file diff --git a/src/utils/mapbox-utils.js b/src/utils/mapbox-utils.js index 0a9b773..7670946 100644 --- a/src/utils/mapbox-utils.js +++ b/src/utils/mapbox-utils.js @@ -61,7 +61,7 @@ export function initMapbox(mapId, options = {}) { attributionControl: false, boxZoom: true,//如果为true，则启用了“缩放框”交互，按住shift并在地图上拖框放大 preserveDrawingBuffer: false,//如果为true，地图的canvas可以使用导出到png，通过map.getCanvas().toDataURL()。默认为false，会提高地图性能。 - projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题） + // projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题） }); Vue.config.maps[mapId] = map; diff --git a/src/views/GMRT.vue b/src/views/GMRT.vue deleted file mode 100644 index ddd7ca1..0000000 --- a/src/views/GMRT.vue +++ /dev/null @@ -1,527 +0,0 @@ - - - - diff --git a/src/views/analyse.vue b/src/views/analyse.vue deleted file mode 100644 index 36cc85f..0000000 --- a/src/views/analyse.vue +++ /dev/null @@ -1,681 +0,0 @@ - - - - - - diff --git a/src/views/dataSearch.vue b/src/views/dataSearch.vue index da382f9..4ecd146 100644 --- a/src/views/dataSearch.vue +++ b/src/views/dataSearch.vue @@ -239,7 +239,6 @@ import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFe import { ColorGenerator } from '@/utils/color-generator'; import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils"; -const Cesium = window.Cesium export default { name: 'Shuju', data() { @@ -247,7 +246,6 @@ export default { show: false, viewer: null, filter: null, - color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE], searchType: [ { label: '航次名称', @@ -307,8 +305,6 @@ export default { chooseLine: null, currentVoyage: null, // 当前选中的航次 currentSample: null, // 当前选中的数据样品集合 - // 地图图层基础地址 - CesiumHostAddr: '', // 保存自定义底图 imageryViewModels: [], // 保存轨迹图层 @@ -362,16 +358,13 @@ export default { mounted() { initMapbox("dataSearchMap", { tileKey: "world_horizon_1", - zoom: 4, + zoom: 3, center: [122, 15], minZoom: 2, maxZoom: 29, coastlineOn:false, contourOn:false }); - - // this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr) - // this.initCesium() }, methods: { // 获取菜单 @@ -488,20 +481,6 @@ export default { addHighlightLayer(voyageName, i) { Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", 4); this.dataList[i].highlight = true; - return; - - this.clearHighlight() - 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); - this.dataList[i].highlight = true; }, // 清除高亮 clearHighlight(voyageName, i) { @@ -515,14 +494,6 @@ export default { ]; Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", lineWidthExpression); this.dataList[i].highlight = false; - return; - - this.dataList.map(item => { item.highlight = false }) - // 移除地图上的高亮图层 - if (this.highlightLayer) { - this.viewer.imageryLayers.remove(this.highlightLayer); - this.highlightLayer = null; - } }, // 显示 addSingleLineImg(voyageName, i) { @@ -532,29 +503,6 @@ export default { // 显示图层 Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "visible"); Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "visible"); - return; - // 检查该航次图层是否已存在，避免重复添加 - if (this.trackLayerMap[voyageName]) { - console.warn(`航次 ${voyageName} 的轨迹图层已存在`); - 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}`, - style: 'default', - format: 'image/png', - tileMatrixSetID: 'EPSG:4326', - tilingScheme: new Cesium.GeographicTilingScheme() - }); - - // 添加图层到Cesium并存储引用 - const layerInstance = this.viewer.imageryLayers.addImageryProvider(trackLine); - this.trackLayerMap[voyageName] = layerInstance; // 以航次名为键存储图层实例 - if (i !== null) { - this.dataList[i].show = true; - } }, // 隐藏 @@ -567,68 +515,6 @@ export default { // visibility = visibility == "visible" ? "none" : "visible"; Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "none"); Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "none"); - return; - - const layerInstance = this.trackLayerMap[voyageName]; - if (layerInstance) { - // 从Cesium的imageryLayers中移除该图层 - this.viewer.imageryLayers.remove(layerInstance); - // 删除映射表中对该图层的引用 - delete this.trackLayerMap[voyageName]; - if (i !== null) { - this.dataList[i].show = false; - } - } else { - console.warn(`未找到航次 ${voyageName} 的轨迹图层`); - } - }, - // 测线业务相关图层 - sampleLineImage(item) { - // 查询轨迹是否渲染过，避免重复渲染 - if (this.rendered.length) { - const isRendered = this.rendered.find(ele => ele === item.sample_name) - if (isRendered) return - } - if (!item.sample_name) return - // 轨迹影像参数 - const trackLine = new Cesium.WebMapTileServiceImageryProvider( - { - url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.sample_name}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`, - layer: `dsds:${item.sample_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.sample_name) - }, - // 潜水器轨迹图层 - divingImage(item) { - // 查询轨迹是否渲染过，避免重复渲染 - if (this.rendered.length) { - const isRendered = this.rendered.find(ele => ele === item.diving_sn) - if (isRendered) return - } - if (!item.diving_sn) return - // 轨迹影像参数 - const trackLine = new Cesium.WebMapTileServiceImageryProvider( - { - url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.diving_sn}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`, - layer: `dsds:${item.diving_sn}`, - 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.diving_sn) }, // 清除所有轨迹图层 clearAll() { @@ -658,10 +544,6 @@ export default { loadVectorLayer(`sample_station_${item.dataset_name}`, ["symbol"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearchMap", "dsds", "sample_name"); } i++; - - // this.addSingleLineImg(item.voyage_name, null) - // this.dataList[i].show = true; - // this.divingImage(item) }) const voyageList = arr voyageList.map(item => { @@ -671,11 +553,6 @@ export default { dataset_id: item.tsy_id }).then(res => { item.sampleArray = res.array - // if (res.array.length) { - // res.array.forEach(sample => { - // this.sampleLineImage(sample) - // }) - // } }) } if (item.job_type === '站位作业') { @@ -684,104 +561,12 @@ export default { dataset_id: item.tsy_id }).then(res => { item.sampleArray = res.array - // 格式化坐标点 - // if (res.array.length) { - // res.array.forEach(sample => { - // this.sampleLineImage(sample) - // }); - // } }) } }) this.dataList = voyageList }, - // 初始化cesium - initCesium() { - Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4' - this.viewer = new Cesium.Viewer('dataSearchMap', { - sceneMode: Cesium.SceneMode.SCENE2D, - shadows: false, - timeline: false, - baseLayerPicker: false, - // 设置自定义底图 - imageryProviderViewModels: this.imageryViewModels, - // 关闭默认的地形底图 - terrainProviderViewModels: [], - fullscreenButton: false, - selectionIndicator: false, - homeButton: false, - sceneModePicker: false, - animation: false, - infoBox: false, - geocoder: false, - navigationHelpButton: false - }) - this.viewer._cesiumWidget._creditContainer.style.display = 'none' - this.viewer.scene.sun.show = false - this.viewer.scene.moon.show = false - this.viewer.scene.fog.enabled = false - this.viewer.scene.skyAtmosphere.show = false - this.viewer.scene.sun.show = false - this.viewer.scene.skyBox.show = false - this.viewer.scene.globe.enableLighting = false - this.viewer.shadowMap.darkness = 0.8 - this.viewer.scene._sunBloom = false - this.viewer.scene.globe.showGroundAtmosphere = false - this.viewer.scene.postProcessStages.fxaa.enabled = true - - // 单击 homeButton 返回初始位置 - // this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => { - // e.cancel = true; - // this.viewer.camera.flyTo({ - // // 指定相机初始位置 - // destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000), - // duration: 0.5 - // }); - // }); - - this.viewer.camera.setView({ - // 指定相机初始位置 - destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000) - }) - - // // 增加海岸线 - // const coastline = new Cesium.WebMapTileServiceImageryProvider( - // { - // url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png', - // layer: 'ougp:GSHHS_f_L1', - // style: 'default', - // format: 'image/png', - // tileMatrixSetID: 'EPSG:4326', - // tilingScheme: new Cesium.GeographicTilingScheme() - // } - // ) - // this.viewer.imageryLayers.addImageryProvider(coastline) - // 沉船摄影拼接图 - const shipline = new Cesium.WebMapTileServiceImageryProvider( - { - url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:正射影像图_GM输出_20240516/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png', - layer: 'ougp:正射影像图_GM输出_20240516', - style: 'default', - format: 'image/png', - tileMatrixSetID: 'EPSG:4326', - tilingScheme: new Cesium.GeographicTilingScheme() - } - ) - this.viewer.imageryLayers.addImageryProvider(shipline) - // 增加6000米等深线 - const contour6000 = new Cesium.WebMapTileServiceImageryProvider( - { - url: Vue.config.baseUrl + 'geoserver/gwc/service/wmts/rest/ougp:contour6000/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png', - layer: 'ougp:contour6000', - style: 'default', - format: 'image/png', - tileMatrixSetID: 'EPSG:4326', - tilingScheme: new Cesium.GeographicTilingScheme() - } - ) - this.viewer.imageryLayers.addImageryProvider(contour6000) - }, turnDeatilPage(item) { this.dialog5 = true regInfo({ voyage_name: item.voyage_name }).then(res => { diff --git a/src/views/hh.html b/src/views/hh.html deleted file mode 100644 index c00626d..0000000 --- a/src/views/hh.html +++ /dev/null @@ -1,1305 +0,0 @@ - - - - - - - 深海科考数据管理平台 - - - - - - - - -
- -
- -
- -
-
- -
-
-
-
- -
-
-
-
-
- -
-
-
- 从列表中选择 -
- 或者 -
-
-
搜索
-
- -
-
-
- -
-
-
- -
-
-
- -
- - -
-
-
-
-
- -
- -
-
-
- -
-
-
- -
- -
- -

- 水深： m -

-

- 视角高： km -

-
-
-
- -
-

- 版权所有©2018～ 中国科学院深海科学与工程研究所 -

-

技术支持:船海科技有限公司

-
- - - - - \ No newline at end of file diff --git a/src/views/home.vue b/src/views/home.vue index 7b65fc1..ecd6749 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -234,15 +234,10 @@ import { getVoyage, statisticsNums } from '../api/home' import { swiper, swiperSlide } from 'vue-awesome-swiper' import 'swiper/swiper-bundle.css' 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 { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils"; -const Cesium = window.Cesium - export default { name: 'Index', components: { @@ -296,11 +291,6 @@ export default { highlightLayer: null, // 存储当前高亮图层实例 dataUpdateList: [], sampleDataUpdateList: [], - viewer: null, - // 地图图层基础地址 - CesiumHostAddr: '', - // 保存自定义底图 - imageryViewModels: [], multipleSelection: [], // 当前选中的航次数组 trackLayerMap: {}, // 存储每个航次对应的轨迹图层实例 { voyage_name: layerInstance } depthOptions: [4500, 6000], // 可扩展更多深度值 @@ -315,7 +305,6 @@ export default { } }, created() { - this.CesiumHostAddr = process.env.NODE_ENV === 'development' ? 'http://124.222.8.13:9801/' : `${window.location.protocol}//${window.location.hostname}:${window.location.port}/` this.getVoyageList() this.getStatisticsNums() this.dataUpdate() @@ -324,9 +313,9 @@ export default { mounted() { initMapbox("homeMap", { tileKey: "World_Imagery", - zoom: 4, + zoom: 1.5, center: [122, 15], - minZoom: 2, + minZoom: 1, maxZoom: 29, coastlineOn: false, contourOn: false @@ -342,8 +331,6 @@ export default { loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp'); loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp'); }); - - // this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr) }, methods: { // 查询航次列表 @@ -369,83 +356,6 @@ export default { }) }, - // 初始化cesium - initCesium() { - Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4' - this.viewer = new Cesium.Viewer('homeMap', { - sceneMode: Cesium.SceneMode.SCENE2D, - shadows: false, - timeline: false, - baseLayerPicker: false, - // 设置自定义底图 - imageryProviderViewModels: this.imageryViewModels, - // 关闭默认的地形底图 - terrainProviderViewModels: [], - fullscreenButton: false, - selectionIndicator: false, - homeButton: false, - sceneModePicker: false, - animation: false, - infoBox: false, - geocoder: false, - navigationHelpButton: false - }) - this.viewer._cesiumWidget._creditContainer.style.display = 'none' - this.viewer.scene.sun.show = false - this.viewer.scene.moon.show = false - this.viewer.scene.fog.enabled = false - this.viewer.scene.skyAtmosphere.show = false - this.viewer.scene.sun.show = false - this.viewer.scene.skyBox.show = false - this.viewer.scene.globe.enableLighting = false - this.viewer.shadowMap.darkness = 0.8 - this.viewer.scene._sunBloom = false - this.viewer.scene.globe.showGroundAtmosphere = false - this.viewer.scene.postProcessStages.fxaa.enabled = true - - // 单击 homeButton 返回初始位置 - // this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => { - // e.cancel = true; - // this.viewer.camera.flyTo({ - // // 指定相机初始位置 - // destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000), - // duration: 0.5 - // }); - // }); - - this.viewer.camera.setView({ - // 指定相机初始位置 - destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000) - }); - - // 改写 Cesium 原生鼠标滚轮事件，地图缩放改为按下 Ctrl + 鼠标滚轮 - modifyCesiumMouseWheel(this.viewer); - - // // 增加海岸线 - // const coastline = new Cesium.WebMapTileServiceImageryProvider( - // { - // url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:GSHHS_f_L1/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png', - // layer: 'ougp:GSHHS_f_L1', - // style: 'default', - // format: 'image/png', - // tileMatrixSetID: 'EPSG:4326', - // tilingScheme: new Cesium.GeographicTilingScheme() - // } - // ) - // this.viewer.imageryLayers.addImageryProvider(coastline) - // 沉船摄影拼接图 - const shipline = new Cesium.WebMapTileServiceImageryProvider( - { - url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:正射影像图_GM输出_20240516/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png', - layer: 'ougp:正射影像图_GM输出_20240516', - style: 'default', - format: 'image/png', - tileMatrixSetID: 'EPSG:4326', - tilingScheme: new Cesium.GeographicTilingScheme() - } - ) - this.viewer.imageryLayers.addImageryProvider(shipline) - }, // 行点击事件处理 handleRowClick(row, column, event) { // 原高亮逻辑改为图层显示/隐藏控制 @@ -454,55 +364,8 @@ export default { Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility", visibility); Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-line`, "visibility", visibility); this.$refs.multipleTable.toggleRowSelection(row); - return; - - // 如果点击的是当前已选中的行，则取消选择 - if (this.currentVoyage === row.voyage_name) { - this.clearHighlight(); - return; - } - - // 设置新的当前选中航次 - 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) { // 获取新旧选中的航次名称数组 @@ -516,7 +379,6 @@ export default { // 移除不再需要的轨迹图层 voyagesToRemove.forEach(voyage => { - // this.removeSingleLineImg(voyage); Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "none"); Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "none"); }); @@ -526,7 +388,6 @@ export default { // 从val中找出对应航次的完整数据项 const correspondingItem = val.find(item => item.voyage_name === voyage); if (correspondingItem) { - // this.addSingleLineImg(correspondingItem); Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "visible"); Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "visible"); } @@ -535,42 +396,7 @@ export default { // 更新当前选中项 this.multipleSelection = val; }, - // 添加单个航次的轨迹图层 - addSingleLineImg(item) { - const voyageName = item.voyage_name; - // 检查该航次图层是否已存在，避免重复添加 - if (this.trackLayerMap[voyageName]) { - console.warn(`航次 ${voyageName} 的轨迹图层已存在`); - 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}`, - style: 'default', - format: 'image/png', - tileMatrixSetID: 'EPSG:4326', - tilingScheme: new Cesium.GeographicTilingScheme() - }); - - // 添加图层到Cesium并存储引用 - const layerInstance = this.viewer.imageryLayers.addImageryProvider(trackLine); - this.trackLayerMap[voyageName] = layerInstance; // 以航次名为键存储图层实例 - }, - - // 移除单个航次的轨迹图层 - removeSingleLineImg(voyageName) { - const layerInstance = this.trackLayerMap[voyageName]; - if (layerInstance) { - // 从Cesium的imageryLayers中移除该图层 - this.viewer.imageryLayers.remove(layerInstance); - // 删除映射表中对该图层的引用 - delete this.trackLayerMap[voyageName]; - } else { - console.warn(`未找到航次 ${voyageName} 的轨迹图层`); - } - }, toggleDepth(depth) { // **方案1: 如果要求同时只能有一个按钮被选中** // this.selectedDepths = [depth]; // 数组只保留当前点击的深度 @@ -579,50 +405,13 @@ export default { const index = this.selectedDepths.indexOf(depth); if (index > -1) { this.selectedDepths.splice(index, 1); // 如果已选中，则移除 - // this.removeSingleContourLine(depth); // 移除指定深度的单条等深线 Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "none"); } else { this.selectedDepths.push(depth); // 如果未选中，则添加 - // this.addSingleContourLine(depth); // 添加指定深度的单条等深线 Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "visible"); } }, - // 添加单条指定深度的等深线 - 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} 米等深线图层`); - } - }, // 统计数据 getStatisticsNums() { statisticsNums().then(res => { @@ -1428,10 +1217,6 @@ export default { color: #fff; } -.cesium-viewer-bottom { - display: none !important; -} - #map { position: relative; } diff --git a/src/views/statistics/AuvStatistics.vue b/src/views/statistics/AuvStatistics.vue index ff81986..bd2063f 100644 --- a/src/views/statistics/AuvStatistics.vue +++ b/src/views/statistics/AuvStatistics.vue @@ -2,31 +2,17 @@