#

Junjie

20 小时以前 6f95ffdcf6caa911f5e7c34b7797d0496d4a50f2

 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>
</html>