首页启用 mapbox 地图控件，优化相关交互逻辑。
This commit is contained in:
parent
96585b087b
commit
220da59e62
|
|
@ -65,35 +65,19 @@
|
|||
<div class="guiji_2">
|
||||
<div id="cesiumContainer" ref="cesiumContainer"
|
||||
onmouseleave="document.getElementById('mouseWheelTip').style.display = 'none'"
|
||||
style="height: 100%;width:100%;">
|
||||
onmouseenter="document.getElementById('mouseWheelTip').style.display = ''" 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"
|
||||
>
|
||||
<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)"
|
||||
>
|
||||
<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 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>
|
||||
|
|
@ -214,37 +198,38 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="gongju">-->
|
||||
<!-- <div class="gongju_top">-->
|
||||
<!-- <img src="../../static/images/shuju5.png" alt="">-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="gongju_con">-->
|
||||
<!-- <ul>-->
|
||||
<!-- <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
|
||||
<!-- <img src="../../static/images/mofang.png" alt="">-->
|
||||
<!-- <p>blast基因分析工具</p>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
|
||||
<!-- <img src="../../static/images/mofang.png" alt="">-->
|
||||
<!-- <p>温盐深分析工具</p>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
|
||||
<!-- <img src="../../static/images/mofang.png" alt="">-->
|
||||
<!-- <p>影像数据物种智能识别</p>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
|
||||
<!-- <img src="../../static/images/mofang.png" alt="">-->
|
||||
<!-- <p>海洋物理生态耦合模式分析</p>-->
|
||||
<!-- </li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="gongju">-->
|
||||
<!-- <div class="gongju_top">-->
|
||||
<!-- <img src="../../static/images/shuju5.png" alt="">-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="gongju_con">-->
|
||||
<!-- <ul>-->
|
||||
<!-- <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
|
||||
<!-- <img src="../../static/images/mofang.png" alt="">-->
|
||||
<!-- <p>blast基因分析工具</p>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
|
||||
<!-- <img src="../../static/images/mofang.png" alt="">-->
|
||||
<!-- <p>温盐深分析工具</p>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
|
||||
<!-- <img src="../../static/images/mofang.png" alt="">-->
|
||||
<!-- <p>影像数据物种智能识别</p>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li @click="turnPage('http://10.0.82.239/analysisTools/index', 'url')">-->
|
||||
<!-- <img src="../../static/images/mofang.png" alt="">-->
|
||||
<!-- <p>海洋物理生态耦合模式分析</p>-->
|
||||
<!-- </li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import Footer from '../components/public/Footer'
|
||||
import { getVoyage, statisticsNums } from '../api/home'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
|
|
@ -253,6 +238,9 @@ 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 { handleWheel } from "@/utils/mapbox-utils";
|
||||
|
||||
const Cesium = window.Cesium
|
||||
|
||||
|
|
@ -336,7 +324,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
|
||||
this.initCesium()
|
||||
this.initMapbox()
|
||||
},
|
||||
methods: {
|
||||
// 查询航次列表
|
||||
|
|
@ -345,7 +333,16 @@ export default {
|
|||
start: 0,
|
||||
limit: 10
|
||||
}).then(res => {
|
||||
this.voyageList = res.page.records
|
||||
this.voyageList = res.page.records;
|
||||
|
||||
let i = 0;
|
||||
const colors = ColorGenerator.generateDivergingColors(this.voyageList.length);
|
||||
this.voyageList.forEach(element => {
|
||||
// 加载轨迹图层
|
||||
loadVectorLayer(element.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "home", "dsds");
|
||||
i++;
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 默认全选当前页
|
||||
this.$refs.multipleTable.toggleAllSelection()
|
||||
|
|
@ -353,6 +350,77 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
// 初始化 mapbox
|
||||
initMapbox() {
|
||||
window.mapboxgl.accessToken = 'pk.eyJ1IjoicWRod2kiLCJhIjoiY2xiaXppcjEyMGNhMjNwbzVrcHl4d20zOSJ9.0ETMJM3-zllFh2GRrRVUZg'
|
||||
const map = new window.mapboxgl.Map({
|
||||
container: 'cesiumContainer',
|
||||
// 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": ["https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"],
|
||||
"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["home"] = map;
|
||||
|
||||
handleWheel("home");
|
||||
|
||||
map.on('load', () => {
|
||||
// 加载海岸线
|
||||
// loadVectorLayer("GSHHS_f_L1", ["line"], ["#FEFEFE"], "home", 'ougp');
|
||||
// 加载等深线
|
||||
loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "none", "home", 'ougp');
|
||||
loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "none", "home", 'ougp');
|
||||
});
|
||||
},
|
||||
|
||||
// 初始化cesium
|
||||
initCesium() {
|
||||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkY2Y5NWY2Ni1mODQ1LTQ3YTUtYjc4Zi1jYzhjMGI2YzcxMWYiLCJpZCI6MTI5ODMwLCJpYXQiOjE2Nzk0Njk5NTd9.DTH54ioOH-HLqeNIetBe9hFyrPOX2Vp1AQmZzw8TIZ4'
|
||||
|
|
@ -432,6 +500,14 @@ export default {
|
|||
},
|
||||
// 行点击事件处理
|
||||
handleRowClick(row, column, event) {
|
||||
// 原高亮逻辑改为图层显示/隐藏控制
|
||||
let visibility = Vue.config.maps["home"].getLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility");
|
||||
visibility = visibility == "visible" ? "none" : "visible";
|
||||
Vue.config.maps["home"].setLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility", visibility);
|
||||
Vue.config.maps["home"].setLayoutProperty(`vector-${row.voyage_name}-line`, "visibility", visibility);
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
return;
|
||||
|
||||
// 如果点击的是当前已选中的行，则取消选择
|
||||
if (this.currentVoyage === row.voyage_name) {
|
||||
this.clearHighlight();
|
||||
|
|
@ -492,7 +568,9 @@ export default {
|
|||
|
||||
// 移除不再需要的轨迹图层
|
||||
voyagesToRemove.forEach(voyage => {
|
||||
this.removeSingleLineImg(voyage);
|
||||
// this.removeSingleLineImg(voyage);
|
||||
Vue.config.maps["home"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "none");
|
||||
Vue.config.maps["home"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "none");
|
||||
});
|
||||
|
||||
// 添加新选择的轨迹图层
|
||||
|
|
@ -500,7 +578,9 @@ export default {
|
|||
// 从val中找出对应航次的完整数据项
|
||||
const correspondingItem = val.find(item => item.voyage_name === voyage);
|
||||
if (correspondingItem) {
|
||||
this.addSingleLineImg(correspondingItem);
|
||||
// this.addSingleLineImg(correspondingItem);
|
||||
Vue.config.maps["home"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "visible");
|
||||
Vue.config.maps["home"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "visible");
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -517,7 +597,6 @@ export default {
|
|||
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}`,
|
||||
|
|
@ -552,10 +631,12 @@ export default {
|
|||
const index = this.selectedDepths.indexOf(depth);
|
||||
if (index > -1) {
|
||||
this.selectedDepths.splice(index, 1); // 如果已选中，则移除
|
||||
this.removeSingleContourLine(depth); // 移除指定深度的单条等深线
|
||||
// this.removeSingleContourLine(depth); // 移除指定深度的单条等深线
|
||||
Vue.config.maps["home"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "none");
|
||||
} else {
|
||||
this.selectedDepths.push(depth); // 如果未选中，则添加
|
||||
this.addSingleContourLine(depth); // 添加指定深度的单条等深线
|
||||
// this.addSingleContourLine(depth); // 添加指定深度的单条等深线
|
||||
Vue.config.maps["home"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "visible");
|
||||
}
|
||||
},
|
||||
// 添加单条指定深度的等深线
|
||||
|
|
@ -1356,8 +1437,7 @@ export default {
|
|||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
width: auto; height: auto;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue