增加矢量图层相关操作逻辑
This commit is contained in:
parent
6658118fba
commit
2a193a9dff
|
|
@ -0,0 +1,237 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import { regInfo } from '@/api/dataSearch'
|
||||||
|
|
||||||
|
let sourceLayer = undefined;
|
||||||
|
let clickedLineIds = [];
|
||||||
|
|
||||||
|
export function loadVectorLayer(layerId, features = ["line", "symbol"], colors = ["#FEFEFE", "#FF0000"], visibility = "visible", mapId = "home", workspace = 'dsds') {
|
||||||
|
// 添加数据源
|
||||||
|
const sourceId = `vector-${layerId}`;
|
||||||
|
let source = Vue.config.maps[mapId].getSource(sourceId);
|
||||||
|
if (!source)
|
||||||
|
Vue.config.maps[mapId].addSource(sourceId, {
|
||||||
|
type: 'vector',
|
||||||
|
scheme: 'tms',
|
||||||
|
tiles: [`${Vue.config.baseUrl}/geoserver/gwc/service/tms/1.0.0/${workspace}:${layerId}@EPSG:900913@pbf/{z}/{x}/{y}.pbf`],
|
||||||
|
minzoom: 0,
|
||||||
|
maxzoom: 30,
|
||||||
|
generateId: true
|
||||||
|
});
|
||||||
|
|
||||||
|
let i = 0;
|
||||||
|
features.forEach((feature) => {
|
||||||
|
loadVectorFeature(layerId, feature, colors[i++], visibility, mapId);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function loadVectorFeature(layerId, feature, color, visibility, mapId) {
|
||||||
|
let sourceId = `vector-${layerId}`;
|
||||||
|
// symbol
|
||||||
|
// Slot 是 Mapbox 样式规范中的一个概念，它定义了图层在渲染过程中的位置和顺序。
|
||||||
|
let slot = "foreground";
|
||||||
|
let layout = {
|
||||||
|
"symbol-placement": "point",
|
||||||
|
"text-rotation-alignment": "auto",
|
||||||
|
"text-field": ["get", "name"],
|
||||||
|
"text-font": ["literal", ["Arial Unicode MS Regular", "DIN Offc Pro Italic", "Open Sans Regular"]],
|
||||||
|
"text-size": 12,
|
||||||
|
"text-variable-anchor": ["top", "bottom", "left", "right"],
|
||||||
|
"text-radial-offset": 1,
|
||||||
|
"text-justify": "auto",
|
||||||
|
"text-optional": true,
|
||||||
|
"text-allow-overlap": false,
|
||||||
|
"text-ignore-placement": false,
|
||||||
|
'symbol-spacing': 1000, // 像素间距，增大值可减少标注密度
|
||||||
|
// 'text-max-angle': 300, // 角度越大，标注越少
|
||||||
|
"icon-optional": true,
|
||||||
|
"icon-allow-overlap": false,
|
||||||
|
"icon-ignore-placement": false,
|
||||||
|
"icon-image": "dot.png",
|
||||||
|
"icon-size": 1,
|
||||||
|
"visibility": visibility
|
||||||
|
};
|
||||||
|
let paint = {
|
||||||
|
"text-color": color,
|
||||||
|
"text-halo-color": "#FFFFFF",
|
||||||
|
"text-halo-width": 0.1,
|
||||||
|
"icon-opacity": 1,
|
||||||
|
// slot: "middle"
|
||||||
|
};
|
||||||
|
if (feature === "line") {
|
||||||
|
slot = "top";
|
||||||
|
layout = {
|
||||||
|
"visibility": visibility
|
||||||
|
};
|
||||||
|
paint = {
|
||||||
|
"line-opacity": 1,
|
||||||
|
"line-width": [
|
||||||
|
"case",
|
||||||
|
["boolean", ["feature-state", "hover"], false],
|
||||||
|
4,
|
||||||
|
["boolean", ["feature-state", "click"], false],
|
||||||
|
2,
|
||||||
|
1.8
|
||||||
|
],
|
||||||
|
"line-color": [
|
||||||
|
"case",
|
||||||
|
["boolean", ["feature-state", "click"], false],
|
||||||
|
"red",
|
||||||
|
["boolean", ["feature-state", "hover"], false],
|
||||||
|
"yellow",
|
||||||
|
color
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let layer = Vue.config.maps[mapId].getLayer(`${sourceId}-${feature}`);
|
||||||
|
if (!layer) {
|
||||||
|
Vue.config.maps[mapId].addLayer({
|
||||||
|
id: `${sourceId}-${feature}`,
|
||||||
|
'type': feature,
|
||||||
|
'source': sourceId,
|
||||||
|
'source-layer': layerId,
|
||||||
|
'layout': layout,
|
||||||
|
'paint': paint,
|
||||||
|
// 'slot': 'foreground'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击可交互的图层，显示相关信息
|
||||||
|
await setHighlight(`${sourceId}-${feature}`, sourceId, mapId);
|
||||||
|
changeCursor(`${sourceId}-${feature}`, mapId);
|
||||||
|
await showTrackInfo(`${sourceId}-${feature}`, mapId);
|
||||||
|
|
||||||
|
return sourceId;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setHighlight(layerId, sourceId, mapId = "home") {
|
||||||
|
let hoveredLineId = null;
|
||||||
|
let clickedLineId = null;
|
||||||
|
Vue.config.maps[mapId].on('click', layerId, (e) => {
|
||||||
|
if (!e.features || e.features.length <= 0)
|
||||||
|
return;
|
||||||
|
sourceLayer = e.features[0].sourceLayer;
|
||||||
|
// 获取当前单击的线的选择状态
|
||||||
|
let state = Vue.config.maps[mapId].getFeatureState({
|
||||||
|
source: sourceId,
|
||||||
|
sourceLayer: sourceLayer,
|
||||||
|
id: e.features[0].id
|
||||||
|
});
|
||||||
|
if (clickedLineId) {
|
||||||
|
Vue.config.maps[mapId].setFeatureState({ source: sourceId, sourceLayer: sourceLayer, id: clickedLineId }, { click: false });
|
||||||
|
}
|
||||||
|
clickedLineId = e.features[0].id;
|
||||||
|
if (state.click === true) {
|
||||||
|
// 再次单击时取消选择
|
||||||
|
Vue.config.maps[mapId].setFeatureState({ source: sourceId, sourceLayer: sourceLayer, id: clickedLineId }, { click: false });
|
||||||
|
// 隐藏信息框
|
||||||
|
// document.getElementById("cable-overlay")!.style.display = 'none';
|
||||||
|
// 过滤掉当前单击的线
|
||||||
|
clickedLineIds = clickedLineIds.filter((item) => item !== clickedLineId);
|
||||||
|
} else {
|
||||||
|
Vue.config.maps[mapId].setFeatureState({ source: sourceId, sourceLayer: sourceLayer, id: clickedLineId }, { click: true });
|
||||||
|
// 显示信息框
|
||||||
|
// if (sourceId === 'GMSL Cable Data')
|
||||||
|
// document.getElementById("cable-overlay")!.style.display = 'block';
|
||||||
|
// 单击时加入选择列表（用于单击 ESC 键时取消选择状态）
|
||||||
|
clickedLineIds.push(clickedLineId);
|
||||||
|
// document.removeEventListener("keydown", removeHighlight, true);
|
||||||
|
document.addEventListener("keydown", (e) => {
|
||||||
|
removeHighlight(e, sourceId);
|
||||||
|
}, { once: true }); // once：一个布尔值，表示 listener 在添加之后最多只调用一次。如果为 true，listener 会在其被调用之后自动移除。
|
||||||
|
// }, true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// When the user moves their mouse over the state-fill layer, we'll update the feature state for the feature under the mouse.
|
||||||
|
Vue.config.maps[mapId].on('mousemove', layerId, (e) => {
|
||||||
|
if (e.features.length <= 0)
|
||||||
|
return;
|
||||||
|
sourceLayer = e.features[0].sourceLayer;
|
||||||
|
if (hoveredLineId) {
|
||||||
|
Vue.config.maps[mapId].setFeatureState(
|
||||||
|
{ source: sourceId, sourceLayer: sourceLayer, id: hoveredLineId },
|
||||||
|
{ hover: false }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
hoveredLineId = e.features[0].id;
|
||||||
|
Vue.config.maps[mapId].setFeatureState(
|
||||||
|
{ source: sourceId, sourceLayer: sourceLayer, id: hoveredLineId },
|
||||||
|
{ hover: true }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// When the mouse leaves the state-fill layer, update the feature state of the previously hovered feature.
|
||||||
|
Vue.config.maps[mapId].on('mouseleave', layerId, () => {
|
||||||
|
if (hoveredLineId && sourceLayer) {
|
||||||
|
Vue.config.maps[mapId].setFeatureState(
|
||||||
|
{ source: sourceId, sourceLayer: sourceLayer, id: hoveredLineId },
|
||||||
|
{ hover: false }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
hoveredLineId = null;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function changeCursor(layerId, mapId = "home", cursor = "pointer") {
|
||||||
|
Vue.config.maps[mapId].on("mouseenter", layerId, () => {
|
||||||
|
Vue.config.maps[mapId].getCanvas().style.cursor = cursor;
|
||||||
|
});
|
||||||
|
|
||||||
|
Vue.config.maps[mapId].on("mouseleave", layerId, () => {
|
||||||
|
Vue.config.maps[mapId].getCanvas().style.cursor = "";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function showTrackInfo(layerId, mapId = "home") {
|
||||||
|
Vue.config.maps[mapId].on("click", layerId, async (e) => {
|
||||||
|
// 禁止点击事件穿透 - 判断同一个 event 是否已经触发，用于避免图层内标记点注册的点击事件重复触发（点位分布密集时容易出现）
|
||||||
|
if (e.defaultPrevented)
|
||||||
|
return;
|
||||||
|
// 标记该 event 已触发，禁止点击事件穿透
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
let coordinate = e.lngLat;
|
||||||
|
let match = layerId.match(/vector-(.*)-[(symbol)|(line)]/);
|
||||||
|
if (!match)
|
||||||
|
return;
|
||||||
|
const voyageId = match[1];
|
||||||
|
regInfo({ voyage_name: voyageId }).then(res => {
|
||||||
|
const info = res.map.voyage;
|
||||||
|
const description = `
|
||||||
|
<table class="popup-table" style="min-width:380px;">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2"><a style="color:#0000FF" target="_balnk" title="点击查看航次详情" href="${Vue.config.baseUrl}/ds/#/container/dataDetail?voyage_name=${info.voyage_name}">航次信息</a></td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tr>
|
||||||
|
<td>航次编号: <b>${info.voyage_name}</b></td>
|
||||||
|
<td>航次首席: <b>${info.voyage_officer}</b></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>科考船舶: <b>${info.ship_name}</b></td>
|
||||||
|
<td>资助机构: <b>${info.funding_org}</b></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>离港日期: <b>${info.voyage_start_date}</b></td>
|
||||||
|
<td>返港日期: <b>${info.voyage_end_date}</b></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">航次概况: <b>${info.voyage_remark}</b></td>
|
||||||
|
</tr>
|
||||||
|
</table>`;
|
||||||
|
|
||||||
|
showPopupDetails(mapId, coordinate, description, "420px");
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function showPopupDetails(mapId, coordinate, description, maxWidth = "300px", closeButton = true, closeOnClick = true, options = {}) {
|
||||||
|
new window.mapboxgl.Popup({ offset: {}, className: "my-class", closeButton: closeButton, closeOnClick: closeOnClick })
|
||||||
|
.setLngLat(coordinate)
|
||||||
|
.setHTML(description)
|
||||||
|
.setOffset(10)
|
||||||
|
.setMaxWidth(maxWidth)
|
||||||
|
.addTo(Vue.config.maps[mapId]);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue