人员实时追踪

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