zhengsl/WholeProcessPlatform
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

3dpopup弹框修改

Browse Source
This commit is contained in:
扈兆增 2026-07-14 17:18:30 +08:00
parent 72d91355bb
commit abfa77f645
1 changed files with 64 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/components/gis/map.cesium.ts
View File

@ -13,6 +13,7 @@ export class MapCesium implements MapInterface {
private clickEventHandler: Cesium.ScreenSpaceEventHandler | null = null; private clickEventHandler: Cesium.ScreenSpaceEventHandler | null = null;
private popupElement: HTMLElement | null = null; private popupElement: HTMLElement | null = null;
private hoveredEntityId: string | null = null; private hoveredEntityId: string | null = null;
private hoverRafId: number | null = null; // requestAnimationFrame 节流
private removePostRenderListener: (() => void) | null = null; private removePostRenderListener: (() => void) | null = null;
private isBatchPopupMode = false; private isBatchPopupMode = false;
private batchPopupContainer: HTMLDivElement | null = null; private batchPopupContainer: HTMLDivElement | null = null;
@ -266,9 +267,20 @@ export class MapCesium implements MapInterface {
// 默认箭头光标，与 2D 一致（不显示拖拽小手） // 默认箭头光标，与 2D 一致（不显示拖拽小手）
canvas.style.cursor = 'default'; canvas.style.cursor = 'default';
// 鼠标移动：光标样式 + hover popup（批量模式下只改光标） // 鼠标移动：光标样式 + hover popup（rAF 节流，批量模式下只改光标）
let pendingMoveEvent: { endPosition: Cesium.Cartesian2 } | null = null;
this.clickEventHandler.setInputAction( this.clickEventHandler.setInputAction(
(move: { endPosition: Cesium.Cartesian2 }) => { (move: { endPosition: Cesium.Cartesian2 }) => {
pendingMoveEvent = move;
if (this.hoverRafId !== null) return; // 已有待处理的帧，跳过
this.hoverRafId = requestAnimationFrame(() => {
this.hoverRafId = null;
const evt = pendingMoveEvent;
pendingMoveEvent = null;
if (!evt) return;
const scene = this.viewer?.scene; const scene = this.viewer?.scene;
if (!scene) return; if (!scene) return;
@ -280,7 +292,7 @@ export class MapCesium implements MapInterface {
return; return;
} }
const picked = scene.pick(move.endPosition); const picked = scene.pick(evt.endPosition);
const entity = const entity =
Cesium.defined(picked) && picked.id instanceof Cesium.Entity Cesium.defined(picked) && picked.id instanceof Cesium.Entity
? (picked.id as Cesium.Entity) ? (picked.id as Cesium.Entity)
@ -313,6 +325,7 @@ export class MapCesium implements MapInterface {
if (!this.isBatchPopupMode) { if (!this.isBatchPopupMode) {
this.hidePopup(); this.hidePopup();
} }
});
}, },
Cesium.ScreenSpaceEventType.MOUSE_MOVE Cesium.ScreenSpaceEventType.MOUSE_MOVE
); );
@ -337,7 +350,7 @@ export class MapCesium implements MapInterface {
} else { } else {
modelStore.modalVisible = true; modelStore.modalVisible = true;
modelStore.params = rawData; modelStore.params = rawData;
modelStore.title = (rawData.titleName || rawData.stnm) + ' 详情信息'; modelStore.title = rawData.titleName || rawData.stnm;
} }
}, },
Cesium.ScreenSpaceEventType.LEFT_CLICK Cesium.ScreenSpaceEventType.LEFT_CLICK
@ -614,7 +627,8 @@ export class MapCesium implements MapInterface {
const { entity, x, y, popupHtml } = candidates[i]; const { entity, x, y, popupHtml } = candidates[i];
const popupEl = document.createElement('div'); const popupEl = document.createElement('div');
popupEl.className = 'map-popup-container'; popupEl.className =
this.popupElement?.className || 'map-popup-container';
popupEl.innerHTML = popupHtml; popupEl.innerHTML = popupHtml;
popupEl.style.position = 'absolute'; popupEl.style.position = 'absolute';
popupEl.style.display = 'block'; popupEl.style.display = 'block';
@ -1077,10 +1091,19 @@ export class MapCesium implements MapInterface {
initPopupOverlay(popupContainer: HTMLDivElement): void { initPopupOverlay(popupContainer: HTMLDivElement): void {
this.popupElement = popupContainer; this.popupElement = popupContainer;
if (this.popupElement) { if (this.popupElement) {
// 清除可能残留的旧样式
this.popupElement.style.removeProperty('position');
this.popupElement.style.removeProperty('transform');
this.popupElement.style.removeProperty('left');
this.popupElement.style.removeProperty('top');
this.popupElement.style.display = 'none'; this.popupElement.style.display = 'none';
this.popupElement.style.position = 'absolute'; this.popupElement.style.position = 'absolute';
this.popupElement.style.transform = 'translate(-50%, calc(-100% - 10px))'; this.popupElement.style.transform = 'translate(-50%, calc(-100% - 10px))';
this.popupElement.style.pointerEvents = 'none'; this.popupElement.style.setProperty(
'pointer-events',
'none',
'important'
);
} }
} }