普通用户绑定了不同的uid，通过模拟器进行不同uid发送websocket，然后管理员用户就可以看见不同uid的车辆在上面跑?

Question

请问大佬们，当不同的普通用户绑定了不同的uid，通过后台模拟器实现发送不同的websocket数据，管理员用户如何实现可以渲染多个车辆模型在cesium地图上面跑？目前我只有一个车辆模型在上面跑动，如果后台发送多个不同的websocket数据的时候，车辆模型渲染就会一闪的一闪的出现车辆模型，求大佬们指教一下，万分谢谢

  // 接收websocket数据
  const onMessage = async (event) => {
    const data = JSON.parse(event.data);
    if (data.data == undefined) {
      console.log('未响应');
    } else {
      if (data.data.state !== undefined) {
        return;
      } else {
        // console.log('=====', data.data);
        processPositionParams(data.data);
        updateCarModelPosition(positionParams);// 实时更新车辆移动位置
        if (!polylineInitialized) {
          initializePolyline(positionParams); // 初始化轨迹线
          polylineInitialized = true;// 标记轨迹线已初始化
        } else {
          updatePolylinePosition(positionParams); // 更新轨迹线位置
        }
      }
    }
  };
// 车辆模型渲染
let carModelData = null;
function updateCarModelPosition(positions) {
  if (positions.length === 0) {
    return;
  }
  const latestPosition = positions[positions.length - 1];
  const cartesian3 = Cesium.Cartesian3.fromDegrees(latestPosition.longitude, latestPosition.latitude, 0.4);
  if (!carModelData) {
    createCarModel(cartesian3, latestPosition.Angle);
  } else {
    carModelData.position = cartesian3;
    const headingPitchRoll = new Cesium.HeadingPitchRoll(
      Cesium.Math.toRadians(latestPosition.Angle + 90),
      Cesium.Math.toRadians(0),
      Cesium.Math.toRadians(0)
    );
    carModelData.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll);
  }
}
function createCarModel(cartesian3, angle) {
  const headingPitchRoll = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(angle + 90),
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(0)
  );
  const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6);
  const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 10000);
  carModelData = viewer.entities.add({
    position: cartesian3,
    orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll),
    model: {
      uri: "http://127.0.0.1:5501/car/scene.gltf",
      scale: 75,
      scaleByDistance,
      distanceDisplayCondition,
    },
    id: 'carModel' // 添加id属性
  });
}

更新后的代码------------------------------------

  // 从服务器获取用户角色名
const userRole = computed(() => {
  return window.localStorage.getItem('roles')
})
------------------------------------------------
const onMessage = async (event) => {
    const data = JSON.parse(event.data);
    if (data.data == undefined) {
      console.log('未响应');
    } else {
      if (data.data.state !== undefined) {
        return;
      } else {
        // console.log('=====', data.data);
        processPositionParams(data.data);
        updateCarModelPosition(positionParams);// 实时更新车辆移动位置
        if (!polylineInitialized) {
          initializePolyline(positionParams); // 初始化轨迹线
          polylineInitialized = true;// 标记轨迹线已初始化
        } else {
          updatePolylinePosition(positionParams); // 更新轨迹线位置
        }
      }
    }
  };
// 车辆模型渲染
let carModels = {}; // 存储车辆模型的对象
function updateCarModelPosition(positions) {
  positions.forEach(position => {
    const uid = position.UID; // 获取车辆的唯一标识符
    if (!carModels[uid]) {
      createCarModel(position);
    } else {
      updateCarModel(carModels[uid], position);
    }
  });
}
function createCarModel(position) {
  const cartesian3 = Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0.4);
  const headingPitchRoll = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(position.Angle + 90),
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(0)
  );
  const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6);
  const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 10000);
  const carModel = viewer.entities.add({
    position: cartesian3,
    orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll),
    model: {
      uri: "http://127.0.0.1:5501/car/scene.gltf",
      scale: 75,
      scaleByDistance,
      distanceDisplayCondition,
    },
    id: `carModel-${position.UID}` // 使用唯一标识符添加id属性
  });
  carModels[position.UID] = carModel; // 将车辆模型存储到对象中
}
function updateCarModel(carModel, position) {
  const cartesian3 = Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0.4);
  carModel.position = cartesian3;
  const headingPitchRoll = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(position.Angle + 90),
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(0)
  );
  carModel.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll);
}

Answer 1

用对象来存全部车辆模型，这样的话你可以根据每个WebSocket消息里的UID来跟踪和更新每个车辆模型。还有就是更新updateCarModelPosition和createCarModel函数

大致思路：

let currentUserUID = "YOUR_CURRENT_USER_UID"; 

const onMessage = async (event) => {
  const data = JSON.parse(event.data);
  if (data.data && data.data.uid) {
    const uid = data.data.uid;
    const userRole = data.data.userRole; // 获取用户角色

    // ... 其他代码

    // 根据用户角色和UID来更新或创建车辆模型
    if (userRole === 'ROOT' || (userRole === 'USER' && uid === currentUserUID)) {
      updateCarModelPosition(uid, positionParams);
    }
  }
};

// ... 其他代码不变