wangpeng
/
integrated_traffic_vue
forked from integrated_whb/integrated_whb_vue
1
0
Fork 0
Code Pull Requests Activity

人员移动增加楼层显示,解决中定点偏移

pull/3/head
fangjiakai 2024-03-01 12:03:28 +08:00
parent dfd1a6dd1a
commit 5cd0408124
6 changed files with 2394 additions and 1228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2848
public/lib/Cesium/CustomCesium.js
View File

File diff suppressed because it is too large Load Diff

2
src/components/map_tools/map.js
View File

@ -120,7 +120,7 @@ const flyTo = (lng, lat) => {
// 视角飞入
maxHeight: 1500,
time: 1,
position: [lng, lat, 200],
position: [lng, lat - 0.001, 200],
angle: [0, -60, 0],
});
};

2
src/views/BI/components/historical_trajectory_options.vue
View File

@ -195,7 +195,7 @@ const getTrajectoriesData = async (id, startTime, endTime, type) => {
type,
});
data.positions = data.positions.concat(res.data.data);
if (res.data.msg !== "人物轨迹结束") {
if (res.data.msg !== "人物轨迹结束" && res.data.msg !== "暂无人物轨迹") {
type++;
await getTrajectoriesData(id, startTime, endTime, type);
}

49
src/views/BI/js/history_trajectory.js
View File

@ -1,9 +1,7 @@
let entityArr = [];
let billboardArr = [];
let entity = null;
let billboard = null;
let line = [];
export const addPerson = (id, name, lon, lat, height) => {
entityArr = new window.CustomCesium.GroupModel("人物模型");
billboardArr = new window.CustomCesium.GroupModel("人物姓名");
addEntity(id, name, lon, lat, height);
addBillboard(id, name, lon, lat, height);
};
@ -17,10 +15,10 @@ const addEntity = (id, name, lon, lat, height) => {
let e;
// eslint-disable-next-line prefer-const
e = obj.clone(e);
const enModule = new window.CustomCesium.Model(
entity = new window.CustomCesium.Model(
window.$icy,
{
name: "人物",
name: "人物轨迹",
height,
id,
lon,
@ -30,22 +28,18 @@ const addEntity = (id, name, lon, lat, height) => {
},
e
);
// 修改模型方向 第一个参数是航向角
// enModule.updateAngle([-90,20,20]);
entityArr.add(enModule);
};
const addBillboard = (id, name, lon, lat, height) => {
// 创建广告牌
const bulletinBoard = new window.CustomCesium.BulletinBoard(window.$icy);
bulletinBoard.loadCanvas(drawCanvas(name), {
name: "人物铭牌",
billboard = new window.CustomCesium.BulletinBoard(window.$icy);
billboard.loadCanvas(drawCanvas(name), {
name: "人物轨迹铭牌",
id: id + "_name",
lon,
lat,
height: Number(height) + 2.05,
});
billboardArr.add(bulletinBoard);
};
// eslint-disable-next-line no-unused-vars
@ -101,33 +95,22 @@ export const showLine = (positions) => {
* billboardArr 接收人物铭牌分组
*/
export const peoMovement = (id, lon, lat, height, alt, speed) => {
entityArr.children.forEach((b, m) => {
if (b.entity._id === id) {
b.updateAngle([alt, 0, 0]); // 改变人物朝向
b.animationMove(lon, lat, height, speed, () => {}); // 人物平滑移动
billboardArr.children[m].animationMove(
lon,
lat,
Number(Number(height) + 2.05),
speed
); // 人物铭牌平滑移动
if (entity) {
entity.updateAngle([alt, 0, 0]); // 改变人物朝向
entity.animationMove(lon, lat, height, speed, () => {}); // 人物平滑移动
billboard.animationMove(lon, lat, Number(Number(height) + 2.05), speed); // 人物铭牌平滑移动
} else {
console.log(`人物移动数据错误`);
}
});
};
export const hadleDestroy = () => {
if (entityArr && entityArr.children) {
entityArr.children.forEach((e) => {
e.destroy();
});
billboardArr.children.forEach((e) => {
e.destroy();
});
if (entity) {
entity.destroy();
billboard.destroy();
line.destroy();
entityArr = [];
billboardArr = [];
entity = null;
billboard = null;
line = [];
}
};

5
src/views/BI/js/map.js
View File

@ -40,6 +40,9 @@ export const initMap = (corp) => {
const [wgsLat, wgsLon] = bd09ToWgs84(corp.LATITUDE, corp.LONGITUDE);
centerLon = wgsLon;
centerLat = wgsLat;
centerLon = 118.40522647;
centerLat = 37.97035807;
flyTo();
// 亮度设置
const stages = window.$icy.viewer.scene.postProcessStages;
@ -136,7 +139,7 @@ export const flyTo = () => {
// 视角飞入
maxHeight: 1500,
time: 1,
position: [centerLon, centerLat, 200],
position: [centerLon, centerLat - 0.001, 200],
angle: [0, -60, 0],
});
};

86
src/views/BI/js/trajectory.js
View File

@ -2,7 +2,7 @@ import pako from "pako"; // 解密gzip插件
import { useWebSocket } from "@vueuse/core";
import { useUserStore } from "@/pinia/user";
import pinia from "@/pinia";
import { getFenceList } from "@/request/map";
import { getRealTimeList, getFenceList } from "@/request/map";
const userStore = useUserStore(pinia);
const pls_ip = userStore.getUserInfo.POST_URL;
@ -13,6 +13,7 @@ const fencesArr = [];
const { open, close } = useWebSocket(
encodeURI("ws://" + pls_ip.replace("http://", "") + "/netty/test.io?u=1"),
// encodeURI("ws://58.58.162.14:8084/netty/test.io?userid=1"),
{
immediate: false,
heartbeat: {
@ -24,12 +25,8 @@ const { open, close } = useWebSocket(
onMessage: (ws, event) => {
const msg = unzip(event.data);
const decodedMsg = JSON.parse(decodeURIComponent(msg));
console.log(decodedMsg);
if (decodedMsg.msg === "000") {
console.log(decodedMsg.data);
// decodedMsg.data = [
// "8379,119.447708695738,39.918422294137,-232.39015608699566,0.12000000000000001,,1,0,大大",
// "9979,119.447611105937,39.918443403627,-343.76932562302534,0.12000000000000001,9979,1,0,测试一",
// ];
peoMovement(decodedMsg.data);
}
if (decodedMsg.msg === "006") {
@ -52,13 +49,30 @@ const { open, close } = useWebSocket(
);
export const handleTrajectory = (b) => {
if (b) {
getOnlineUser();
open();
} else {
close();
}
};
const addEntity = (id, name, lon, lat, height) => {
const getOnlineUser = async () => {
entityArr = new window.CustomCesium.GroupModel("人物模型");
billboardArr = new window.CustomCesium.GroupModel("人物姓名");
await getRealTimeList();
const { data } = await getRealTimeList();
const userList = data.data.list;
userList.forEach((item) => {
const user = item.split(",");
addEntity(user[0], user[5], user[1], user[2], user[3], user[8]);
addBillboard(user[0], user[5], user[1], user[2], user[3], user[8]);
});
entityArr.show(true);
billboardArr.show(true);
};
const addEntity = (id, name, lon, lat, height, floor) => {
const obj = new window.CustomCesium.Model(window.$icy, {
url: "/src/assets/glb/person_000002_blue.gltf",
height: 0,
@ -72,6 +86,7 @@ const addEntity = (id, name, lon, lat, height) => {
window.$icy,
{
name: "人物",
floor,
height,
id,
lon,
@ -86,21 +101,23 @@ const addEntity = (id, name, lon, lat, height) => {
entityArr.add(enModule);
};
const addBillboard = (id, name, lon, lat, height) => {
const addBillboard = (id, name, lon, lat, height, floor) => {
// 创建广告牌
const bulletinBoard = new window.CustomCesium.BulletinBoard(window.$icy);
bulletinBoard.loadCanvas(drawCanvas(name), {
bulletinBoard.loadCanvas(drawCanvas(name, floor), {
name: "人物铭牌",
floor,
peoNamr: name,
id: id + "_name",
lon,
lat,
height: height + 2.05,
height: Number(height) + 2.05,
});
billboardArr.add(bulletinBoard);
};
// eslint-disable-next-line no-unused-vars
const drawCanvas = (name) => {
const drawCanvas = (name, floor) => {
const canvas = document.createElement("canvas");
const width = 70;
const height = 20;
@ -129,7 +146,7 @@ const drawCanvas = (name) => {
ctx.font = "normal 12px 'Microsoft YaHei'";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(name, width / 2, height / 2);
ctx.fillText((name || "未知人员") + `(${floor}F)`, width / 2, height / 2);
return canvas;
};
@ -164,32 +181,12 @@ const unzip = (b64Data) => {
function peoMovement(moveData) {
const map = new Map();
moveData.forEach((i, n) => {
let addFlag = false;
map.set(i.split(",")[0], n);
if (!entityArr || !entityArr.children) {
addFlag = true;
entityArr = new window.CustomCesium.GroupModel("人物模型");
billboardArr = new window.CustomCesium.GroupModel("人物姓名");
const entity = i.split(",");
console.log(entity[0], 111111);
addEntity(entity[0], entity[8], entity[1], entity[2], entity[4]);
addBillboard(entity[0], entity[8], entity[1], entity[2], entity[4]);
}
});
entityArr.children.forEach((b, m) => {
if (!b.entity) {
addFlag = true;
const entity = i.split(",");
console.log(entity[0], 2222222);
addEntity(entity[0], entity[8], entity[1], entity[2], entity[4]);
addBillboard(entity[0], entity[8], entity[1], entity[2], entity[4]);
return;
}
const index = map.get(b.entity._id);
const item = moveData[index];
const entity = i.split(",");
if (index !== undefined && entity[0] === b.entity._id) {
addFlag = true;
if (index !== undefined) {
const itData = item.split(","); // itData下标：0=【卡号】，（1,2，4）=【lon，lat，alt】，3=【人物朝向角度】，5=【工号】，6=【当前楼层】
if (itData[4] != null && itData.length >= 6) {
b.updateAngle([itData[3], 0, 0]); // 改变人物朝向
@ -197,28 +194,29 @@ function peoMovement(moveData) {
itData[1],
itData[2],
Number(itData[4]),
1000,
2000,
() => {}
); // 人物平滑移动
billboardArr.children[m].animationMove(
itData[1],
itData[2],
Number(Number(itData[4]) + 2.05),
1000
2000
); // 人物铭牌平滑移动
console.log(b.entity.floor);
console.log(Number(itData[6]));
if (Number(itData[6]) !== Number(b.entity.floor)) {
b.entity.floor = itData[6];
billboardArr.children[m].uopdateImg(
drawCanvas(b.entity.peoName, itData[6]),
!0
);
}
} else {
console.log(`人物移动数据错误,错误参数：'${item}'`);
}
}
});
if (!addFlag) {
const entity = i.split(",");
console.log(entity[0], 333333);
addEntity(entity[0], entity[8], entity[1], entity[2], entity[4]);
addBillboard(entity[0], entity[8], entity[1], entity[2], entity[4]);
}
});
}
export const handleFence = async (b) => {