feat: 水牌

public/static/qm/MainMap_QM.js

@@ -320,7 +320,7 @@ ConfigFun = function () {
     Config.selectBuild = Config.deviceObj.build
 
     let backObj = { code: 200, msg: '加载成功', data: [] }
-    if(mapData){
+    if (mapData) {
       try {
         if (mapData.mallKey != 'Zeditor') {
           Config.allMap = JSON.parse(mapData.mapData)
@@ -333,9 +333,8 @@ ConfigFun = function () {
         callBack(backObj)
         callBack = null
       }
-      Config.getShopData(callBack,shopData)
+      Config.getShopData(callBack, shopData)
     }
-
   }
   /*** -----------------------------------------------      参数 API END       ----------------------------------------------- **** */
   this.Point = function (x = 0, y = 0) {
@@ -1441,7 +1440,7 @@ ConfigFun = function () {
     return len
   }
 
-  this.getShopData = function (callBack,shopData) {
+  this.getShopData = function (callBack, shopData) {
     let backObj = { code: 200, msg: '加载成功', data: [] }
     if (shopData) {
       Config.shopData = shopData.shopList
@@ -1467,7 +1466,7 @@ ConfigFun = function () {
       if (backObj.code == 404) {
         callBack(backObj)
       }
-    }else{
+    } else {
       backObj.code = 500
       backObj.msg = '店铺数据错误'
       callBack(backObj)
@@ -4575,19 +4574,19 @@ MainMap_QM.prototype = {
    * Map_QM.changeWindowResize(1280,1080);
    */
   changeWindowResize: function (width = -1, height = -1) {
-    aspect = width/height;
-	cameraPerspective.aspect = aspect;
-	cameraPerspective.updateProjectionMatrix();
-	cameraOrtho.left = 340 * aspect / -2;
-	cameraOrtho.right = 340 * aspect / 2;
-	cameraOrtho.top = 340/2;
-	cameraOrtho.bottom = 340/-2;
-	cameraOrtho.updateProjectionMatrix();
-
-	Map_QM.renderer.setSize(width, height);
-	Map_QM.labelRenderer.setSize(width, height);
-	Map_QM.w = width;
-	Map_QM.h = height;
+    aspect = width / height
+    cameraPerspective.aspect = aspect
+    cameraPerspective.updateProjectionMatrix()
+    cameraOrtho.left = (340 * aspect) / -2
+    cameraOrtho.right = (340 * aspect) / 2
+    cameraOrtho.top = 340 / 2
+    cameraOrtho.bottom = 340 / -2
+    cameraOrtho.updateProjectionMatrix()
+
+    Map_QM.renderer.setSize(width, height)
+    Map_QM.labelRenderer.setSize(width, height)
+    Map_QM.w = width
+    Map_QM.h = height
   }
 }
 Object.assign(MainMap_QM.prototype, THREE.EventDispatcher.prototype)
@@ -5195,7 +5194,7 @@ FloorMap_QM.prototype = {
         alphaTest: 0.5
       })
       Map_QM.dirIcon = new MySprite_QM(spriteMaterial2)
-      Map_QM.dirIcon.scale.set(80, 80, 1)
+      Map_QM.dirIcon.scale.set(160, 160, 1)
       Map_QM.dirIcon.center = new THREE.Vector2(0.5, 0.5)
       Map_QM.dirIcon.position.set(shopX, -1 * shopY, shopZ)
       Map_QM.dirIcon.renderOrder = 300

src/components/Map/Map.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 地图容器 -->
-    <div id="mapContainer" :class="$route.path === '/guide' ? 'guide' : ''" />
+    <div id="mapContainer" :class="$route.path === '/billboard' ? 'billboard' : $route.path === '/guide' ? 'guide' : ''" />
 
     <!-- 地图弹框 -->
     <div id="shopInfo" class="boxShop boxShop2" :style="{ backgroundImage: `url(${require('@/assets/images/map/map-dialog.png')})` }">
@@ -48,6 +48,9 @@ function handleDetail() {
   width: 1080px;
   z-index: 10;
   overflow: hidden;
+  &.billboard {
+    pointer-events: none;
+  }
   &.guide {
     top: 408px;
   }

src/views/Billboard/Billboard.vue

@@ -29,7 +29,7 @@
                   {{ data.shopName }}
                 </div>
               </div>
-              <div class="right"></div>
+              <div class="right">{{ data.distance ? data.distance + '米' : '' }}</div>
             </div>
 
             <div v-else class="placeholder" :key="'placeholder' + i + '_' + j"></div>
@@ -53,13 +53,34 @@ import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 import { useRouter } from 'vue-router'
 import { getBrandListByFormat } from '@/http/brand/api'
+import { getMap } from '@/http/api'
+import arrows from './arrows/arrows'
+
+const getCodeByAngle = angle =>
+  angle < (Math.PI / 8) * 1 || angle > (Math.PI / 8) * 15
+    ? '8003'
+    : angle >= (Math.PI / 8) * 1 && angle < (Math.PI / 8) * 3
+    ? '8002'
+    : angle >= (Math.PI / 8) * 3 && angle < (Math.PI / 8) * 5
+    ? '8001'
+    : angle >= (Math.PI / 8) * 5 && angle < (Math.PI / 8) * 7
+    ? '8008'
+    : angle >= (Math.PI / 8) * 7 && angle < (Math.PI / 8) * 9
+    ? '8007'
+    : angle >= (Math.PI / 8) * 9 && angle < (Math.PI / 8) * 11
+    ? '8006'
+    : angle >= (Math.PI / 8) * 11 && angle < (Math.PI / 8) * 13
+    ? '8005'
+    : '8004'
+
+const getDistance = (a, b) => Math.sqrt((b.x - a.x) * (b.x - a.x) + (b.y - a.y) * (b.y - a.y))
 
 const timeout = 30000
 const heights = { shop: 44, format: 49, placeholder: 40 }
 const setValue = refInstance => value => Object.assign(refInstance, { value })
 const store = useStore()
 const router = useRouter()
-const shopListByFormat = ref([])
+const shops = ref([])
 const listRef = ref(null)
 const { currentFloor, buildingList } = storeToRefs(store)
 const bf = computed(() => (buildingList.length > 1 ? currentFloor.value.building + '-' : '') + currentFloor.value.floor)
@@ -78,15 +99,52 @@ const setRemainingMinutes = setValue(remainingMinutes)
 const showBullets = computed(() => scrollLefts.value.length > 1)
 const columnHeight = 746
 
-const shops = computed(() =>
-  shopListByFormat.value.map(brand => ({
+Promise.all([getMap(), getBrandListByFormat()]).then(
+  ([
+    {
+      data: { mapData }
+    },
+    { data: brandListByFormat }
+  ]) => {
+    console.log(currentFloor.value)
+    const device = currentFloor.value
+    device.angle = Number(device.angle)
+    if (isNaN(device.angle)) device.angle = 0
+    const building = JSON.parse(mapData)[0]
+    const map = building.buildArr[device.floorOrder].mapData
+    const nodes = map.path.nodes
+
+    const deviceX = nodes[device.location].x
+    const deviceY = nodes[device.location].y
+    shops.value = brandListByFormat.list.map(brand => {
+      const shopList = brand.shopList.filter(shop => shop.floor === currentFloor.value.floor)
+      console.log(shopList)
+      shopList.forEach(shop => {
+        shop.xaxis = JSON.parse(shop.xaxis)
+        try {
+          shop.xaxis = shop.xaxis.map(Number)
+          let angle = (Math.atan2(deviceY - shop.xaxis[2], shop.xaxis[0] - deviceX) / Math.PI) * 180 - device.angle
+          if (angle < 0) angle += 360
+          if (angle > 360) angle -= 360
+          angle = (angle / 180) * Math.PI
+          shop.dir = arrows[getCodeByAngle(angle)]
+        } catch (error) {
+          shop.dir = arrows[getCodeByAngle(0)]
+          console.warn(error)
+        }
+        try {
+          shop.distance = Math.ceil(getDistance({ x: deviceX, y: deviceY }, { x: shop.xaxis[0], y: shop.xaxis[2] }) / building.scale)
+        } catch (error) {
+          console.warn(error)
+        }
+      })
+      return {
         ...brand,
-    shopList: brand.shopList.filter(shop => shop.floor === currentFloor.value.floor)
-  }))
+        shopList
+      }
+    })
+  }
 )
-getBrandListByFormat().then(({ data }) => {
-  shopListByFormat.value = data.list
-})
 
 try {
   window.Map_QM?.showFloor?.(currentFloor.value.floorOrder)
@@ -327,11 +385,12 @@ watch(scrollLefts, _scrollLefts => {
         }
         .right {
           display: inline-flex;
-          flex: 0 0 50px;
+          flex: 0 0 100 px;
           font-weight: 500;
           font-size: 16px;
           line-height: 19px;
-          text-align: right;
+          justify-content: flex-end;
+          padding-right: 16px;
           color: rgba(0, 0, 0, 0.6);
         }
         .dir {

src/views/Billboard/arrows/arrows.js

@@ -0,0 +1,19 @@
+import a from "./8001.png";
+import b from "./8002.png";
+import c from "./8003.png";
+import d from "./8004.png";
+import e from "./8005.png";
+import f from "./8006.png";
+import g from "./8007.png";
+import h from "./8008.png";
+const arrows = {
+  8001: a,
+  8002: b,
+  8003: c,
+  8004: d,
+  8005: e,
+  8006: f,
+  8007: g,
+  8008: h,
+};
+export default arrows;