#

Junjie

4 天以前 f89d2b774175f3dc0cf12967c274974d4d164615

 src/main/webapp/views/locMap/locMap.html

@@ -238,101 +238,22 @@
          }
        });
      },
      getShuttleStateInfo() {
        this.sendWs(JSON.stringify({
          "url": "/shuttle/table/shuttle/state",
          "data": {}
        }))
      },
      setShuttleStateInfo(res) {
        // 四向穿梭车信息表获取
        let that = this
        if (res.code == 200) {
          let currentLevShuttle = []//当前楼层小车集合
          res.data.forEach((item,idx) => {
            if (item != null && item.point != undefined && item.point != null) {
              if (item.point.z == that.currentLev) {
                currentLevShuttle.push(item);
              }
            }
          })
          that.shuttleList = res.data
          if (that.shuttleColorList.length == 0) {
            let colorList = []//随机小车颜色
            res.data.forEach((item,idx) => {
              colorList[item.shuttleNo] = that.colorRGB()
            })
            that.shuttleColorList = colorList
          }

          const result = this.findShuttleDiffList(this.currentLevShuttleList, currentLevShuttle);
          if (!result) {
            //小车存在变动，重新渲染全部小车
            pixiShuttleMap.forEach((shuttle,index) => {
              pixiApp.stage.removeChild(shuttle)
              pixiShuttleMap.delete(index)
            })

            currentLevShuttle.forEach((item,index) => {
              pixiApp.loader.load((loader, resources) => {
                // 纹理创建小车
                const shuttle = new PIXI.Sprite(resources.shuttle.texture);
                shuttle.width = width
                shuttle.height = height
                shuttle.x = (item.wcsPoint.y - 0) * width;//更新坐标x
                shuttle.y = (item.wcsPoint.x - 1) * height;//更新坐标y
                shuttle.updateMoveStatus = true;//动画执行完成
                shuttle.interactive = true; // 必须要设置才能接收事件
                shuttle.buttonMode = true; // 让光标在hover时变为手型指针
                shuttle.on('pointerdown', (e) => {
                  this.drawerShuttle = true;
                  this.drawerShuttleData = item;
                })
                pixiApp.stage.addChild(shuttle);
                pixiShuttleMap.set(item.shuttleNo, shuttle);
              })

              if (item.moveAdvancePath != null && item.moveAdvancePath.length > 0) {//存在预计路径，进行渲染
                this.addMoveAdvancePath(item.moveAdvancePath, item.shuttleNo);//添加预计路径
              }

            })
          }else {
            //小车不存在变动，渲染小车位置
            currentLevShuttle.forEach((item,index) => {
              this.updateShuttleXY(item)
            })

            const resultPath = this.findShuttlePathDiffList(JSON.parse(JSON.stringify(this.currentLevShuttleList)), JSON.parse(JSON.stringify(currentLevShuttle)));
            if (!resultPath) {
              //预计路径存在变动，渲染路径
              currentLevShuttle.forEach((item,index) => {
                //删除预计路径
                this.removeMoveAdvancePath(item.shuttleNo);
                if (item.moveAdvancePath != null && item.moveAdvancePath.length > 0) {//存在预计路径，进行渲染
                  this.addMoveAdvancePath(item.moveAdvancePath, item.shuttleNo);//添加预计路径
                }
              })
            }
          }
          that.currentLevShuttleList = currentLevShuttle;
        }
      },
      //获取地图数据
      getMap(lev) {
        this.sendWs(JSON.stringify({
          "url": "/console/locMap/auth",
          "data": lev
        }))
      },
      setMap(res) {
        //获取地图数据
        let data = res.data
        let tmp = []
        for (let i = 1; i < data.length - 1; i++) {
          tmp.push(data[i])
        }
        this.createMapData(tmp)
        let that = this;
          $.ajax({
              url: baseUrl + "/console/map/" + lev + "/auth",
              headers: {
                  'token': localStorage.getItem('token')
              },
              data: {},
              method: 'get',
              success: function(res) {
                //获取地图数据
                let data = res.data
                that.createMapData(data)
              }
          })
      },
      changeFloor(lev) {
        this.currentLev = lev
@@ -365,7 +286,7 @@
        pixiApp.loader.add('shuttle', '../static/images/sxcar.png');

        // 从Graphics对象创建一个纹理
      graphicsF = pixiApp.renderer.generateTexture(getContainer(1000));
          graphicsF = pixiApp.renderer.generateTexture(getContainer(1000));
        graphics0 = pixiApp.renderer.generateTexture(getContainer(0));
        graphics3 = pixiApp.renderer.generateTexture(getContainer(3));
        graphics4 = pixiApp.renderer.generateTexture(getContainer(4));
@@ -434,29 +355,16 @@
        pixiApp.view.addEventListener('wheel', (event) => {
          event.stopPropagation();
          event.preventDefault();
          // 因为画布是充满视窗的，所以clientX等于mouse point在renderer上的x坐标
          const globalPos = [event.clientX, event.clientY];
          const delta = event.deltaY;
          const sx = event.clientX;
          const sy = event.clientY;
          const oldZoom = pixiApp.stage.scale.x;
          const delta = event.deltaY;
          let newZoom = oldZoom * 0.999 ** delta;

          // const oldStageMatrix = app.stage.localTransform.clone();
          // const oldStagePos = oldStageMatrix.applyInverse(pointerGlobalPos);
          const oldStagePos = globalPos;
          const dx = oldStagePos[0] * oldZoom - oldStagePos[0] * newZoom;
          const dy = oldStagePos[1] * oldZoom - oldStagePos[1] * newZoom;

          pixiApp.stage.setTransform(
                  pixiApp.stage.position.x + dx,
                  pixiApp.stage.position.y + dy,
                  newZoom,
                  newZoom,
                  0,
                  0,
                  0,
                  0,
                  0
          );
          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);

        });
        //*******************缩放画布*******************
@@ -478,7 +386,6 @@
          this.reloadMap = false
          pixiStageList = [map.length]//初始化列表
          pixiStaMap = new Map();//重置

          objectsContainer.removeChildren()
          map.forEach((item,index) => {
            pixiStageList[index] = [item.length]
@@ -542,10 +449,21 @@
            }
          });

          //视角居中
          let containerWidth = (pixiApp.view.width - objectsContainer.width) / 2;
          let containerHeight = (pixiApp.view.height - objectsContainer.height) / 2;
          pixiApp.stage.position.set(containerWidth, containerHeight);
          const b1 = objectsContainer.getLocalBounds();
          const b2 = objectsContainer2.getLocalBounds();
          const minX = Math.min(b1.x, b2.x);
          const minY = Math.min(b1.y, b2.y);
          const maxX = Math.max(b1.x + b1.width, b2.x + b2.width);
          const maxY = Math.max(b1.y + b1.height, b2.y + b2.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);
        }else {
          let diff = this.findDiffList(this.map, map);
          diff.forEach((item, index) => {