From 258a33635e3067ce6e24af8a8119ab4908a11b0d Mon Sep 17 00:00:00 2001 From: zhangqi <727393967@qq.com> Date: Mon, 8 Sep 2025 09:38:12 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 258 +++++++------- src/views/dataSearch.vue | 327 +++++++----------- .../dataTransfer/sampleViews/DataList.vue | 4 +- src/views/dataTransfer/voyageReg.vue | 7 + src/views/home.vue | 159 +++------ 5 files changed, 307 insertions(+), 448 deletions(-) diff --git a/package-lock.json b/package-lock.json index c63a871..da80941 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1422,12 +1422,33 @@ "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", "dev": true }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, "emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz", "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", "dev": true }, + "is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true + }, "string-width": { "version": "5.1.2", "resolved": "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz", @@ -1439,6 +1460,40 @@ "strip-ansi": "^7.0.1" } }, + "string-width-cjs": { + "version": "npm:string-width@4.2.3", + "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true + }, + "emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.1" + } + } + } + }, "strip-ansi": { "version": "7.1.0", "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz", @@ -1448,6 +1503,23 @@ "ansi-regex": "^6.0.1" } }, + "strip-ansi-cjs": { + "version": "npm:strip-ansi@6.0.1", + "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.1" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true + } + } + }, "wrap-ansi": { "version": "8.1.0", "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz", @@ -1458,6 +1530,60 @@ "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } + }, + "wrap-ansi-cjs": { + "version": "npm:wrap-ansi@7.0.0", + "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true + }, + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + } + }, + "strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.1" + } + } + } } } }, @@ -18155,46 +18281,6 @@ "strip-ansi": "^3.0.0" } }, - "string-width-cjs": { - "version": "npm:string-width@4.2.3", - "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dev": true, - "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true - }, - "emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true - }, - "is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true - }, - "strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "requires": { - "ansi-regex": "^5.0.1" - } - } - } - }, "string.prototype.trim": { "version": "1.2.9", "resolved": "https://registry.npmmirror.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz", @@ -18251,23 +18337,6 @@ "ansi-regex": "^2.0.0" } }, - "strip-ansi-cjs": { - "version": "npm:strip-ansi@6.0.1", - "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "requires": { - "ansi-regex": "^5.0.1" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true - } - } - }, "strip-bom": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/strip-bom/-/strip-bom-2.0.0.tgz", @@ -21060,81 +21129,6 @@ } } }, - "wrap-ansi-cjs": { - "version": "npm:wrap-ansi@7.0.0", - "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dev": true, - "requires": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true - }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true - }, - "is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true - }, - "string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dev": true, - "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - } - }, - "strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "requires": { - "ansi-regex": "^5.0.1" - } - } - } - }, "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz", diff --git a/src/views/dataSearch.vue b/src/views/dataSearch.vue index 07f0abd..a449c5f 100644 --- a/src/views/dataSearch.vue +++ b/src/views/dataSearch.vue @@ -264,15 +264,16 @@ export default { // 地图图层基础地址 CesiumHostAddr: '', // 保存自定义底图 - imageryViewModels: [] + imageryViewModels: [], + // 保存轨迹图层 + trackLineLayers: [], + // 记录已渲染的轨迹 + rendered: [] } }, created() { this.getParams() }, - mounted() { - // this.initCesium() - }, watch: { radio(val) { this.dataList = [] @@ -321,8 +322,9 @@ export default { if (arr.length) { arr.forEach(item => { if (item.param_name === 'CesiumHostAddr') { - this.CesiumHostAddr = item.param_value - this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr); + // this.CesiumHostAddr = item.param_value + this.CesiumHostAddr = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/tiles` + this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr) this.initCesium() } }) @@ -399,7 +401,6 @@ export default { }, // 获取左侧航次列表 getList() { - this.clearAll() this.dataList = [] const params = { start: 0, @@ -415,69 +416,128 @@ export default { } getDataList(params).then(res => { const arr = res.page.records - if (this.radio == '航次') { - this.getVoyagePoints(arr) + if (this.radio === '航次') { + this.dataList = arr + if (arr.length) { + arr.forEach(item => { + this.trackLineImage(item) + }) + } } - if (this.radio == '数据样品集') { + if (this.radio === '数据样品集') { this.getDataPoints(arr) } }) }, + // 航次导航图层 + trackLineImage(item) { + // 查询轨迹是否渲染过，避免重复渲染 + if (this.rendered.length) { + const isRendered = this.rendered.find(ele => ele === item.voyage_name) + if (isRendered) return + } + if (!item.voyage_name) return + // 轨迹影像参数 + const trackLine = new Cesium.WebMapTileServiceImageryProvider( + { + url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.voyage_name}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`, + layer: `dsds:${item.voyage_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.voyage_name) + }, + // 测线业务相关图层 + 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() { + if (this.trackLineLayers.length) { + this.trackLineLayers.forEach(line => { + this.viewer.imageryLayers.remove(line) + }) + } + this.rendered = [] + }, // 搜素 getSearch() { + this.clearAll() this.getList() }, - // 获取航次坐标点位 - getVoyagePoints(arr) { - if (!arr.length) return false - const voyageList = arr - voyageList.map((item, index) => { - // 获取航次坐标点 - getVoyageLine({ - voyage_id: item.tsy_id - }).then(res2 => { - // 格式化坐标点 - const points = [] - res2.array.forEach(point => { - const lon = Number(point.nav_lon) - const lat = Number(point.nav_lat) - if (lon && lat) { - points.push(lon, lat) - } - }) - this.drawLine(index, item.tsy_id, points, '航次航线') - // 将坐标点添加到航次列表中 - item.points = points - }) - }) - this.dataList = voyageList - }, // 获取数据样品集坐标点位 getDataPoints(arr) { if (!arr.length) return false + arr.forEach(item => { + this.trackLineImage(item) + this.divingImage(item) + }) const voyageList = arr - voyageList.map((item, index) => { - if (item.job_type == '测线作业') { + voyageList.map(item => { + if (item.job_type === '测线作业') { // 获取样品列表 sampleLineList({ dataset_id: item.tsy_id }).then(res => { item.sampleArray = res.array if (res.array.length) { - // 格式化坐标点 - res.array.forEach(line => { - const start_lon = Number(line.start_lon) - const start_lat = Number(line.start_lat) - const end_lon = Number(line.end_lon) - const end_lat = Number(line.end_lat) - if (start_lon && start_lat && end_lon && end_lat) { - this.drawLine(index, line.tsy_id, [start_lon, start_lat, end_lon, end_lat], '样品航线') - } + res.array.forEach(sample => { + this.sampleLineImage(sample) }) } }) } - if (item.job_type == '站位作业') { + if (item.job_type === '站位作业') { // 获取样品列表 sampleStationList({ dataset_id: item.tsy_id @@ -485,35 +545,12 @@ export default { item.sampleArray = res.array // 格式化坐标点 if (res.array.length) { - res.array.forEach(point => { - const lon = Number(point.sampling_lon) - const lat = Number(point.sampling_lat) - if (lon && lat) { - this.setPoint(point.tsy_id, [lon, lat]) - } + res.array.forEach(sample => { + this.sampleLineImage(sample) }) } }) } - // 获取数据样品集坐标点 - dataPoints({ - dataset_id: item.tsy_id - }).then(res => { - if (res.array.length) { - // 格式化坐标点 - const points = [] - res.array.forEach(point => { - const lon = Number(point.track_lon) - const lat = Number(point.track_lat) - if (lon && lat) { - points.push(lon, lat) - } - }) - this.drawLine(index, item.tsy_id, points, '数据样品集航线') - // 将坐标点添加到航次列表中 - item.points = points - } - }) }) this.dataList = voyageList }, @@ -564,60 +601,9 @@ export default { this.viewer.camera.setView({ // 指定相机初始位置 destination: Cesium.Cartesian3.fromDegrees(112, 18, 4000000) - }); + }) - // 不显示底图 - // this.viewer.imageryLayers.get(0).show = false - - // 创建一个ScreenSpaceEventHandler实例 - const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); - // 设置一个点击事件监听器 - handler.setInputAction((click) => { - // 获取点击位置的笛卡尔坐标（世界坐标） - const pickedObject = this.viewer.scene.pick(click.position); - this.currenSample = pickedObject.id._id - const type = pickedObject.id._type - if (type === 'point') { - this.job = '站位作业' - } else { - this.job = '测线作业' - } - this.onSample({ - tsy_id: pickedObject.id._id - }) - if (type === '航次航线') { - this.currentVoyage = pickedObject.id._id - } - if (type === '数据样品集航线') { - this.currentSample = pickedObject.id._id - } - if (type === '样品航线' || type === 'point') { - // 循环匹配数据样品集，展开对应数据样品 - this.dataList.forEach(item => { - item.sampleArray.forEach(i => { - if (pickedObject.id._id == i.tsy_id) { - this.openList(item, 'map') - } - }) - }) - } else { - this.scrollTo(pickedObject.id._id) - } - }, Cesium.ScreenSpaceEventType.LEFT_CLICK); - - // 叠加叠加影像服务 - // const earthMap = new Cesium.WebMapTileServiceImageryProvider( - // { - // url: this.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() - // } - // ) - // this.viewer.imageryLayers.addImageryProvider(earthMap) - // 增加海岸线 /geoserver/gwc/service/wmts/rest/ne:GSHHS_f_L1/EPSG:4326/EPSG:4326:{z}/{y}/{x}?format=image/png + // 增加海岸线 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', @@ -629,7 +615,7 @@ export default { } ) this.viewer.imageryLayers.addImageryProvider(coastline) - // 沉船摄影拼接图 /geoserver/gwc/service/wmts/rest/ne:No1ShipWreck_UP/EPSG:4326/EPSG:4326:{z}/{y}/{x}?format=image/png + // 沉船摄影拼接图 const shipline = new Cesium.WebMapTileServiceImageryProvider( { url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:正射影像图_GM输出_20240516/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png', @@ -642,58 +628,6 @@ export default { ) this.viewer.imageryLayers.addImageryProvider(shipline) }, - /* cesium 绘制线 */ - drawLine(index, id, degreeArr, type) { - this.viewer.entities.add({ - id: id, - type: type, - polyline: { //polyline折线实体 - positions: Cesium.Cartesian3.fromDegreesArray(degreeArr),//位置 - clampToGround: true, //地表层高度模式, - zIndex: 1000, - width: 2, - // 设置线条的材质（颜色） - material: Cesium.Color.fromRandom({ alpha: 0.5 }) - } - }) - // 修复 RangeError: Invalid array length - if (degreeArr.length > 1) { - this.viewer.camera.setView({ - // 指定相机位置 - destination: Cesium.Cartesian3.fromDegrees(degreeArr[0], degreeArr[1]) - }) - } - this.autoZoom() - }, - // 创建点位 - setPoint(id, degree) { - this.viewer.entities.add({ - id: id, - type: 'point', - position: Cesium.Cartesian3.fromDegrees(degree[0], degree[1]), - point: { - pixelSize: 8, // 点像素大小 - color: Cesium.Color.GREEN - } - }) - this.autoZoom() - }, - // 删除单个实体 - clearOne(id) { - const entityToRemove = this.viewer.entities.getById(id); - // 检查实体是否存在 - if (Cesium.defined(entityToRemove)) { - this.viewer.entities.remove(entityToRemove) - } - }, - // 清除所有实体 - clearAll() { - this.viewer.entities.removeAll() - }, - // 自动跳转到实体位置 - autoZoom() { - this.viewer.zoomTo(this.viewer.entities) - }, turnDeatilPage(item) { this.$router.push({ name: 'dataDetail', @@ -733,41 +667,12 @@ export default { // 选中样品列表数据 onSample(sample) { this.currenSample = sample.tsy_id - if (this.job === '站位作业') { - this.resetCesium() - const station = this.viewer.entities.getById(sample.tsy_id) - if (station) { - station.point.pixelSize = 20 - station.point.color = Cesium.Color.WHITE - } - this.chooseStation = station - } else { - this.resetCesium() - const line = this.viewer.entities.getById(sample.tsy_id) - if (line) { - line.polyline.width = 8 - line.oldMaterial = line.polyline.material - line.polyline.material = Cesium.Color.GREEN - } - this.chooseLine = line - } - }, - resetCesium() { - if (this.chooseStation) { - this.chooseStation.point.pixelSize = 5 - this.chooseStation.point.color = Cesium.Color.RED - } - if (this.chooseLine) { - this.chooseLine.polyline.width = 2 - this.chooseLine.polyline.material = this.chooseLine.oldMaterial - } }, goHome() { this.$router.push({ name: 'home' }) }, scrollTo(sectionId) { const element = document.getElementById(sectionId); - console.log(element) if (element) { element.scrollIntoView({ behavior: 'smooth' }); } @@ -1019,15 +924,15 @@ export default { height: 60px; cursor: pointer; position: absolute; - top: 20px; - left: 20px; + bottom: 25px; + right: 20px; } .goHome { cursor: pointer; position: absolute; - top: 85px; - left: 20px; + bottom: 0; + right: 20px; color: rgba(255,255, 255, 0.8); } } diff --git a/src/views/dataTransfer/sampleViews/DataList.vue b/src/views/dataTransfer/sampleViews/DataList.vue index 81ce660..a568c3d 100644 --- a/src/views/dataTransfer/sampleViews/DataList.vue +++ b/src/views/dataTransfer/sampleViews/DataList.vue @@ -75,7 +75,9 @@ export default { params: { start: 0, limit: 10, - group: 10 + group: 10, + order: 'dataset_name', + type: 'ASC' }, pageNum: 1, // 列表数据 diff --git a/src/views/dataTransfer/voyageReg.vue b/src/views/dataTransfer/voyageReg.vue index c11423b..e57e550 100644 --- a/src/views/dataTransfer/voyageReg.vue +++ b/src/views/dataTransfer/voyageReg.vue @@ -733,6 +733,7 @@ export default { }, cancelPeople() { this.openPeople = false + this.paramsPeople.start = 0 this.onHidden() }, handleEditPeople(row) { @@ -829,6 +830,12 @@ export default { } else { this.form.voyage_officer = '' } + }, + openPeople(val) { + if (!val) { + this.paramsPeople.start = 0 + this.pageNumPeople = 1 + } } } } diff --git a/src/views/home.vue b/src/views/home.vue index 8bee2a8..3c74c50 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -67,14 +67,18 @@
@@ -291,11 +295,14 @@ export default { dataUpdateList: [], sampleDataUpdateList: [], viewer: null, - color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE], // 地图图层基础地址 CesiumHostAddr: '', // 保存自定义底图 - imageryViewModels: [] + imageryViewModels: [], + // 保存轨迹图层 + trackLineLayers: [], + // 记录已渲染的轨迹 + rendered: [] } }, @@ -312,7 +319,7 @@ export default { this.sampleDataUpdate() }, mounted() { - // this.initCesium() + }, methods: { // 获取从参数列表 @@ -322,8 +329,9 @@ export default { if (arr.length) { arr.forEach(item => { if (item.param_name === 'CesiumHostAddr') { - this.CesiumHostAddr = item.param_value - this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr); + // this.CesiumHostAddr = item.param_value + this.CesiumHostAddr = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/tiles` + this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr) this.initCesium() } }) @@ -333,22 +341,7 @@ export default { // 查询航次列表 getVoyageList() { getVoyage().then(res => { - const voyageList = res.page.records - voyageList.map(item => { - // 获取航次坐标点 - getVoyageLine({ - voyage_id: item.tsy_id - }).then(res2 => { - // 格式化坐标点 - const points = [] - res2.array.forEach(point => { - points.push(Number(point.nav_lon), Number(point.nav_lat)) - }) - // 将坐标点添加到航次列表中 - item.points = points - }) - }) - this.voyageList = voyageList + this.voyageList = res.page.records }) }, @@ -403,21 +396,6 @@ export default { // 改写 Cesium 原生鼠标滚轮事件，地图缩放改为按下 Ctrl + 鼠标滚轮 modifyCesiumMouseWheel(this.viewer); - // 不显示底图 - // this.viewer.imageryLayers.get(0).show = true; - - // 叠加叠加影像服务 - // const earthMap = new Cesium.WebMapTileServiceImageryProvider( - // { - // url: this.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() - // } - // ) - // this.viewer.imageryLayers.addImageryProvider(earthMap) // 增加海岸线 const coastline = new Cesium.WebMapTileServiceImageryProvider( { @@ -443,68 +421,47 @@ export default { ) this.viewer.imageryLayers.addImageryProvider(shipline) }, - /* cesium 绘制线 */ - drawLine(index, id, degreeArr) { - this.viewer.entities.add({ - id: id, - polyline: { //polyline折线实体 - positions: Cesium.Cartesian3.fromDegreesArray(degreeArr),//位置 - // width: 5,//折线宽度 - // cusColor: this.color[index], - // material: new Cesium.PolylineArrowMaterialProperty( - // this.color[index] - // //Cesium.Color.BLUE - // // glowPower : 0.2,//发光的强度，值为线宽的百分比(0-1.0) - // // color:Cesium.Color.BLUE //发光的颜色 - // ),//材质 - clampToGround: true, //地表层高度模式, - zIndex: 1000, - width: 2, - // 设置线条的材质（颜色） - material: Cesium.Color.fromRandom({ alpha: 0.5 }) - } - }) - // 修复 RangeError: Invalid array length - if (degreeArr.length > 1) - this.viewer.camera.setView({ - // 指定相机位置 - destination: Cesium.Cartesian3.fromDegrees(degreeArr[0], degreeArr[1]) - }) - this.autoZoom() - }, - // 创建点位 - setPoint(id, degree, color) { - this.viewer.entities.add({ - id: id, - position: Cesium.Cartesian3.fromDegrees(degree), - point: { - pixelSize: 20, // 点像素大小 - color: color - } - }) - // this.viewer.zoomTo(point) - }, - // 清除所有实体 + // 清除所有轨迹图层 clearAll() { - this.viewer.entities.removeAll() - }, - // 自动跳转到实体位置 - autoZoom() { - this.viewer.zoomTo(this.viewer.entities) + this.chooseIndex = -1 + if (this.trackLineLayers.length) { + this.trackLineLayers.forEach(line => { + this.viewer.imageryLayers.remove(line) + }) + } + this.rendered = [] }, // 全部轨迹 onAll() { - this.clearAll() - this.chooseIndex = -1 - this.voyageList.forEach((item, index) => { - this.drawLine(index, item.tsy_id, item.points) - }) + if (this.voyageList.length) { + this.voyageList.forEach(ele => { + this.toChoose(ele, -1) + }) + } }, // 选择轨迹 - toChoose(i, item) { - this.clearAll() - this.chooseIndex = i - this.drawLine(i, item.tsy_id, item.points) + toChoose(item, index) { + this.chooseIndex = index + // 查询轨迹是否渲染过，避免重复渲染 + if (this.rendered.length) { + const isRendered = this.rendered.find(ele => ele === item.voyage_name) + if (isRendered) return + } + // 轨迹影像参数 + const trackLine = new Cesium.WebMapTileServiceImageryProvider( + { + url: `${this.CesiumHostAddr}geoserver/gwc/service/wmts/rest/dsds:${item.voyage_name}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`, + layer: `dsds:${item.voyage_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.voyage_name) }, // 统计数据 getStatisticsNums() { @@ -544,13 +501,6 @@ export default { this.sampleDataUpdateList = res.page.records }) }, - // 跳转到子系统 - toSubsystem(name) { - alert(name) - if (name) { - this.$router.push({ name }) - } - } } } @@ -800,6 +750,7 @@ export default { color: #fff; padding: 0 15px; border-radius: 5px; + cursor: pointer; } } }