revisit
/
DSDSWeb
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: revisit:d643188f67976442ed51caa06a1007b21e9492e7
Branches Tags
revisit:master
...
compare: revisit:2fb92cd44596d0a71b7dd1bf4feb360f0b7d09c3
Branches Tags
revisit:master

2 Commits
d643188f67 ... 2fb92cd445

Author SHA1 Message Date
zhangqi 2fb92cd445 首页调整 2025-09-08 10:00:41 +08:00
zhangqi 258a33635e 首页调整 2025-09-08 09:38:12 +08:00
5 changed files with 308 additions and 449 deletions
Show Stats Expand all files Collapse all files

258
package-lock.json generated
View File

@ -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",

325
src/views/dataSearch.vue
View File

@ -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);
}
}

6
src/views/dataTransfer/sampleViews/DataList.vue
View File

@ -75,7 +75,9 @@ export default {
params: {
start: 0,
limit: 10,
group: 10
group: 10,
order: 'dataset_name',
type: 'ASC'
},
pageNum: 1,
// 列表数据
@ -154,7 +156,7 @@ export default {
handleSizeChange(val) {
this.params.limit = val
this.getData()
},
}
}
}
</script>

7
src/views/dataTransfer/voyageReg.vue
View File

@ -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
}
}
}
}

157
src/views/home.vue
View File

@ -67,14 +67,18 @@
<div class="daohang">
<ul>
<li>
<a href="###" @click="onAll">All</a>
<a @click="onAll">All</a>
</li>
<li>
<a href="###" @click="clearAll">clear</a>
<a @click="clearAll">clear</a>
</li>
<li v-for="(item, index) in voyageList" :key="index" :class="chooseIndex == index ? 'active' : ''"
@click="toChoose(index, item)">
<a href="###">{{ item.voyage_name }}</a>
<li
v-for="(item, index) in voyageList"
:key="index"
:class="chooseIndex === index ? 'active' : ''"
@click="toChoose(item, index)"
>
<a>{{ item.voyage_name }}</a>
</li>
</ul>
</div>
@ -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 })
}
}
}
}
</script>
@ -800,6 +750,7 @@ export default {
color: #fff;
padding: 0 15px;
border-radius: 5px;
cursor: pointer;
}
}
}