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

src/components/map_tools/map.js

@@ -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],
   });
 };

src/views/BI/components/historical_trajectory_options.vue

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

src/views/BI/js/history_trajectory.js

@@ -1,9 +1,7 @@
-let entityArr = [];
+let entity = null;
-let billboardArr = [];
+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);
+  billboard = new window.CustomCesium.BulletinBoard(window.$icy);
-  bulletinBoard.loadCanvas(drawCanvas(name), {
+  billboard.loadCanvas(drawCanvas(name), {
-    name: "人物铭牌",
+    name: "人物轨迹铭牌",
     id: id + "_name",
     lon,
     lat,
     height: Number(height) + 2.05,
   });
-  billboardArr.add(bulletinBoard);
 };
 
 // eslint-disable-next-line no-unused-vars
@@ -100,34 +94,23 @@ export const showLine = (positions) => {
  * entityArr 接收人物模型分组
  * billboardArr 接收人物铭牌分组
  */
-export const peoMovement = (id, lon, lat, height, alt,speed) => {
+export const peoMovement = (id, lon, lat, height, alt, speed) => {
-  entityArr.children.forEach((b, m) => {
+  if (entity) {
-    if (b.entity._id === id) {
+    entity.updateAngle([alt, 0, 0]); // 改变人物朝向
-      b.updateAngle([alt, 0, 0]); // 改变人物朝向
+    entity.animationMove(lon, lat, height, speed, () => {}); // 人物平滑移动
-      b.animationMove(lon, lat, height, speed, () => {}); // 人物平滑移动
+    billboard.animationMove(lon, lat, Number(Number(height) + 2.05), speed); // 人物铭牌平滑移动
-      billboardArr.children[m].animationMove(
+  } else {
-        lon,
+    console.log(`人物移动数据错误`);
-        lat,
+  }
-        Number(Number(height) + 2.05),
-          speed
-      ); // 人物铭牌平滑移动
-    } else {
-      console.log(`人物移动数据错误`);
-    }
-  });
 };
 
 export const hadleDestroy = () => {
-  if (entityArr && entityArr.children) {
+  if (entity) {
-    entityArr.children.forEach((e) => {
+    entity.destroy();
-      e.destroy();
+    billboard.destroy();
-    });
-    billboardArr.children.forEach((e) => {
-      e.destroy();
-    });
     line.destroy();
-    entityArr = [];
+    entity = null;
-    billboardArr = [];
+    billboard = null;
     line = [];
   }
 };

src/views/BI/js/map.js

@@ -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],
   });
 };

src/views/BI/js/trajectory.js

@@ -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,59 +181,40 @@ 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.children.forEach((b, m) => {
-      entityArr = new window.CustomCesium.GroupModel("人物模型");
+    const index = map.get(b.entity._id);
-      billboardArr = new window.CustomCesium.GroupModel("人物姓名");
+    const item = moveData[index];
-      const entity = i.split(",");
+    if (index !== undefined) {
-      console.log(entity[0], 111111);
+      const itData = item.split(","); // itData下标：0=【卡号】，（1,2，4）=【lon，lat，alt】，3=【人物朝向角度】，5=【工号】，6=【当前楼层】
-      addEntity(entity[0], entity[8], entity[1], entity[2], entity[4]);
+      if (itData[4] != null && itData.length >= 6) {
-      addBillboard(entity[0], entity[8], entity[1], entity[2], entity[4]);
+        b.updateAngle([itData[3], 0, 0]); // 改变人物朝向
-    }
+        b.animationMove(
-
+          itData[1],
-    entityArr.children.forEach((b, m) => {
+          itData[2],
-      if (!b.entity) {
+          Number(itData[4]),
-        addFlag = true;
+          2000,
-        const entity = i.split(",");
+          () => {}
-        console.log(entity[0], 2222222);
+        ); // 人物平滑移动
-        addEntity(entity[0], entity[8], entity[1], entity[2], entity[4]);
+        billboardArr.children[m].animationMove(
-        addBillboard(entity[0], entity[8], entity[1], entity[2], entity[4]);
+          itData[1],
-        return;
+          itData[2],
-      }
+          Number(Number(itData[4]) + 2.05),
-      const index = map.get(b.entity._id);
+          2000
-      const item = moveData[index];
+        ); // 人物铭牌平滑移动
-      const entity = i.split(",");
+        console.log(b.entity.floor);
-      if (index !== undefined && entity[0] === b.entity._id) {
+        console.log(Number(itData[6]));
-        addFlag = true;
+        if (Number(itData[6]) !== Number(b.entity.floor)) {
-        const itData = item.split(","); // itData下标：0=【卡号】，（1,2，4）=【lon，lat，alt】，3=【人物朝向角度】，5=【工号】，6=【当前楼层】
+          b.entity.floor = itData[6];
-        if (itData[4] != null && itData.length >= 6) {
+          billboardArr.children[m].uopdateImg(
-          b.updateAngle([itData[3], 0, 0]); // 改变人物朝向
+            drawCanvas(b.entity.peoName, itData[6]),
-          b.animationMove(
+            !0
-            itData[1],
+          );
-            itData[2],
-            Number(itData[4]),
-            1000,
-            () => {}
-          ); // 人物平滑移动
-          billboardArr.children[m].animationMove(
-            itData[1],
-            itData[2],
-            Number(Number(itData[4]) + 2.05),
-            1000
-          ); // 人物铭牌平滑移动
-        } else {
-          console.log(`人物移动数据错误,错误参数：'${item}'`);
         }
+      } 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]);
     }
   });
 }