启用 mapbox 地图控件，优化相关交互逻辑。
This commit is contained in:
parent
51478c40c9
commit
20444e9243
|
|
@ -26,10 +26,12 @@
|
|||
</el-radio-group>
|
||||
</div>
|
||||
<div class="left4" v-if="radio == '数据样品集'">
|
||||
<div v-for="(item, index) in dataList" :key="index" :id="item.tsy_id" class="left4_1" >
|
||||
<div v-for="(item, index) in dataList" :key="index" :id="item.tsy_id" class="left4_1">
|
||||
<div class="left4_top">
|
||||
<p class="rule-text">编号规则:航次号_潜次号_设备类型_数据样品类型</p>
|
||||
<p @click="openList(item, 'list')" style="font-weight: 400;font-size: 14px;cursor: pointer;color: #409eff" >{{ item.dataset_name }} <span class="mileage">{{ item.file_total }}</span></p>
|
||||
<p @click="openList(item, 'list')"
|
||||
style="font-weight: 400;font-size: 14px;cursor: pointer;color: #409eff">{{ item.dataset_name }} <span
|
||||
class="mileage">{{ item.file_total }}</span></p>
|
||||
<span class="org">{{ item.create_time }}</span>
|
||||
</div>
|
||||
<ul v-show="currenId == item.tsy_id && fold">
|
||||
|
|
@ -40,7 +42,8 @@
|
|||
<div class="left4_list">
|
||||
<div class="list1">
|
||||
<p>航次：</p>
|
||||
<span class="hover-color" style="color: #409eff" @click="turnDeatilPage(item)">{{ item.voyage_name }}</span>
|
||||
<span class="hover-color" style="color: #409eff" @click="turnDeatilPage(item)">{{ item.voyage_name
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="list1">
|
||||
<p>平台类型：</p>
|
||||
|
|
@ -82,7 +85,8 @@
|
|||
<div class="left4_top">
|
||||
<p :style="currentVoyage === item.tsy_id ? 'color: #409eff' : ''">
|
||||
<span style="color: #409eff" @click="turnDeatilPage(item)">{{ item.voyage_name }}</span>
|
||||
<span class="mileage">{{ item.voyage_mileage }}海里</span></p>
|
||||
<span class="mileage">{{ item.voyage_mileage }}海里</span>
|
||||
</p>
|
||||
<span class="org">{{ item.funding_org }}</span>
|
||||
</div>
|
||||
<div class="left4_list">
|
||||
|
|
@ -115,11 +119,15 @@
|
|||
<span>{{ item.serect_status == 'Active' ? '是' : '否' }}</span>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<el-button v-if="!item.highlight" icon="el-icon-s-opportunity" circle @click="addHighlightLayer(item.voyage_name, index)" />
|
||||
<el-button v-if="item.highlight" type="primary" icon="el-icon-s-opportunity" circle @click="clearHighlight" />
|
||||
<el-button v-if="!item.show" icon="el-icon-view" circle @click="addSingleLineImg(item.voyage_name, index)" />
|
||||
<el-button v-if="item.show" type="primary" icon="el-icon-view" circle @click="removeSingleLineImg(item.voyage_name, index)" />
|
||||
<el-button icon="el-icon-location-information" circle />
|
||||
<el-button v-if="!item.highlight" icon="el-icon-s-opportunity" circle
|
||||
@click="addHighlightLayer(item.voyage_name, index)" />
|
||||
<el-button v-if="item.highlight" type="primary" icon="el-icon-s-opportunity" circle
|
||||
@click="clearHighlight(item.voyage_name, index)" />
|
||||
<el-button v-if="!item.show" icon="el-icon-view" circle
|
||||
@click="addSingleLineImg(item.voyage_name, index)" />
|
||||
<el-button v-if="item.show" type="primary" icon="el-icon-view" circle
|
||||
@click="removeSingleLineImg(item.voyage_name, index)" />
|
||||
<!-- <el-button icon="el-icon-location-information" circle /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -139,58 +147,46 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- 航次名称弹窗-->
|
||||
<el-dialog
|
||||
title="请选择航次名称"
|
||||
:visible.sync="dialog1"
|
||||
width="1000px"
|
||||
>
|
||||
<el-table ref="tableData1" border highlight-current-row @current-change="handleCurrentChange1" max-height="480" :data="tableData1" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
|
||||
<el-table-column type="index" label="#" width="50"/>
|
||||
<el-dialog title="请选择航次名称" :visible.sync="dialog1" width="1000px">
|
||||
<el-table ref="tableData1" border highlight-current-row @current-change="handleCurrentChange1" max-height="480"
|
||||
:data="tableData1" :header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }">
|
||||
<el-table-column type="index" label="#" width="50" />
|
||||
<el-table-column prop="name" label="航次名称" />
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
<!-- 平台类型弹窗-->
|
||||
<el-dialog
|
||||
title="请选择平台类型"
|
||||
:visible.sync="dialog2"
|
||||
width="1000px"
|
||||
>
|
||||
<el-table ref="tableData2" border @current-change="handleCurrentChange2" :data="tableData2" max-height="480" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
|
||||
<el-table-column type="index" label="#" width="50"/>
|
||||
<el-dialog title="请选择平台类型" :visible.sync="dialog2" width="1000px">
|
||||
<el-table ref="tableData2" border @current-change="handleCurrentChange2" :data="tableData2" max-height="480"
|
||||
:header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }">
|
||||
<el-table-column type="index" label="#" width="50" />
|
||||
<el-table-column prop="name" label="平台类型名称" />
|
||||
<el-table-column prop="value" label="英文类型名称" />
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
<!-- 设备类型弹窗-->
|
||||
<el-dialog
|
||||
title="请选择设备类型"
|
||||
:visible.sync="dialog3"
|
||||
width="1000px"
|
||||
>
|
||||
<el-table ref="tableData3" border @current-change="handleCurrentChange3" :data="tableData3" max-height="480" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
|
||||
<el-table-column type="index" label="#" width="50"/>
|
||||
<el-dialog title="请选择设备类型" :visible.sync="dialog3" width="1000px">
|
||||
<el-table ref="tableData3" border @current-change="handleCurrentChange3" :data="tableData3" max-height="480"
|
||||
:header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }">
|
||||
<el-table-column type="index" label="#" width="50" />
|
||||
<el-table-column prop="name" label="设备类型名称" />
|
||||
<el-table-column prop="value" label="英文名称" />
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
<!-- 数据样品类型弹窗-->
|
||||
<el-dialog
|
||||
title="请选择数据样品类型"
|
||||
:visible.sync="dialog4"
|
||||
width="1000px"
|
||||
>
|
||||
<el-table ref="tableData4" border @current-change="handleCurrentChange4" :data="tableData4" max-height="480" :header-cell-style="{ background: '#dddfe6',color: '#555960',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
|
||||
<el-table-column type="index" label="#" width="50"/>
|
||||
<el-dialog title="请选择数据样品类型" :visible.sync="dialog4" width="1000px">
|
||||
<el-table ref="tableData4" border @current-change="handleCurrentChange4" :data="tableData4" max-height="480"
|
||||
:header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
|
||||
:cell-style="{ textAlign: 'center' }">
|
||||
<el-table-column type="index" label="#" width="50" />
|
||||
<el-table-column prop="name" label="数据样品类型类型名称" />
|
||||
<el-table-column prop="value" label="英文名称" />
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
<!-- 航次信息弹窗-->
|
||||
<el-dialog
|
||||
title="航次信息"
|
||||
:visible.sync="dialog5"
|
||||
width="800px"
|
||||
>
|
||||
<el-dialog title="航次信息" :visible.sync="dialog5" width="800px">
|
||||
<div class="detail_b">
|
||||
<h3 style="padding-bottom: 10px;">{{ voyageInfo.voyage_name }}</h3>
|
||||
<p>{{ voyageInfo.voyage_remark }}</p>
|
||||
|
|
@ -240,6 +236,10 @@ import Cookies from 'js-cookie'
|
|||
import {
|
||||
setImageryViewModels
|
||||
} from '@/utils/common'
|
||||
import Vue from 'vue'
|
||||
import { loadVectorLayer } from '@/utils/vector-layer-utils'
|
||||
import { ColorGenerator } from '@/utils/color-generator';
|
||||
import { handleWheel } from "@/utils/mapbox-utils";
|
||||
|
||||
const Cesium = window.Cesium
|
||||
export default {
|
||||
|
|
@ -362,7 +362,8 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||||
this.initCesium()
|
||||
this.initMapbox()
|
||||
// this.initCesium()
|
||||
},
|
||||
methods: {
|
||||
// 获取菜单
|
||||
|
|
@ -452,17 +453,27 @@ export default {
|
|||
const arr = res.page.records
|
||||
if (this.radio === '航次') {
|
||||
if (arr.length) {
|
||||
let i = 0;
|
||||
const colors = ColorGenerator.generateDivergingColors(arr.length);
|
||||
arr.forEach(item => {
|
||||
item.highlight = false
|
||||
item.show = true
|
||||
this.addSingleLineImg(item.voyage_name, null)
|
||||
// this.addSingleLineImg(item.voyage_name, null)
|
||||
// 加载轨迹图层
|
||||
loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
|
||||
i++;
|
||||
})
|
||||
}
|
||||
this.dataList = arr
|
||||
}
|
||||
if (this.radio === '数据样品集') {
|
||||
try {
|
||||
this.getDataPoints(arr)
|
||||
}
|
||||
catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加高亮图层
|
||||
|
|
@ -481,8 +492,8 @@ export default {
|
|||
this.dataList[i].highlight = true;
|
||||
},
|
||||
// 清除高亮
|
||||
clearHighlight() {
|
||||
this.dataList.map(item => {item.highlight = false})
|
||||
clearHighlight(voyageName, i) {
|
||||
this.dataList.map(item => { item.highlight = false })
|
||||
// 移除地图上的高亮图层
|
||||
if (this.highlightLayer) {
|
||||
this.viewer.imageryLayers.remove(this.highlightLayer);
|
||||
|
|
@ -491,7 +502,13 @@ export default {
|
|||
},
|
||||
// 显示
|
||||
addSingleLineImg(voyageName, i) {
|
||||
|
||||
if (i !== null) {
|
||||
this.dataList[i].show = true;
|
||||
}
|
||||
// 显示图层
|
||||
Vue.config.maps["dataSearch"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "visible");
|
||||
Vue.config.maps["dataSearch"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "visible");
|
||||
return;
|
||||
// 检查该航次图层是否已存在，避免重复添加
|
||||
if (this.trackLayerMap[voyageName]) {
|
||||
console.warn(`航次 ${voyageName} 的轨迹图层已存在`);
|
||||
|
|
@ -518,6 +535,16 @@ export default {
|
|||
|
||||
// 隐藏
|
||||
removeSingleLineImg(voyageName, i) {
|
||||
if (i !== null) {
|
||||
this.dataList[i].show = false;
|
||||
}
|
||||
// 隐藏图层
|
||||
// let visibility = Vue.config.maps["dataSearch"].getLayoutProperty(`vector-${voyageName}-symbol`, "visibility");
|
||||
// visibility = visibility == "visible" ? "none" : "visible";
|
||||
Vue.config.maps["dataSearch"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "none");
|
||||
Vue.config.maps["dataSearch"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "none");
|
||||
return;
|
||||
|
||||
const layerInstance = this.trackLayerMap[voyageName];
|
||||
if (layerInstance) {
|
||||
// 从Cesium的imageryLayers中移除该图层
|
||||
|
|
@ -581,7 +608,7 @@ export default {
|
|||
},
|
||||
// 清除所有轨迹图层
|
||||
clearAll() {
|
||||
this.clearHighlight()
|
||||
// this.clearHighlight()
|
||||
if (this.trackLayerMap.length) {
|
||||
this.trackLayerMap.forEach(layer => {
|
||||
this.viewer.imageryLayers.remove(layer);
|
||||
|
|
@ -597,9 +624,15 @@ export default {
|
|||
// 获取数据样品集坐标点位
|
||||
getDataPoints(arr) {
|
||||
if (!arr.length) return false
|
||||
let i = 0;
|
||||
const colors = ColorGenerator.generateDivergingColors(arr.length);
|
||||
arr.forEach(item => {
|
||||
this.addSingleLineImg(item.voyage_name, null)
|
||||
this.divingImage(item)
|
||||
// this.addSingleLineImg(item.voyage_name, null)
|
||||
// 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
|
||||
// loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
|
||||
i++;
|
||||
// this.dataList[i].show = true;
|
||||
// this.divingImage(item)
|
||||
})
|
||||
const voyageList = arr
|
||||
voyageList.map(item => {
|
||||
|
|
@ -610,8 +643,14 @@ export default {
|
|||
}).then(res => {
|
||||
item.sampleArray = res.array
|
||||
if (res.array.length) {
|
||||
let i = 0;
|
||||
const colors = ColorGenerator.generateDivergingColors(res.array.length);
|
||||
res.array.forEach(sample => {
|
||||
this.sampleLineImage(sample)
|
||||
console.log(sample);
|
||||
// this.sampleLineImage(sample)
|
||||
// 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
|
||||
// loadVectorLayer(sample.sample_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
|
||||
i++;
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -624,8 +663,13 @@ export default {
|
|||
item.sampleArray = res.array
|
||||
// 格式化坐标点
|
||||
if (res.array.length) {
|
||||
let i = 0;
|
||||
const colors = ColorGenerator.generateDivergingColors(res.array.length);
|
||||
res.array.forEach(sample => {
|
||||
this.sampleLineImage(sample)
|
||||
// this.sampleLineImage(sample)
|
||||
// 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
|
||||
// loadVectorLayer(sample.sample_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
|
||||
i++;
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -635,6 +679,91 @@ export default {
|
|||
console.log(this.dataList)
|
||||
},
|
||||
|
||||
// 初始化 mapbox
|
||||
initMapbox() {
|
||||
window.mapboxgl.accessToken = 'pk.eyJ1IjoicWRod2kiLCJhIjoiY2xiaXppcjEyMGNhMjNwbzVrcHl4d20zOSJ9.0ETMJM3-zllFh2GRrRVUZg'
|
||||
const map = new window.mapboxgl.Map({
|
||||
container: 'cesiumContainerData',
|
||||
// style: 'mapbox://styles/mapbox/standard',
|
||||
style: {
|
||||
"version": 8,
|
||||
"name": "default_style",
|
||||
// mapbox地图使用的图标
|
||||
"sprite": `${Vue.config.baseUrl}/oe/${Vue.config.wwwrootBaseUrl}/sprites/sprite`,
|
||||
// 使用官方标注字体（需联网）
|
||||
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
|
||||
// 自部署标注字体（无需联网），glyphs 前有两个斜杠时，可能导致404
|
||||
// "glyphs": `${Vue.config.baseUrl}/oe/${Vue.config.wwwrootBaseUrl}/glyphs/{fontstack}/{range}.pbf`,
|
||||
"sources": {
|
||||
"影像地图": {
|
||||
"type": "raster",
|
||||
"tiles": [`${Vue.config.baseUrl}/geoserver/gwc/service/wmts/rest/ougp:world/EPSG:900913/EPSG:900913:{z}/{y}/{x}?format=image/jpeg`],
|
||||
"tileSize": 256,
|
||||
// "minzoom": 0,
|
||||
// "maxzoom": baseMapMaxZoom
|
||||
}
|
||||
},
|
||||
"layers": [
|
||||
{
|
||||
"id": "影像地图",
|
||||
"type": "raster",
|
||||
"source": "影像地图",
|
||||
"layout": { visibility: "visible" },
|
||||
// "minzoom": 0,
|
||||
// "maxzoom": baseMapMaxZoom
|
||||
}
|
||||
]
|
||||
},
|
||||
config: {
|
||||
basemap: {
|
||||
theme: 'monochrome',
|
||||
lightPreset: 'night'
|
||||
}
|
||||
},
|
||||
zoom: 5,
|
||||
center: [113, 15.5],
|
||||
minZoom: 2,
|
||||
maxZoom: 29,
|
||||
trackResize: true,
|
||||
scrollZoom: false, // 禁用滚轮缩放
|
||||
// 地图默认字体
|
||||
localIdeographFontFamily: "Microsoft YoHei, 'Noto Sans', 'Noto Sans CJK SC', sans-serif",
|
||||
pitch: 0,
|
||||
bearing: 0,
|
||||
// maxBounds: [[-180, -90], [180, 90]],// Set the map's geographical boundaries.
|
||||
antialias: true,
|
||||
attributionControl: false,
|
||||
boxZoom: true,//如果为true，则启用了“缩放框”交互，按住shift并在地图上拖框放大
|
||||
preserveDrawingBuffer: false,//如果为true，地图的canvas可以使用导出到png，通过map.getCanvas().toDataURL()。默认为false，会提高地图性能。
|
||||
projection: 'equirectangular', // 设置投影方式，经纬度直投（解决缩放级别大于26时瓦片消失的问题）
|
||||
});
|
||||
Vue.config.maps["dataSearch"] = map;
|
||||
|
||||
// 确保窗口大小改变时，地图能正确铺满容器
|
||||
window.addEventListener('resize', (event) => {
|
||||
map.resize();
|
||||
// // maps.forEach((key: string, value: any) => {
|
||||
// // console.log(`${key}: ${value}`);
|
||||
// // });
|
||||
// for (let [key, value] of Object.entries(maps)) {
|
||||
// // value.resize();
|
||||
// }
|
||||
// Object.values(maps).forEach((map) => {
|
||||
// map.resize();
|
||||
// });
|
||||
});
|
||||
|
||||
handleWheel("dataSearch");
|
||||
|
||||
map.on('load', () => {
|
||||
// 加载海岸线
|
||||
loadVectorLayer("GSHHS_f_L1", ["line"], ["#5c71c3"], "visible", "dataSearch", 'ougp');
|
||||
// 加载等深线
|
||||
// loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "visible", "dataSearch", 'ougp');
|
||||
// loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "visible", "dataSearch", 'ougp');
|
||||
});
|
||||
},
|
||||
|
||||
// 初始化cesium
|
||||
initCesium() {
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
||||
|
|
@ -723,7 +852,7 @@ export default {
|
|||
},
|
||||
turnDeatilPage(item) {
|
||||
this.dialog5 = true
|
||||
regInfo({voyage_name: item.voyage_name}).then(res => {
|
||||
regInfo({ voyage_name: item.voyage_name }).then(res => {
|
||||
this.voyageInfo = res.map.voyage
|
||||
})
|
||||
},
|
||||
|
|
@ -738,9 +867,17 @@ export default {
|
|||
},
|
||||
shousuo() {
|
||||
this.show = true
|
||||
// 等待布局变化完成后触发地图 resize
|
||||
setTimeout(() => {
|
||||
Vue.config.maps["dataSearch"].resize();
|
||||
}, 10);
|
||||
},
|
||||
toshow() {
|
||||
this.show = false
|
||||
// 等待布局变化完成后触发地图 resize
|
||||
setTimeout(() => {
|
||||
Vue.config.maps["dataSearch"].resize();
|
||||
}, 10);
|
||||
},
|
||||
// 展开数据样品列表
|
||||
openList(item, type) {
|
||||
|
|
@ -782,6 +919,18 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// #cesiumContainerData {
|
||||
// // position: absolute;
|
||||
// left: 0px;
|
||||
// top: 0px;
|
||||
// bottom: 0px;
|
||||
// right: 0px;
|
||||
// padding: 0px;
|
||||
// margin: 0px;
|
||||
// width: 100%;
|
||||
// height: 100vh;
|
||||
// }
|
||||
|
||||
.shuju {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1034,7 +1183,7 @@ export default {
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 20px;
|
||||
color: rgba(255,255, 255, 0.8);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue