xviz开发深层理解（一看就懂的小白理解模式）

最新推荐文章于 2026-07-28 07:13:28 发布

转载最新推荐文章于 2026-07-28 07:13:28 发布 · 234 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://juejin.cn/post/7267418854112362535

GEO检测

1. xviz开发和传统http开发

XVIZ是为自动驾驶数据可视化设计的一种协议和格式，包含了一组库和工具用于处理和传输这种格式的数据。在某种程度上，你可以将XVIZ看作是一个专门为大规模、时间序列的3D数据设计的“HTTP”，它就像是数据交换的通信协议。

然而，不同于使用HTTP发送和接收任意类型的数据和资源，XVIZ更专注于实时的、结构化的车载传感器数据。同时，XVIZ的数据通常会通过WebSocket进行传输，以保证实时性和高效性。

至于xviz中streamName，的确，你可以把它看作是**类似于RESTful API中的特定端口或路径**。每个streamName都代表了一种特定类型的数据流（如汽车的位置、速度等）。

当涉及到从streamName获取数据，这一过程与使用axios从HTTP接口获取数据类似，都是从一个指定的源获取数据。但是在XVIZ和deck.gl的环境中，这个过程通常被抽象化，并且隐藏在框架内部。也就是说，开发者通常不需要手动写代码去请求或监听数据，只需要提供正确的streamName,当然，你也可以去研究源码实现哈哈，deck.gl和XVIZ将负责数据的获取和更新。

总的来说一句话总结：在开始一个项目时，你可能会首先创建一个React应用，然后在需要数据可视化的地方引入deck.gl库（或者streetscape.gl，如果你想要更高级的自动驾驶特性）。你的数据可能会来源于一个XVIZ服务端，你可以使用XVIZ库来处理这些数据并将其提供给deck.gl进行渲染。

2. streamName

在XVIZ中，streamName是一个用于标识和组织数据流的字符串。它通常用于将特定类型的图形元素（例如，点、线、多边形等）关联到一起，以便于在可视化中进行处理。

具体来说，你可以把“数据流”想象为一个时间序列数据的容器。举个例子，如果你正在显示一个移动车辆的数据，那么可能有一个名为/vehicle_pose的数据流用于储存车辆的位置信息，另一个名为/vehicle_speed的数据流储存速度信息等。

streamName参数用于指定PolygonLayer应该从哪个数据流获取需要渲染的数据。在这段代码中，streamName是作为一个输入提供的，所以实际的值取决于你从外部传入什么。此参数的值通常与你的XVIZ服务端配置相对应，因为服务端负责生成并发送这些数据流。

一旦你设置了streamName，deck.gl框架会处理剩余的工作，包括从正确的流中获取数据，并应用你定义的访问器函数（如 getPolygon, getLineColor等），以生成最终的可视化效果。

总的来说，streamName没有直接获取数据的作用，而是指导deck.gl去哪里（哪个数据流）寻找数据。

一个项目中使用的例子：前端使用数据部分

js
代码解读
复制代码
PolygonLayer({ id: id + '_baseline', streamName, coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, filled: !!settings?.fillBottom, pickable: true, getPolygon: (d) => d.vertices, getLineWidth: (d) => { const defaultValue = 0.1 if (streamFilteredIds.length === 0) { return defaultValue } else if (streamFilteredIds.find((i) => d.id.includes(i))) { return defaultValue } else { return 0 } }, getLineColor: (d) => d.base.style.stroke_color, getFillColor: (d) => [0, 0, 0, 1], })

streamName可能来自于这样的定义：

js
代码解读
复制代码
const streams = [ { id: 'fusion-auto-boot', streamName: '/fusion_auto/object_detection/boot', streamFolder: 'fusion-icons', iconFolder: 'default' }....]

PolygonLayer 使用了几个特定参数来创建一个多边形层。以下是各个参数的含义：

id: 该层的唯一标识符。在这里，它由输入的 id 加上字符串 '_baseline' 构成。
streamName: 输入的 streamName，用于指定数据流的名称。
coordinateSystem: 指定了坐标系统为 COORDINATE_SYSTEM.CARTESIAN，即笛卡尔坐标系统。
filled: 填充属性取决于 settings?.fillBottom 的值。如果 fillBottom 为 true，则填充多边形。
pickable: 设为 true，表示这个图层可供交互（如鼠标点击）。
getPolygon: 定义如何从数据 d 中获取多边形的顶点坐标。在这里，它直接返回 d.vertices。
getLineWidth: 定义如何获取线条宽度。这里通过查找 streamFilteredIds 数组中是否包含 d.id 来决定线条宽度。默认宽度为0.1，但如果 d.id 不在 streamFilteredIds 之中，则设置宽度为0。
getLineColor: 从数据 d 中的 base.style.stroke_color 获取线条颜色。
getFillColor: 用户自定义的函数，这里返回固定的数组 [0, 0, 0, 1]，这代表黑色（在RGBA空间中，RGB都为0代表黑色，A为1代表不透明）。