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

优化 mapbox 控件初始化逻辑

This commit is contained in:
hym 2026-04-02 18:05:51 +08:00
parent acf1ef664a
commit cbe325350b
3 changed files with 73 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/utils/vector-layer-utils.js
View File

@ -6,7 +6,7 @@ let clickedLineIds = [];
// 单例 Popup，用于确保地图上只有一个弹框实例
let sharedPopup = null;
export function loadVectorLayer(layerId, features = ["line", "symbol"], colors = ["#FEFEFE", "#FF0000"], visibility = "visible", mapId = "home", workspace = 'dsds', textField = "name") {
export function loadVectorLayer(layerId, features = ["line", "symbol"], colors = ["#FEFEFE", "#FF0000"], visibility = "visible", mapId = "homeMap", workspace = 'dsds', textField = "name") {
// 添加数据源
const sourceId = `vector-${layerId}`;
let source = Vue.config.maps[mapId].getSource(sourceId);
@ -142,7 +142,7 @@ export async function loadVectorFeature(layerId, feature, color, visibility, map
return sourceId;
}
export function setHighlight(layerId, sourceId, mapId = "home") {
export function setHighlight(layerId, sourceId, mapId = "homeMap") {
let hoveredLineId = null;
let clickedLineId = null;
Vue.config.maps[mapId].on('click', layerId, (e) => {
@ -231,7 +231,7 @@ export function setHighlight(layerId, sourceId, mapId = "home") {
});
}
export function changeCursor(layerId, mapId = "home", cursor = "pointer") {
export function changeCursor(layerId, mapId = "homeMap", cursor = "pointer") {
Vue.config.maps[mapId].on("mouseenter", layerId, () => {
Vue.config.maps[mapId].getCanvas().style.cursor = cursor;
});
@ -241,7 +241,7 @@ export function changeCursor(layerId, mapId = "home", cursor = "pointer") {
});
}
export function showSampleLineInfo(layerId, mapId = "home") {
export function showSampleLineInfo(layerId, mapId = "homeMap") {
Vue.config.maps[mapId].on("click", layerId, async (e) => {
// 禁止点击事件穿透 - 判断同一个 event 是否已经触发，用于避免图层内标记点注册的点击事件重复触发（点位分布密集时容易出现）
if (e.defaultPrevented)
@ -290,7 +290,7 @@ export function showSampleLineInfo(layerId, mapId = "home") {
});
}
export function showSampleStationInfo(layerId, mapId = "home") {
export function showSampleStationInfo(layerId, mapId = "homeMap") {
Vue.config.maps[mapId].on("click", layerId, async (e) => {
// 禁止点击事件穿透 - 判断同一个 event 是否已经触发，用于避免图层内标记点注册的点击事件重复触发（点位分布密集时容易出现）
if (e.defaultPrevented)
@ -338,7 +338,7 @@ export function showSampleStationInfo(layerId, mapId = "home") {
});
}
export function showTrackInfo(layerId, mapId = "home") {
export function showTrackInfo(layerId, mapId = "homeMap") {
Vue.config.maps[mapId].on("click", layerId, async (e) => {
// 禁止点击事件穿透 - 判断同一个 event 是否已经触发，用于避免图层内标记点注册的点击事件重复触发（点位分布密集时容易出现）
if (e.defaultPrevented)

143
src/views/dataSearch.vue
View File

@ -141,7 +141,7 @@
<img src="../../static/images/arrow_nav1.png" alt="">
</div>
<div class="right">
<div id="cesiumContainerData" style="height: 100vh;width:100%;" />
<div id="dataSearchMap" style="height: 100vh;width:100%;" />
<a @click="goHome"> <img class="logo" src="../../static/images/logo_map.png" alt="">
<p class="goHome">返回首页</p>
</a>
@ -240,7 +240,7 @@ import {
import Vue from 'vue'
import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator';
import { handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
const Cesium = window.Cesium
export default {
@ -363,8 +363,17 @@ export default {
},
},
mounted() {
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
this.initMapbox()
initMapbox("dataSearchMap", {
tileKey: "world_horizon_1",
zoom: 4,
center: [122, 15],
minZoom: 2,
maxZoom: 29,
coastlineOn:false,
contourOn:false
});
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
// this.initCesium()
},
methods: {
@ -462,7 +471,7 @@ export default {
item.show = true
// this.addSingleLineImg(item.voyage_name, null)
// 加载轨迹图层
loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearchMap", "dsds");
i++;
})
}
@ -480,7 +489,7 @@ export default {
},
// 添加高亮图层
addHighlightLayer(voyageName, i) {
Vue.config.maps["dataSearch"].setPaintProperty(`vector-${voyageName}-line`, "line-width", 4);
Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", 4);
this.dataList[i].highlight = true;
return;
@ -507,7 +516,7 @@ export default {
2,
1.8
];
Vue.config.maps["dataSearch"].setPaintProperty(`vector-${voyageName}-line`, "line-width", lineWidthExpression);
Vue.config.maps["dataSearchMap"].setPaintProperty(`vector-${voyageName}-line`, "line-width", lineWidthExpression);
this.dataList[i].highlight = false;
return;
@ -524,8 +533,8 @@ export default {
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");
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "visible");
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "visible");
return;
// 检查该航次图层是否已存在，避免重复添加
if (this.trackLayerMap[voyageName]) {
@ -557,10 +566,10 @@ export default {
this.dataList[i].show = false;
}
// 隐藏图层
// let visibility = Vue.config.maps["dataSearch"].getLayoutProperty(`vector-${voyageName}-symbol`, "visibility");
// let visibility = Vue.config.maps["dataSearchMap"].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");
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-symbol`, "visibility", "none");
Vue.config.maps["dataSearchMap"].setLayoutProperty(`vector-${voyageName}-line`, "visibility", "none");
return;
const layerInstance = this.trackLayerMap[voyageName];
@ -647,9 +656,9 @@ export default {
arr.forEach(item => {
// 添加测线/站位图层
if (item.job_type == "测线作业") {
loadVectorLayer(`sample_line_${item.dataset_name}`, ["line"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearch", "dsds", "sample_name");
loadVectorLayer(`sample_line_${item.dataset_name}`, ["line"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearchMap", "dsds", "sample_name");
} else {
loadVectorLayer(`sample_station_${item.dataset_name}`, ["symbol"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearch", "dsds", "sample_name");
loadVectorLayer(`sample_station_${item.dataset_name}`, ["symbol"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearchMap", "dsds", "sample_name");
}
i++;
@ -690,100 +699,10 @@ export default {
this.dataList = voyageList
},
// 初始化 mapbox
initMapbox() {
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.tiles["GEBCO_basemap_NCEI"]],
"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,
// // 禁用所有旋转和俯仰角控制
// dragRotate: false,
// touchZoomRotate: false,
// pitchWithRotate: false,
// 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");
Vue.config.maps["dataSearch"].scrollZoom.enable();
initSprites("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'
this.viewer = new Cesium.Viewer('cesiumContainerData', {
this.viewer = new Cesium.Viewer('dataSearchMap', {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
@ -885,14 +804,14 @@ export default {
this.show = true
// 等待布局变化完成后触发地图 resize
setTimeout(() => {
Vue.config.maps["dataSearch"].resize();
Vue.config.maps["dataSearchMap"].resize();
}, 10);
},
toshow() {
this.show = false
// 等待布局变化完成后触发地图 resize
setTimeout(() => {
Vue.config.maps["dataSearch"].resize();
Vue.config.maps["dataSearchMap"].resize();
}, 10);
},
// 展开数据样品列表
@ -936,16 +855,16 @@ export default {
lon = Number(sample.sampling_lon);
lat = Number(sample.sampling_lat);
}
Vue.config.maps["dataSearch"].setZoom(10);
Vue.config.maps["dataSearch"].flyTo({
Vue.config.maps["dataSearchMap"].setZoom(10);
Vue.config.maps["dataSearchMap"].flyTo({
center: [lon, lat],
speed: 10
});
let layerId = `vector-${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}-${job_type == "测线作业" ? "line" : "symbol"}`;
let sourceLayerId = `${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}`;
// vector-sample_station_TS-46-1_FDZ377_Slurp_SWYP-symbol、vector-sample_line_TS2-29-1_SY612_GQXJ_PJZP-line
// highlightFeaturesByProperty("dataSearch", `${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}`, layerId, "sample_name", sample.sample_name);
triggerLayerClick("dataSearch", sourceLayerId, layerId, [lon, lat], { "sample_name": sample.sample_name });
// highlightFeaturesByProperty("dataSearchMap", `${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}`, layerId, "sample_name", sample.sample_name);
triggerLayerClick("dataSearchMap", sourceLayerId, layerId, [lon, lat], { "sample_name": sample.sample_name });
},
goHome() {
this.$router.push({ name: 'home' })
@ -961,7 +880,7 @@ export default {
</script>
<style scoped lang="scss">
// #cesiumContainerData {
// #dataSearchMap {
// // position: absolute;
// left: 0px;
// top: 0px;

126
src/views/home.vue
View File

@ -63,8 +63,7 @@
<img src="../../static/images/guiji.png" alt="">
</div>
<div class="guiji_2">
<div id="cesiumContainer" ref="cesiumContainer"
onmouseleave="document.getElementById('mouseWheelTip').style.display = 'none'"
<div id="homeMap" ref="homeMap" onmouseleave="document.getElementById('mouseWheelTip').style.display = 'none'"
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>
@ -240,7 +239,7 @@ import {
} from '@/utils/common'
import { loadVectorLayer } from '@/utils/vector-layer-utils'
import { ColorGenerator } from '@/utils/color-generator';
import { handleWheel, initSprites } from "@/utils/mapbox-utils";
import { initMapbox, handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
const Cesium = window.Cesium
@ -323,8 +322,28 @@ export default {
this.sampleDataUpdate()
},
mounted() {
this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
this.initMapbox()
initMapbox("homeMap", {
tileKey: "World_Imagery",
zoom: 4,
center: [122, 15],
minZoom: 2,
maxZoom: 29,
coastlineOn: false,
contourOn: false
});
Vue.config.maps["homeMap"].on('load', () => {
handleWheel("homeMap");
Vue.config.maps["homeMap"].scrollZoom.disable();
// 加载海岸线
// loadVectorLayer("GSHHS_f_L1", ["line"], ["#FEFEFE"], "homeMap", 'ougp');
// 加载等深线（默认不显示）
loadVectorLayer("contour-4500m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp');
loadVectorLayer("contour-6000m", ["line"], ["#FEFEFE"], "none", "homeMap", 'ougp');
});
// this.imageryViewModels = setImageryViewModels(this.CesiumHostAddr)
},
methods: {
// 查询航次列表
@ -339,7 +358,7 @@ export default {
const colors = ColorGenerator.generateDivergingColors(this.voyageList.length);
this.voyageList.forEach(element => {
// 加载轨迹图层
loadVectorLayer(element.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "home", "dsds");
loadVectorLayer(element.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "homeMap", "dsds");
i++;
});
@ -350,85 +369,10 @@ export default {
})
},
// 初始化 mapbox
initMapbox() {
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, // 初始俯仰角为0
bearing: 0, // 初始方位角为0
// 禁用所有旋转和俯仰角控制
dragRotate: false,
touchZoomRotate: false,
pitchWithRotate: false,
// 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");
initSprites("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'
this.viewer = new Cesium.Viewer('cesiumContainer', {
this.viewer = new Cesium.Viewer('homeMap', {
sceneMode: Cesium.SceneMode.SCENE2D,
shadows: false,
timeline: false,
@ -505,10 +449,10 @@ export default {
// 行点击事件处理
handleRowClick(row, column, event) {
// 原高亮逻辑改为图层显示/隐藏控制
let visibility = Vue.config.maps["home"].getLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility");
let visibility = Vue.config.maps["homeMap"].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);
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-symbol`, "visibility", visibility);
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${row.voyage_name}-line`, "visibility", visibility);
this.$refs.multipleTable.toggleRowSelection(row);
return;
@ -573,8 +517,8 @@ export default {
// 移除不再需要的轨迹图层
voyagesToRemove.forEach(voyage => {
// this.removeSingleLineImg(voyage);
Vue.config.maps["home"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "none");
Vue.config.maps["home"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "none");
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "none");
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "none");
});
// 添加新选择的轨迹图层
@ -583,8 +527,8 @@ export default {
const correspondingItem = val.find(item => item.voyage_name === voyage);
if (correspondingItem) {
// this.addSingleLineImg(correspondingItem);
Vue.config.maps["home"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "visible");
Vue.config.maps["home"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "visible");
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-symbol`, "visibility", "visible");
Vue.config.maps["homeMap"].setLayoutProperty(`vector-${voyage}-line`, "visibility", "visible");
}
});
@ -636,11 +580,11 @@ export default {
if (index > -1) {
this.selectedDepths.splice(index, 1); // 如果已选中，则移除
// this.removeSingleContourLine(depth); // 移除指定深度的单条等深线
Vue.config.maps["home"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "none");
Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "none");
} else {
this.selectedDepths.push(depth); // 如果未选中，则添加
// this.addSingleContourLine(depth); // 添加指定深度的单条等深线
Vue.config.maps["home"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "visible");
Vue.config.maps["homeMap"].setLayoutProperty(`vector-contour-${depth}m-line`, "visibility", "visible");
}
},
// 添加单条指定深度的等深线