请问大佬们,车辆模型在渲染的时候是一闪一闪的渲染出来?
// 接收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个回答

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);
}
}
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容