From 6f95ffdcf6caa911f5e7c34b7797d0496d4a50f2 Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期四, 26 二月 2026 10:56:48 +0800
Subject: [PATCH] #
---
src/main/webapp/views/locMap/locMap.html | 151 ++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 128 insertions(+), 23 deletions(-)
diff --git a/src/main/webapp/views/locMap/locMap.html b/src/main/webapp/views/locMap/locMap.html
index 5d34f56..89b413c 100644
--- a/src/main/webapp/views/locMap/locMap.html
+++ b/src/main/webapp/views/locMap/locMap.html
@@ -101,7 +101,11 @@
let pixiStageList = [];
let pixiStaMap = new Map();
let objectsContainer;
+ let objectsContainer3;
+ let mapRoot;
+ let mapContentSize = { width: 0, height: 0 };
let graphics0;
+ let graphicsF;
let graphics3;
let graphics4;
let graphics5;
@@ -125,6 +129,12 @@
currentLevStaList: [],//褰撳墠妤煎眰绔欑偣list
drawerSta: false,
drawerStaData: null,
+ mapRotation: 0,
+ mapMirrorX: false,
+ mapConfigCodes: {
+ rotate: 'map_canvas_rotation',
+ mirror: 'map_canvas_mirror_x'
+ }
},
mounted() {
this.init()
@@ -157,6 +167,7 @@
ws.onclose = this.webSocketClose
+ this.loadMapTransformConfig()
this.initLev()//鍒濆鍖栨ゼ灞備俊鎭�
setTimeout(() => {
that.getMap(this.currentLev)
@@ -205,6 +216,7 @@
},
changeFloor(lev) {
this.currentLev = lev
+ this.loadMapTransformConfig()
this.reloadMap = true
this.getMap(lev)
},
@@ -229,13 +241,15 @@
graphics67 = pixiApp.renderer.generateTexture(getContainer(67));
graphicsLock = pixiApp.renderer.generateTexture(getContainer(-999));
+ mapRoot = new PIXI.Container();
+ pixiApp.stage.addChild(mapRoot);
// 鍒涘缓涓�涓鍣ㄦ潵绠＄悊澶ф壒閲忕殑鏄剧ず瀵硅薄
objectsContainer = new PIXI.Container();
- pixiApp.stage.addChild(objectsContainer);
+ mapRoot.addChild(objectsContainer);
// 鍒涘缓涓�涓鍣ㄦ潵绠＄悊澶ф壒閲忕殑鏄剧ず瀵硅薄
objectsContainer3 = new PIXI.Container();
- pixiApp.stage.addChild(objectsContainer3);
+ mapRoot.addChild(objectsContainer3);
//*******************鎷栧姩鐢诲竷*******************
let stageOriginalPos;
@@ -285,16 +299,22 @@
pixiApp.view.addEventListener('wheel', (event) => {
event.stopPropagation();
event.preventDefault();
- const sx = event.clientX;
- const sy = event.clientY;
- const oldZoom = pixiApp.stage.scale.x;
+ const rect = pixiApp.view.getBoundingClientRect();
+ const sx = event.clientX - rect.left;
+ const sy = event.clientY - rect.top;
+ const oldZoomX = pixiApp.stage.scale.x || 1;
+ const oldZoomY = pixiApp.stage.scale.y || 1;
+ const oldZoomAbs = Math.abs(oldZoomX) || 1;
const delta = event.deltaY;
- let newZoom = oldZoom * 0.999 ** delta;
- const worldX = (sx - pixiApp.stage.position.x) / oldZoom;
- const worldY = (sy - pixiApp.stage.position.y) / oldZoom;
- const newPosX = sx - worldX * newZoom;
- const newPosY = sy - worldY * newZoom;
- pixiApp.stage.setTransform(newPosX, newPosY, newZoom, newZoom, 0, 0, 0, 0, 0);
+ let newZoomAbs = oldZoomAbs * 0.999 ** delta;
+ const mirrorX = this.mapMirrorX ? -1 : 1;
+ const newZoomX = mirrorX * newZoomAbs;
+ const newZoomY = newZoomAbs;
+ const worldX = (sx - pixiApp.stage.position.x) / oldZoomX;
+ const worldY = (sy - pixiApp.stage.position.y) / oldZoomY;
+ const newPosX = sx - worldX * newZoomX;
+ const newPosY = sy - worldY * newZoomY;
+ pixiApp.stage.setTransform(newPosX, newPosY, newZoomX, newZoomY, 0, 0, 0, 0, 0);
});
//*******************缂╂斁鐢诲竷*******************
@@ -388,21 +408,106 @@
});
const b1 = objectsContainer.getLocalBounds();
- const minX = Math.min(b1.x);
- const minY = Math.min(b1.y);
- const maxX = Math.max(b1.x + b1.width);
- const maxY = Math.max(b1.y + b1.height);
+ const minX = b1.x;
+ const minY = b1.y;
+ const maxX = b1.x + b1.width;
+ const maxY = b1.y + b1.height;
const contentW = Math.max(0, maxX - minX);
const contentH = Math.max(0, maxY - minY);
- const vw = pixiApp.view.width;
- const vh = pixiApp.view.height;
- let scale = Math.min(vw / contentW, vh / contentH) * 0.95;
- if (!isFinite(scale) || scale <= 0) { scale = 1; }
- const posX = (vw - contentW * scale) / 2 - minX * scale;
- const posY = (vh - contentH * scale) / 2 - minY * scale;
- pixiApp.stage.setTransform(posX, posY, scale, scale, 0, 0, 0, 0, 0);
+ mapContentSize = { width: contentW, height: contentH };
+ this.applyMapTransform(true);
}
this.map = map;
+ },
+ parseRotation(value) {
+ const num = parseInt(value, 10);
+ if (!isFinite(num)) { return 0; }
+ const rot = ((num % 360) + 360) % 360;
+ return (rot === 90 || rot === 180 || rot === 270) ? rot : 0;
+ },
+ parseMirror(value) {
+ if (value === true || value === false) { return value; }
+ if (value == null) { return false; }
+ const str = String(value).toLowerCase();
+ return str === '1' || str === 'true' || str === 'y';
+ },
+ loadMapTransformConfig() {
+ if (!window.$ || typeof baseUrl === 'undefined') { return; }
+ $.ajax({
+ url: baseUrl + "/config/listAll/auth",
+ headers: { 'token': localStorage.getItem('token') },
+ dataType: 'json',
+ method: 'GET',
+ success: (res) => {
+ if (!res || res.code !== 200 || !Array.isArray(res.data)) {
+ if (res && res.code === 403) { parent.location.href = baseUrl + "/login"; }
+ return;
+ }
+ const byCode = {};
+ res.data.forEach((item) => {
+ if (item && item.code) { byCode[item.code] = item; }
+ });
+ const rotateCfg = byCode[this.mapConfigCodes.rotate];
+ const mirrorCfg = byCode[this.mapConfigCodes.mirror];
+ if (rotateCfg && rotateCfg.value != null) {
+ this.mapRotation = this.parseRotation(rotateCfg.value);
+ }
+ if (mirrorCfg && mirrorCfg.value != null) {
+ this.mapMirrorX = this.parseMirror(mirrorCfg.value);
+ }
+ if (mapContentSize && mapContentSize.width > 0 && mapContentSize.height > 0) {
+ this.applyMapTransform(true);
+ }
+ }
+ });
+ },
+ getViewportSize() {
+ if (!pixiApp || !pixiApp.renderer) { return { width: 0, height: 0 }; }
+ const screen = pixiApp.renderer.screen;
+ if (screen && screen.width > 0 && screen.height > 0) {
+ return { width: screen.width, height: screen.height };
+ }
+ const rect = pixiApp.view ? pixiApp.view.getBoundingClientRect() : null;
+ return { width: rect ? rect.width : 0, height: rect ? rect.height : 0 };
+ },
+ getTransformedContentSize() {
+ const size = mapContentSize || { width: 0, height: 0 };
+ const w = size.width || 0;
+ const h = size.height || 0;
+ const rot = ((this.mapRotation % 360) + 360) % 360;
+ const swap = rot === 90 || rot === 270;
+ return { width: swap ? h : w, height: swap ? w : h };
+ },
+ fitStageToContent() {
+ if (!pixiApp || !mapContentSize) { return; }
+ const size = this.getTransformedContentSize();
+ const contentW = size.width || 0;
+ const contentH = size.height || 0;
+ if (contentW <= 0 || contentH <= 0) { return; }
+ const viewport = this.getViewportSize();
+ const vw = viewport.width;
+ const vh = viewport.height;
+ let scale = Math.min(vw / contentW, vh / contentH) * 0.95;
+ if (!isFinite(scale) || scale <= 0) { scale = 1; }
+ const baseW = mapContentSize.width || contentW;
+ const baseH = mapContentSize.height || contentH;
+ const mirrorX = this.mapMirrorX ? -1 : 1;
+ const scaleX = scale * mirrorX;
+ const scaleY = scale;
+ const posX = (vw / 2) - (baseW / 2) * scaleX;
+ const posY = (vh / 2) - (baseH / 2) * scaleY;
+ pixiApp.stage.setTransform(posX, posY, scaleX, scaleY, 0, 0, 0, 0, 0);
+ },
+ applyMapTransform(fitToView) {
+ if (!mapRoot || !mapContentSize) { return; }
+ const contentW = mapContentSize.width || 0;
+ const contentH = mapContentSize.height || 0;
+ if (contentW <= 0 || contentH <= 0) { return; }
+ mapRoot.pivot.set(contentW / 2, contentH / 2);
+ mapRoot.position.set(contentW / 2, contentH / 2);
+ mapRoot.rotation = (this.mapRotation % 360) * Math.PI / 180;
+ mapRoot.scale.set(1, 1);
+ if (fitToView) { this.fitStageToContent(); }
},
rightEvent(x, y, e) {
this.drawerLocNo = true
@@ -542,4 +647,4 @@
</script>
</body>
-</html>
\ No newline at end of file
+</html>
--
Gitblit v1.9.1