diff --git a/src/assets/glb/car_green.png b/src/assets/glb/car_green.png new file mode 100644 index 0000000..351b161 Binary files /dev/null and b/src/assets/glb/car_green.png differ diff --git a/src/assets/glb/peo_blue.png b/src/assets/glb/peo_blue.png new file mode 100644 index 0000000..27617d1 Binary files /dev/null and b/src/assets/glb/peo_blue.png differ diff --git a/src/assets/glb/peo_red.png b/src/assets/glb/peo_red.png new file mode 100644 index 0000000..da58283 Binary files /dev/null and b/src/assets/glb/peo_red.png differ diff --git a/src/assets/glb/peo_white.png b/src/assets/glb/peo_white.png new file mode 100644 index 0000000..ecd9f92 Binary files /dev/null and b/src/assets/glb/peo_white.png differ diff --git a/src/assets/glb/peo_yellow.png b/src/assets/glb/peo_yellow.png new file mode 100644 index 0000000..c9d7c1e Binary files /dev/null and b/src/assets/glb/peo_yellow.png differ diff --git a/src/views/BI/js/trajectory.js b/src/views/BI/js/trajectory.js index 9fd02e9..110b98f 100644 --- a/src/views/BI/js/trajectory.js +++ b/src/views/BI/js/trajectory.js @@ -32,6 +32,9 @@ const { open, close } = useWebSocket( if (decodedMsg.msg === "006") { addNewPerson(decodedMsg.data); } + if (decodedMsg.msg === "008") { + removePerson(decodedMsg.data); + } }, onDisconnected: () => { if (entityArr && entityArr.children) { @@ -65,16 +68,16 @@ const getOnlineUser = async () => { 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]); + addEntity(user[0], user[5], user[1], user[2], user[3], user[8], user[6]); + addBillboard(user[0], user[5], user[1], user[2], user[3], user[8], user[7]); }); entityArr.show(true); billboardArr.show(true); }; -const addEntity = (id, name, lon, lat, height, floor) => { +const addEntity = (id, name, lon, lat, height, floor, gltf) => { const obj = new window.CustomCesium.Model(window.$icy, { - url: "/src/assets/glb/person_000002_blue.gltf", + url: "/src/assets/glb/" + gltf + ".gltf", height: 0, scale: 1, angle: [-90, 0, 0], @@ -87,6 +90,7 @@ const addEntity = (id, name, lon, lat, height, floor) => { { name: "人物", floor, + peoName: name, height, id, lon, @@ -101,17 +105,18 @@ const addEntity = (id, name, lon, lat, height, floor) => { entityArr.add(enModule); }; -const addBillboard = (id, name, lon, lat, height, floor) => { +const addBillboard = (id, name, lon, lat, height, floor, type) => { // 创建广告牌 const bulletinBoard = new window.CustomCesium.BulletinBoard(window.$icy); bulletinBoard.loadCanvas(drawCanvas(name, floor), { name: "人物铭牌", floor, - peoNamr: name, + peoName: name, id: id + "_name", lon, lat, height: Number(height) + 2.05, + url: "/src/assets/glb/" + type + ".png", }); billboardArr.add(bulletinBoard); }; @@ -119,8 +124,8 @@ const addBillboard = (id, name, lon, lat, height, floor) => { // eslint-disable-next-line no-unused-vars const drawCanvas = (name, floor) => { const canvas = document.createElement("canvas"); - const width = 70; - const height = 20; + const width = 160; + const height = 46; canvas.width = width; canvas.height = height; const borderRadius = 5; // 圆角半径 @@ -143,7 +148,7 @@ const drawCanvas = (name, floor) => { ctx.fill(); ctx.fillStyle = "#fff"; - ctx.font = "normal 12px 'Microsoft YaHei'"; + ctx.font = "normal 28px 'Microsoft YaHei'"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText((name || "未知人员") + `(${floor}F)`, width / 2, height / 2); @@ -153,8 +158,39 @@ const drawCanvas = (name, floor) => { const addNewPerson = (data) => { data.forEach((item) => { const entity = item.split(","); - addEntity(entity[0], entity[5], entity[1], entity[2], entity[4]); - addBillboard(entity[0], entity[5], entity[1], entity[2], entity[4]); + addEntity( + entity[0], + entity[5], + entity[1], + entity[2], + entity[4], + 1, + entity[6] + ); + addBillboard( + entity[0], + entity[5], + entity[1], + entity[2], + entity[4], + 1, + entity[7] + ); + }); +}; + +const removePerson = (data) => { + data.forEach((item) => { + entityArr.children.forEach((e) => { + if (e.entity._id === item) { + e.destroy(); + } + }); + billboardArr.children.forEach((e) => { + if (e.entity._id === item + "_name") { + e.destroy(); + } + }); }); }; @@ -203,8 +239,6 @@ function peoMovement(moveData) { Number(Number(itData[4]) + 2.05), 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( @@ -219,6 +253,19 @@ function peoMovement(moveData) { }); } +export const trackUser = (id, b) => { + if (b) { + const t = window.$icy.viewer.entities.getById(id); + window.$icy.viewer.trackedEntity = t; + window.$icy.viewer._selectedEntity = t; + t.viewFrom = new window.Cesium.Cartesian3(-30, 60, 30); + } else { + window.$icy.viewer._selectedEntity = undefined; + window.$icy.viewer.trackedEntity = undefined; + window.$icy.viewer.camera.lookAtTransform(window.Cesium.Matrix4.IDENTITY); + } +}; + export const handleFence = async (b) => { if (b) { const { data } = await getFenceList();