feat: 🚀 地图优化

public/static/offline/JSON/getArtWorkList.json

@@ -1 +1,96 @@
-{"code":200,"msg":"操作成功","data":[{"id":198,"title":"猩猩的太空漫步","content":{"name":"猩猩的太空漫步","nameEn":"dddd","file_code":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/vwcYXFrhK1CbEB6uFy76R.png"],"point":"0_0_4","content":"vnasfkvl","contentEn":"fwefwqe","icon":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png"],"icon_sel":[]}},{"id":199,"title":"共生","content":{"name":"共生","nameEn":"dddd","file_code":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/CkR9FMDrKtej6Rt0GDAUR.png"],"point":"0_0_129","content":"1235","contentEn":"fwerf","icon":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/RyWHWQugQvDwEjEY_MwHb.png"],"icon_sel":[]}},{"id":200,"title":"超新星","content":{"name":"超新星","nameEn":"dddd","file_code":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/6DH-CKwe8pzVt4qmP-Knm.png"],"point":"0_0_129","content":"1326","contentEn":"56456","icon":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/ea-Q5M6K-ri1xw3UfY18_.png"],"icon_sel":[]}},{"id":201,"title":"盛开的山谷","content":{"name":"盛开的山谷","nameEn":"dadd","file_code":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/fH0IKTz9Nhg7nnVhtJg_o.png"],"point":"0_0_84","content":"i7u","contentEn":"hhrt","icon":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/j49AhcyUGy3ooRveXNTAt.png"],"icon_sel":[]}},{"id":202,"title":"琥珀","content":{"name":"琥珀","nameEn":"t534","file_code":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/rQjWB5AzY05NM7YSmWgtT.png"],"point":"0_0_84","content":"213","contentEn":"545","icon":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/GeJT_PoeLfW6e2SgxCGmQ.png"],"icon_sel":[]}}]}
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 198,
+      "title": "猩猩的太空漫步",
+      "content": {
+        "name": "猩猩的太空漫步",
+        "nameEn": "dddd",
+        "file_code": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/vwcYXFrhK1CbEB6uFy76R.png"
+        ],
+        "point": "0_3_4",
+        "content": "vnasfkvl",
+        "contentEn": "fwefwqe",
+        "icon": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230711/i5NJjQ-h_RKrWqWza7g79.jpg"
+        ],
+        "icon_sel": []
+      }
+    },
+    {
+      "id": 199,
+      "title": "共生",
+      "content": {
+        "name": "共生",
+        "nameEn": "dddd",
+        "file_code": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/CkR9FMDrKtej6Rt0GDAUR.png"
+        ],
+        "point": "0_0_129",
+        "content": "1235",
+        "contentEn": "fwerf",
+        "icon": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/RyWHWQugQvDwEjEY_MwHb.png"
+        ],
+        "icon_sel": []
+      }
+    },
+    {
+      "id": 200,
+      "title": "超新星",
+      "content": {
+        "name": "超新星",
+        "nameEn": "dddd",
+        "file_code": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/6DH-CKwe8pzVt4qmP-Knm.png"
+        ],
+        "point": "0_0_129",
+        "content": "1326",
+        "contentEn": "56456",
+        "icon": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/ea-Q5M6K-ri1xw3UfY18_.png"
+        ],
+        "icon_sel": []
+      }
+    },
+    {
+      "id": 201,
+      "title": "盛开的山谷",
+      "content": {
+        "name": "盛开的山谷",
+        "nameEn": "dadd",
+        "file_code": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/fH0IKTz9Nhg7nnVhtJg_o.png"
+        ],
+        "point": "0_0_84",
+        "content": "i7u",
+        "contentEn": "hhrt",
+        "icon": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/j49AhcyUGy3ooRveXNTAt.png"
+        ],
+        "icon_sel": []
+      }
+    },
+    {
+      "id": 202,
+      "title": "琥珀",
+      "content": {
+        "name": "琥珀",
+        "nameEn": "t534",
+        "file_code": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/rQjWB5AzY05NM7YSmWgtT.png"
+        ],
+        "point": "0_0_84",
+        "content": "213",
+        "contentEn": "545",
+        "icon": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/GeJT_PoeLfW6e2SgxCGmQ.png"
+        ],
+        "icon_sel": []
+      }
+    }
+  ]
+}

public/static/qm/MainMap_QM.js

@@ -32,7 +32,7 @@ QMUtil = function () {
 	this.mapServerInfo = "static/offline/JSON/GetMapInfo.json";
 	this.beforPath = "./";
 	this.options = {
-		playSpeed: 6,    //动画播放速度
+		playSpeed: 8,    //动画播放速度
 		collision: true,   //是否支持名称的碰撞检测
 		showStyle: true,     //是否4K
 		modelIcon: true,    //是否使用模型 true 模型    false  图标
@@ -3247,17 +3247,30 @@ MainMap_QM.prototype = {
 					type: 'icon',
 					data: { "buildOrder": buildOrder, "floorOrder": floorOrder, "node": navCode, "src": src, "facCode": facCode, "title": title }
 				})
-				console.log("触发 icon 事件 ", {
-					type: 'icon',
-					data: { "buildOrder": buildOrder, "floorOrder": floorOrder, "node": navCode, "src": src, "facCode": facCode, "title": title }
-				});
+				return;
+			}
+		}
+
+    //艺术品点击
+		for (let i = 0; i < intersects.length; i++) {
+			//艺术品点击
+			if (intersects[i].object.userData && (intersects[i].object.userData.type == 'art' || intersects[i].object.parent.userData.type == 'art' || intersects[i].object.parent.parent.userData.type == 'art')) {
+				if (Map_QM.endModel && Map_QM.endModel.visible) {
+					Map_QM.endModel.visible = false;
+				}
+				Map_QM.mapArr[Map_QM.util.selectBuild][Map_QM.util.selectFloor].findPath.clearPath();
+				let codeId = intersects[i].object.userData.codeId || intersects[i].object.parent.userData.codeId || intersects[i].object.parent.parent.userData.codeId
+        let userData = intersects[i].object.userData || intersects[i].object.parent.userData || intersects[i].object.parent.parent.userData;
+				Map_QM.dispatchEvent({
+					type: 'art',
+					data: { "codeId": codeId, "artData": userData }
+				})
 				return;
 			}
 		}
 
 		for (let i = 0; i < intersects.length; i++) {
 			//房间BOX点击
-			console.log(intersects);
 			if (intersects[i].object.userData && intersects[i].object.userData.type == "shop" && intersects[i].object.name != "") {
 				if (Map_QM.endModel && Map_QM.endModel.visible) {
 					Map_QM.endModel.visible = false;
@@ -5247,6 +5260,7 @@ MainMap_QM.init = function (callBack, options) {
 		Map_QM.cancelRender();
 		Map_QM.beforeDestroy(options);
 	}
+  console.log(options);
 	Map_QM = new MainMap_QM(callBack, options);
 	return Map_QM;
 }
@@ -5316,28 +5330,31 @@ FloorMap_QM.prototype = {
 		if (Map_QM.util.artUrl.length > 0) {
 			let _this = this;
 			Map_QM.util.artUrl.forEach((item)=>{
-				let url = Map_QM.util.beforPath + item.content.icon[0];
-				let spriteMap = new THREE.TextureLoader().load(url);
-				let	spriteMaterial = new THREE.SpriteMaterial({    //sizeAttenuation: false   禁止跟随鼠标缩放
-					map: spriteMap,
-					depthTest: true,
-					transparent: true,
-					alphaTest: 0.1
-				});
-				let sprite = new MySprite_QM(spriteMaterial);
-				sprite.scale.set(64, 64, 1);
-				sprite.imgUrl = url;
-				sprite.center = new THREE.Vector2(0.5, 0);
-				sprite.userData = item;
-				sprite.userData.type = "art";
-				sprite.userData.use = "all";
-				sprite.userData.src = url;
-				let pathData = Map_QM.util.allMap[_this.buildOrder].buildArr[_this.floorOrder].mapData.path;
-				if(pathData.nodes.length > 0){
-					pathData.nodes.sort(Config.sortNode);
-					sprite.position.set(pathData.nodes[parseInt(item.content.point)].x, -1*pathData.nodes[parseInt(item.content.point)].y, 60);
-					sprite.renderOrder = 300;
-					_this.serObj.add(sprite);
+				let points = item.content.point.split("_");
+				if(parseInt(points[0]) == _this.buildOrder && parseInt(points[1]) ==_this.floorOrder && parseInt(points[2])>=0){
+					let url = Map_QM.util.beforPath + item.content.icon[0];
+					let spriteMap = new THREE.TextureLoader().load(url);
+					let	spriteMaterial = new THREE.SpriteMaterial({    //sizeAttenuation: false   禁止跟随鼠标缩放
+						map: spriteMap,
+						depthTest: true,
+						transparent: true,
+						alphaTest: 0.1
+					});
+					let sprite = new MySprite_QM(spriteMaterial);
+					sprite.scale.set(64, 64, 1);
+					sprite.imgUrl = url;
+					sprite.center = new THREE.Vector2(0.5, 0);
+					sprite.userData = item;
+					sprite.userData.type = "art";
+					sprite.userData.use = "all";
+					sprite.userData.codeId = item.id;
+					let pathData = Map_QM.util.allMap[_this.buildOrder].buildArr[_this.floorOrder].mapData.path;
+					if(pathData.nodes.length > 0){
+						pathData.nodes.sort(Map_QM.util.sortNode);
+						sprite.position.set(pathData.nodes[parseInt(points[2])].x, -1*pathData.nodes[parseInt(points[2])].y, 60);
+						sprite.renderOrder = 300;
+						_this.serObj.add(sprite);
+					}
 				}
 			})
 		}
@@ -5577,18 +5594,18 @@ FloorMap_QM.prototype = {
 						});
 					}
 					if (showLeb != "" || some) {
-						showLeb = mapData.shopArea[i].name;
-						let shopDiv = document.createElement('div');
-						shopDiv.className = "map_label";
-						shopDiv.innerHTML = Map_QM.util.options.shopStyle == "shopName" ? show : mapData.shopArea[i].name;
-						shopDiv.dataset.name = show;
-						shopDiv.dataset.nameEn = showE;
-						shopDiv.style.visibility = "hidden";
-						let shopLabel = new THREE.CSS2DObject(shopDiv);
-						shopLabel.position.set(mapData.shopArea[i].xaxis >> 0, -1 * mapData.shopArea[i].yaxis >> 0, parseInt(mapData.shopArea[i].toHeight) + parseInt(mapData.shopArea[i].site || 0));
-						shopLabel.name = mapData.shopArea[i].name;
-						shopLabel.userData.mapShow = mapShow;
-						this.labelObj.add(shopLabel);
+						// showLeb = mapData.shopArea[i].name;
+						// let shopDiv = document.createElement('div');
+						// shopDiv.className = "map_label";
+						// shopDiv.innerHTML = Map_QM.util.options.shopStyle == "shopName" ? show : mapData.shopArea[i].name;
+						// shopDiv.dataset.name = show;
+						// shopDiv.dataset.nameEn = showE;
+						// shopDiv.style.visibility = "hidden";
+						// let shopLabel = new THREE.CSS2DObject(shopDiv);
+						// shopLabel.position.set(mapData.shopArea[i].xaxis >> 0, -1 * mapData.shopArea[i].yaxis >> 0, parseInt(mapData.shopArea[i].toHeight) + parseInt(mapData.shopArea[i].site || 0));
+						// shopLabel.name = mapData.shopArea[i].name;
+						// shopLabel.userData.mapShow = mapShow;
+						// this.labelObj.add(shopLabel);
 						//this.labelObj.add(Map_QM.util.getTextMesh(show,new THREE.Vector3(mapData.shopArea[i].xaxis >> 0, -1 * mapData.shopArea[i].yaxis >> 0,  parseInt(mapData.shopArea[i].toHeight) + parseInt(mapData.shopArea[i].site || 0))));
 					}
 				}
@@ -6063,16 +6080,16 @@ FloorMap_QM.prototype = {
 
 					}
 					//显示车位编号
-					if (mapData.parkArea[i].parkNum != "NaN" && i % 10 == 0) {
-						let shopDiv = document.createElement('div');
-						shopDiv.className = "map_label"
-						shopDiv.style.visibility = "hidden";
-						shopDiv.textContent = mapData.parkArea[i].parkNum;
-						let shopLabel = new THREE.CSS2DObject(shopDiv);
-						shopLabel.name = mapData.parkArea[i].name;
-						shopLabel.position.set(mapData.parkArea[i].xaxis >> 0, -1 * mapData.parkArea[i].yaxis >> 0, parseInt(mapData.parkArea[i].toHeight) + 1);
-						this.labelObj.add(shopLabel);
-					}
+					// if (mapData.parkArea[i].parkNum != "NaN" && i % 10 == 0) {
+					// 	let shopDiv = document.createElement('div');
+					// 	shopDiv.className = "map_label"
+					// 	shopDiv.style.visibility = "hidden";
+					// 	shopDiv.textContent = mapData.parkArea[i].parkNum;
+					// 	let shopLabel = new THREE.CSS2DObject(shopDiv);
+					// 	shopLabel.name = mapData.parkArea[i].name;
+					// 	shopLabel.position.set(mapData.parkArea[i].xaxis >> 0, -1 * mapData.parkArea[i].yaxis >> 0, parseInt(mapData.parkArea[i].toHeight) + 1);
+					// 	this.labelObj.add(shopLabel);
+					// }
 				}
 			}
 			let mahc = this.Model_QM.MyParkShape(shapeArr, materials, parkHeight, borderColor);

src/components/Map/Map.vue

@@ -180,7 +180,6 @@ function handleDetail() {
   position: absolute;
   z-index: 500;
   width: 200px;
-  height: 110px;
   visibility: hidden;
   .circle {
     @include fl(center);
@@ -204,7 +203,6 @@ function handleDetail() {
   position: absolute;
   z-index: 500;
   width: 200px;
-  height: 110px;
   visibility: hidden;
   .door {
     width: 200px;

src/composables/useInitMap.ts

@@ -19,6 +19,7 @@ export const useInitMap = async function () {
       () => {
         store.SET_MAP_STATUS(true)
         window.Map_QM.addEventListener('shop', onClickShop, false)
+        window.Map_QM.addEventListener('art', onClickArt, false)
         window.Map_QM.renderer.domElement.addEventListener('webglcontextlost', onContextLost)
         const arr: string[] = []
         window.Map_QM.util.allMap[0].buildArr.forEach((item: any) => {
@@ -34,7 +35,7 @@ export const useInitMap = async function () {
         navPoint: device.value.location,
         angle: device.value.angle,
         iconUrl: delPrefixOfFacilityList,
-        artUrl: artPlaceList,
+        artUrl: artPlaceList.value,
         mapData: data,
         shopData: shopList.value.slice()
       }
@@ -60,6 +61,29 @@ function onClickShop(event: any) {
   // }
 }
 
+// 艺术装置点击
+function onClickArt(event: any) {
+  const store = useRootStore()
+  if (event.data) {
+    const artWork: any = document.getElementById('artWorkInfo')
+    const poi = event.data.artData.content.point.split('_')
+    hideMapDialog()
+    window.Map_QM.addElementByNode(artWork, Number(poi[2]))
+    artWork.style.visibility = 'visible'
+    const floors = store.currentBuildingFloorsList.filter(item => item.floorOrder === Number(poi[1]))
+    const shop = {
+      shopCode: '',
+      shopName: event.data.artData.content.name,
+      shopNameEn: event.data.artData.content.nameEn,
+      floorOrder: floors[0].floorOrder,
+      floor: floors[0].floor,
+      logoUrl: '',
+      yaxis: Number(poi[2])
+    }
+    store.SET_SHOP(shop)
+  }
+}
+
 //地图弹框消失
 export function hideMapDialog() {
   window.shopInfo.style.visibility = 'hidden'

src/http/api/parking/index.ts

@@ -3,7 +3,7 @@ import { getPrefixUrl } from '../../http'
 import { PREFIX } from '@/enums'
 //找车
 export const getFindCar = (license: string) =>
-  request<CarInfo>({ url: `${getPrefixUrl().interfaceUrl}/api/guide/v1/web/thirdParkRevision?plateId=${license}` })
+  request<CarInfo>({ url: `${getPrefixUrl().interfaceUrl}/guide/v1/web/thirdParkRevision?plateId=${license}` })
 
 // 获取停车场信息
 export const getParkInfo = () => request<ParkingInfo[]>({ url: `${PREFIX.STATIC_URL}/JSON/getParkInfo.json` })