1.首页调整为显示最近的10个航次；
2.地图右上角增加小图标（船），鼠标滑动到图标上后显示这10个航次的列表； 3.点击：记录高亮、移除其他高亮图层、加载对应的航次高亮图层、，再次点击，取消航次记录高亮，移除该航次高亮突出; 4.Checkbox框：选中代表该航次图层显示在地图上，取消则隐藏该航次图层。默认10个航次全部选中; 5.增加4500米、6000米等深线按钮，点击触发：加载/取消对应的等深线图层
This commit is contained in:
zhangqi
parent
a8a3ce85b5
commit
a922d431bd
|
|
@ -5,6 +5,7 @@
|
|||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
lintOnSave: false,
|
||||
dev: {
|
||||
|
||||
// Paths
|
||||
|
|
@ -26,7 +27,7 @@ module.exports = {
|
|||
},
|
||||
'/geoserver': {
|
||||
// target: 'http://120.48.105.88', // 线上
|
||||
target: 'http://124.16.219.154:8080', // 测试环境
|
||||
target: 'http://124.222.8.13:9801', // 测试环境
|
||||
changeOrigin: true, // 是否跨域
|
||||
secure: false, // 是否使用https
|
||||
pathRewrite: {
|
||||
|
|
|
|||
|
|
@ -55,10 +55,11 @@ export function saveVisits(data) {
|
|||
// }
|
||||
|
||||
// 航次列表
|
||||
export function getVoyage() {
|
||||
export function getVoyage(query) {
|
||||
return request({
|
||||
url: '/voyage/reg/page.htm',
|
||||
method: 'get'
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,30 +63,44 @@
|
|||
<img src="../../static/images/guiji.png" alt="">
|
||||
</div>
|
||||
<div class="guiji_2">
|
||||
<!-- <img src="../../static/images/guiji_1.jpg" alt="" /> -->
|
||||
<div class="daohang">
|
||||
<ul>
|
||||
<li>
|
||||
<a @click="onAll">All</a>
|
||||
</li>
|
||||
<li>
|
||||
<a @click="clearAll">clear</a>
|
||||
</li>
|
||||
<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>
|
||||
<div id="cesiumContainer" ref="cesiumContainer"
|
||||
onmouseleave="document.getElementById('mouseWheelTip').style.display = 'none'"
|
||||
style="height: 100%;width:100%;">
|
||||
<div class="son" style="display: none;">弹框插槽</div>
|
||||
<div id="mouseWheelTip" style="display: none;">地图缩放：按下 Ctrl + 鼠标滚轮</div>
|
||||
<el-popover
|
||||
placement="left-start"
|
||||
title="航次列表"
|
||||
width="300"
|
||||
trigger="hover"
|
||||
>
|
||||
<div class="contour-line">
|
||||
<span>等深线：</span>
|
||||
<el-button
|
||||
size="mini"
|
||||
v-for="depth in depthOptions"
|
||||
:key="depth"
|
||||
:type="selectedDepths.includes(depth) ? 'primary' : ''"
|
||||
@click="toggleDepth(depth)"
|
||||
>
|
||||
{{ depth }}米
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="voyageList"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
highlight-current-row
|
||||
:current-row-key="currentVoyage"
|
||||
>
|
||||
<el-table-column type="selection" width="50" />
|
||||
<el-table-column property="voyage_name" label="航次" />
|
||||
</el-table>
|
||||
<div class="right-top" slot="reference">
|
||||
<img class="boat" src="../../static/images/boat_icon.png" alt="">
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -232,7 +246,7 @@
|
|||
|
||||
<script>
|
||||
import Footer from '../components/public/Footer'
|
||||
import { getVoyage, getVoyageLine, getParamsList, statisticsNums } from '../api/home'
|
||||
import { getVoyage, statisticsNums } from '../api/home'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
import 'swiper/swiper-bundle.css'
|
||||
import { sampleDatasetList, voyageRegList } from '@/api/dataTransfer'
|
||||
|
|
@ -290,19 +304,21 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
chooseIndex: -1,
|
||||
voyageList: [],
|
||||
voyageList: [], // 航次列表数据
|
||||
currentVoyage: null, // 当前选中的航次名称
|
||||
highlightLayer: null, // 存储当前高亮图层实例
|
||||
dataUpdateList: [],
|
||||
sampleDataUpdateList: [],
|
||||
viewer: null,
|
||||
// 地图图层基础地址
|
||||
CesiumHostAddr: '',
|
||||
CesiumHostAddr: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/`,
|
||||
// 保存自定义底图
|
||||
imageryViewModels: [],
|
||||
// 保存轨迹图层
|
||||
trackLineLayers: [],
|
||||
// 记录已渲染的轨迹
|
||||
rendered: []
|
||||
multipleSelection: [], // 当前选中的航次数组
|
||||
trackLayerMap: {}, // 存储每个航次对应的轨迹图层实例 { voyage_name: layerInstance }
|
||||
depthOptions: [4500, 6000], // 可扩展更多深度值
|
||||
selectedDepths: [], // 存储当前选中的深度值
|
||||
contourLayerMap: {}, // 改为对象形式，以深度值作为key存储对应的图层实例
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -313,35 +329,26 @@ export default {
|
|||
},
|
||||
created() {
|
||||
this.getVoyageList()
|
||||
this.getParams()
|
||||
this.getStatisticsNums()
|
||||
this.dataUpdate()
|
||||
this.sampleDataUpdate()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 获取从参数列表
|
||||
getParams() {
|
||||
getParamsList().then(res => {
|
||||
const arr = res.array
|
||||
if (arr.length) {
|
||||
arr.forEach(item => {
|
||||
if (item.param_name === '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()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 查询航次列表
|
||||
getVoyageList() {
|
||||
getVoyage().then(res => {
|
||||
getVoyage({
|
||||
start: 0,
|
||||
limit: 10
|
||||
}).then(res => {
|
||||
this.voyageList = res.page.records
|
||||
this.$nextTick(() => {
|
||||
// 默认全选当前页
|
||||
this.$refs.multipleTable.toggleAllSelection()
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -421,60 +428,170 @@ export default {
|
|||
}
|
||||
)
|
||||
this.viewer.imageryLayers.addImageryProvider(shipline)
|
||||
// 增加6000米等深线
|
||||
const contour6000 = new Cesium.WebMapTileServiceImageryProvider(
|
||||
{
|
||||
url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:contour6000/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
|
||||
layer: 'ougp:contour6000',
|
||||
},
|
||||
// 行点击事件处理
|
||||
handleRowClick(row, column, event) {
|
||||
// 如果点击的是当前已选中的行，则取消选择
|
||||
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.viewer.imageryLayers.addImageryProvider(contour6000)
|
||||
});
|
||||
|
||||
this.highlightLayer = this.viewer.imageryLayers.addImageryProvider(highlightLayer);
|
||||
},
|
||||
// 清除所有轨迹图层
|
||||
clearAll() {
|
||||
this.chooseIndex = -1
|
||||
if (this.trackLineLayers.length) {
|
||||
this.trackLineLayers.forEach(line => {
|
||||
this.viewer.imageryLayers.remove(line)
|
||||
})
|
||||
|
||||
// 清除高亮
|
||||
clearHighlight() {
|
||||
// 移除地图上的高亮图层
|
||||
if (this.highlightLayer) {
|
||||
this.viewer.imageryLayers.remove(this.highlightLayer);
|
||||
this.highlightLayer = null;
|
||||
}
|
||||
this.rendered = []
|
||||
|
||||
// 清除表格高亮
|
||||
this.currentVoyage = null;
|
||||
|
||||
// 如果需要清除行高亮，可以调用El-Table的方法
|
||||
this.$refs.multipleTable.setCurrentRow(null);
|
||||
},
|
||||
// 全部轨迹
|
||||
onAll() {
|
||||
if (this.voyageList.length) {
|
||||
this.voyageList.forEach(ele => {
|
||||
this.toChoose(ele, -1)
|
||||
})
|
||||
// 处理表格选择项变化
|
||||
handleSelectionChange(val) {
|
||||
// 获取新旧选中的航次名称数组
|
||||
const newVoyages = val.map(item => item.voyage_name);
|
||||
const oldVoyages = this.multipleSelection.map(item => item.voyage_name);
|
||||
|
||||
// 找出需要新增的航次（在新数组不在旧数组）
|
||||
const voyagesToAdd = newVoyages.filter(voyage => !oldVoyages.includes(voyage));
|
||||
// 找出需要移除的航次（在旧数组不在新数组）
|
||||
const voyagesToRemove = oldVoyages.filter(voyage => !newVoyages.includes(voyage));
|
||||
|
||||
// 移除不再需要的轨迹图层
|
||||
voyagesToRemove.forEach(voyage => {
|
||||
this.removeSingleLineImg(voyage);
|
||||
});
|
||||
|
||||
// 添加新选择的轨迹图层
|
||||
voyagesToAdd.forEach(voyage => {
|
||||
// 从val中找出对应航次的完整数据项
|
||||
const correspondingItem = val.find(item => item.voyage_name === voyage);
|
||||
if (correspondingItem) {
|
||||
this.addSingleLineImg(correspondingItem);
|
||||
}
|
||||
});
|
||||
|
||||
// 更新当前选中项
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
// 选择轨迹
|
||||
toChoose(item, index) {
|
||||
this.chooseIndex = index
|
||||
// 查询轨迹是否渲染过，避免重复渲染
|
||||
if (this.rendered.length) {
|
||||
const isRendered = this.rendered.find(ele => ele === item.voyage_name)
|
||||
if (isRendered) return
|
||||
// 添加单个航次的轨迹图层
|
||||
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:${item.voyage_name}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png`,
|
||||
layer: `dsds:${item.voyage_name}`,
|
||||
|
||||
// 创建轨迹影像图层
|
||||
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]; // 数组只保留当前点击的深度
|
||||
|
||||
// **方案2: 允许同时多个按钮被选中，点击切换自身状态**
|
||||
const index = this.selectedDepths.indexOf(depth);
|
||||
if (index > -1) {
|
||||
this.selectedDepths.splice(index, 1); // 如果已选中，则移除
|
||||
this.removeSingleContourLine(depth); // 移除指定深度的单条等深线
|
||||
} else {
|
||||
this.selectedDepths.push(depth); // 如果未选中，则添加
|
||||
this.addSingleContourLine(depth); // 添加指定深度的单条等深线
|
||||
}
|
||||
},
|
||||
// 添加单条指定深度的等深线
|
||||
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} 米等深线图层`);
|
||||
}
|
||||
)
|
||||
const trackLineLayer = this.viewer.imageryLayers.addImageryProvider(trackLine)
|
||||
this.trackLineLayers.push(trackLineLayer)
|
||||
// 记录已渲染的轨迹，防止重复渲染
|
||||
this.rendered.push(item.voyage_name)
|
||||
},
|
||||
// 统计数据
|
||||
getStatisticsNums() {
|
||||
|
|
@ -1289,6 +1406,23 @@ export default {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.right-top {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
z-index: 1000;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.boat {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.text-ellipsis--3-lines {
|
||||
/* 限制显示的行数 */
|
||||
-webkit-line-clamp: 3;
|
||||
|
|
@ -1301,4 +1435,16 @@ export default {
|
|||
/* 文本溢出时显示省略号 */
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 增强当前行高亮效果 */
|
||||
.el-table__body tr.current-row>td {
|
||||
background-color: #ecf5ff !important;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
/* 鼠标悬停效果 */
|
||||
.el-table__body tr:hover>td {
|
||||
background-color: #f5f7fa !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Loading…
Reference in New Issue