// 接收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); }}
为啥每一次从后台拿到数据后要再次调用CarModel呢?
这个初始化车辆模型的方法不是全局调用一次就好了嘛?车辆的position是一个callback,那么后续只要改变cartesian3的值即可。
而且这个CarModel方法还是在for循环positons的时候调用的,岂不是每次数据一来就至少渲染50次车辆?车辆频繁销毁+创建,肯定是会闪烁呀。
// 接收websocket数据const onMessage = async (event) => { const data = JSON.parse(event.data); if (data.data == undefined) { console.log('未响应'); } else { processPositionParams(data.data); }};const cartesian3 = undefined;// 封装处理位置参数的函数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 }`; if (positionParams.length === 1) { addCar(); } else { changeCarPosition(positionParams[positionParams.length - 1]); } //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); }}function addCar() { 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 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, }, });}function changeCarPosition(position) { cartesian3 = Cesium.Cartesian3.fromDegrees( position.longitude, position.latitude, 0.4 );}
你之前的代码在循环建新的模型,试试只建一个模型,更新位置和方向:
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); }}
流程: 问题: 求教各位朋友,这个情况如何解决? 代码: 结果 数组置空, setSessionList([]) 这一步没有什么作用 补充 需求就是点击左边不同的用户,右边显示与当前用户的会话数据列表 现在的问题是,我点击多个用户后,显示的是这多个用户所有的会话数据列表,而我只需要显示当前被点击的这个用户的会话数据列表 比如: 与A用户的会话数据是 [{id:1}, {id:2}] 当我依次点击A
6.1 渲染模板 一旦你拥有一个模版文件,你可以通过给一个map来给它传递数据。 map是一个变量及赋予的值的集合,模板使用它来得到变量的值,或者对于块标签求值。 它的渲染函数有一个可选的变量键值对map 通过 ctx.Render() 方法来渲染模板,例如: func (r *Render) Serve(ctx *faygo.Context) error { return ctx.Ren
我正在使用LWJGL 2.8.5开发一个3D可视化应用程序。在阅读了项目主页上的第一个教程后,我还阅读了一本OpenGL书籍,进行了更深入的分析。我看到OpenGL中的典型过程是在init函数中绘制场景,然后简单地在一个循环中调用显示的更新。 但是,当我尝试使用LWJGL时,我在显示屏中得到了闪烁效果。消除闪烁的唯一方法是在显示更新周期中重绘场景。为什么会发生这种情况? 为了更好地解释我的问题,我
如前所述,我使用的是闪亮的仪表板。传单地图在放大时不呈现。代码是这样的。它在给定的lat,long上绘制标记。当放大时,它不工作。并且在放大时看起来是静态的,不进行渲染。需要尽快帮助。 server.r UI.R(只是一段很重要的代码)
我有一个标题,我想显示一个图像在它的右边,当鼠标在标题上。 > 我正在将变量editMode的状态设置为true/false 然后我使用onMouseOver和onMouse事件有条件地呈现图像。 现在,当我悬停在标题上时,编辑模式设置为true,图像显示出来,当我将光标移出标题时,editMode设置为false,图像消失。 我正在维护一个变量editMode的状态,该状态被设置为true/fa
我们当前的任务要求我们在openGL中使用较旧的固定管道方法。我们使用的是LWJGL 2.9.3。下面的代码显示一个三角形。问题是,它会疯狂地闪烁。显示器。swapBuffers()方法不会引发异常,并且无论是否包含它都没有任何区别。我根据这个问题创建了这个示例: gluPerspective、GluViewport、gluLookAt以及GL_投影和GL_MODELVIEW矩阵 编辑 还有一件事