请问大佬们,车辆模型在渲染的时候是一闪一闪的渲染出来?

作者站长头像
站长
· 阅读数 10

  // 接收websocket数据
  const onMessage = async (event) => {
    const data = JSON.parse(event.data);
    if (data.data == undefined) {
      console.log('未响应');
    } else {
      processPositionParams(data.data);
    }
  };
  // 封装处理位置参数的函数
  const positionParams = []; // 用于存储所有的位置参数数据
  const bufferLimit = 50; // 缓冲区大小限制,可以根据需求调整
  function processPositionParams(data) {
    const targetingTypes = {
      0x10: 'RTK',
      0x11: 'UWB',
      0x12: '融合'
    };
    const newPositionParam = {
      TargetingType: targetingTypes[data.type],
      UID: data.uid,
      Angle: data.angle,
      Height: data.height,
      longitude: data.longitude,
      latitude: data.latitude
    };
    positionParams.push(newPositionParam);
    // 超过缓冲区大小限制时移除最旧的位置参数数据
    if (positionParams.length > bufferLimit) {
      positionParams.shift();
    }
    const labelText = `终端ID:${data.uid},定位类型:${targetingTypes[data.type]}\n经度:${data.longitude},纬度:${data.latitude}\n角度:${data.angle},高度:${data.height}`;
    CarModel(positionParams, newPositionParam.Angle); // 车辆模型
    pointPolyline(positionParams, labelText) // 轨迹点和轨迹线
  }
// 车辆模型
let carModelData = [];
function CarModel(positions, angle) {
  const headingPitchRoll = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(110),
    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);
  for (const position of positions) {
    let entityIndexs = carModelData.length;
    const cartesian3 = Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0.4);
    const CarModelMove = viewer.entities.add({
      position: new Cesium.CallbackProperty(() => {
        return cartesian3;
      }, false),
      orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll),
      model: {
        uri: "http://127.0.0.1:5501/car/scene.gltf",
        show: new Cesium.CallbackProperty(() => {
          return entityIndexs === carModelData.length - 1;
        }, false),
        color: Cesium.Color.CORAL,
        scale: 75,
        scaleByDistance,
        distanceDisplayCondition,
      },
    });
    carModelData.push(CarModelMove);
  }
}

请问大佬们,车辆模型在渲染的时候是一闪一闪的渲染出来?请问大佬们,车辆模型在渲染的时候是一闪一闪的渲染出来?

回复
1个回答
avatar
test
2024-06-28

你之前的代码在循环建新的模型,试试只建一个模型,更新位置和方向:

function CarModel(position, angle) {
  const headingPitchRoll = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(110),
    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 cartesian3 = Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0.4);

  if (!carModelData) {
    carModelData = viewer.entities.add({
      position: cartesian3,
      orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll),
      model: {
        uri: "http://127.0.0.1:5501/car/scene.gltf",
        color: Cesium.Color.CORAL,
        scale: 75,
        scaleByDistance,
        distanceDisplayCondition,
      },
    });
  } else {
    carModelData.position = cartesian3;
    carModelData.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll);
  }
}

只渲染最新的位置,看看这个:


function CarModel(positions, angle) {
  const headingPitchRoll = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(110),
    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 latestPosition = positions[positions.length - 1];
  const cartesian3 = Cesium.Cartesian3.fromDegrees(latestPosition.longitude, latestPosition.latitude, 0.4);

  if (!carModelData) {
    carModelData = viewer.entities.add({
      position: cartesian3,
      orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll),
      model: {
        uri: "http://127.0.0.1:5501/car/scene.gltf",
        color: Cesium.Color.CORAL,
        scale: 75,
        scaleByDistance,
        distanceDisplayCondition,
      },
    });
  } else {
    carModelData.position = cartesian3;
    carModelData.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll);
  }
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容