project-chengduSKP
/
cd_SKP_H_base_daoshi_vue_ts
forked from common/base_daoshi_vue_ts
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 🚀 地图优化

pull/1/head
liyongle 3 years ago
parent
779a77e838
commit
2552ac67d1
5 changed files with 189 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      public/static/offline/JSON/getArtWorkList.json
  2. 117
      public/static/qm/MainMap_QM.js
  3. 2
      src/components/Map/Map.vue
  4. 26
      src/composables/useInitMap.ts
  5. 2
      src/http/api/parking/index.ts

97
public/static/offline/JSON/getArtWorkList.json
View File

@ -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": []
}
}
]
}

117
public/static/qm/MainMap_QM.js
View File

@ -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);

2
src/components/Map/Map.vue
View File

@ -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;

26
src/composables/useInitMap.ts
View File

@ -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'

2
src/http/api/parking/index.ts
View File

@ -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` })

Write Preview
Loading…
Cancel
Save