多次使用数据可视化扩展

Question

我有两个独立的扩展程序，可以可视化来自不同域的不同“数据点”（温度、湿度等测量值，......和图像位置）。这些扩展应该保持分离（并且不应该相互认识）。

使用相互独立的扩展没有问题。但是，如果在 Forge Viewer 中同时使用两个扩展（对于同一模型），则会出现问题。

两个扩展都尝试获取 DataVis-extension 的现有实例并在它不可用时加载扩展（在每个自定义扩展中调用 viewer.loadExtension 没有区别）。 扩展程序创建 ViewableData 并向其添加可视项（共享 ViewableData 的单个实例没有区别）。

添加可视项后，调用await viewableData.finish() 并调用DataVis-extension 的addViewables-方法。

其中一个主要问题是，changeOcclusion 方法仅更改最后添加的可视项的遮挡。其他可视项随时保持可见。 可能是因为每次调用 addViewables 扩展时，DataVis 扩展中的 pointMaterial 都会被覆盖。

有没有办法多次实例化扩展，从而保证在不同的自定义扩展中使用它时没有副作用？或者其他机制？

Answer 1

在咨询我们的工程团队后，我们提交了一份问题报告 LMV-6574，用于跟踪此问题。请注意 LMV 前缀 id 以进行跟踪。欢迎我们通过将问题 ID 发送至forge (DOT) help (AT) autodesk (DOT) com 来询问未来的更新。

但是，我们不想阻止您的开发，所以这里有一个解决方法。

正如我在上面的 cmets 区域中提到的，SpriteViewable 的构造函数接受一个参数，ViewableStyles，用于设置精灵图标。因此，您无需拨打DataVisualization.addViewables(data) 两次。在完成ViewableData 之前，您可以毫无疑问地添加具有不同ViewableStyles 的可视项。

回到您的用例，您希望为不同的数据源重用 DataVisualization 扩展。为此，我建议您单独存储设备（传感器）数据（例如设备容器）。当您需要添加/删除设备时，只需修改设备容器，清除可视项，然后在您的设备容器中添加新的视图数据即可。

这里有一些代码 sn-ps 展示了这个想法：

• 初始化示例代码：

let sensorStyleDefinitions = {
    co2: {
        url: "http://localhost:3000/assets-1/images/co2.svg",
        color: 0xffffff,
    },
    temperature: {
        url: "http://localhost:3000/assets-1/images/thermometer.svg",
        color: 0xffffff,
    },
    default: {
        url: "http://localhost:3000/assets-1/images/circle.svg",
        color: 0xffffff,
    },
};

// Create model-to-style map from style definitions.
let styleMap = {};

Object.entries(sensorStyleDefinitions).forEach(([type, styleDef]) => {
    styleMap[type] = new Autodesk.DataVisualization.Core.ViewableStyle(
        Autodesk.DataVisualization.Core.ViewableType.SPRITE,
        new THREE.Color(styleDef.color),
        styleDef.url
    );
});

let devices = [
    {
        id: "Hall I",
        position: {
            x: -14.297511041164398,
            y: -77.6432056427002,
            z: 11.31889820098877,
        },
        type: "temperature",
        sensorTypes: ["temperature"],
    },
    {
        id: "Hall IV",
        position: {
            x: 60.53697395324707,
            y: -74.6432056427002,
            z: 11.31889820098877,
        },
        type: "co2",
        sensorTypes: ["co2"],
    },
];

const viewableData = new Autodesk.DataVisualization.Core.ViewableData();
viewableData.spriteSize = 16;

// Add viewables
devices.forEach((device, index) => {
    const style = styleMap[device.type] || styleMap["default"];
    const viewable = new Autodesk.DataVisualization.Core.SpriteViewable(
        device.position,
        style,
        index + 1
    );

    viewableData.addViewable(viewable);
});

await viewableData.finish();
dataVizExt.addViewables(viewableData);

• 添加设备（传感器）的示例代码

devices.push({
    id: "Hall XII",
    position: {
        x: -15,
        y: -70,
        z: 50,
    },
    type: "temperature",
    sensorTypes: ["temperature"],
});

// Remove existing sprites
dataVizExt.removeAllViewables();

const viewableData = new Autodesk.DataVisualization.Core.ViewableData();
viewableData.spriteSize = 16;

// re-add viewables
devices.forEach((device, index) => {
    const style = styleMap[device.type] || styleMap["default"];
    const viewable = new Autodesk.DataVisualization.Core.SpriteViewable(
        device.position,
        style,
        index + 1
    );

    viewableData.addViewable(viewable);
});

await viewableData.finish();
dataVizExt.addViewables(viewableData);

• 移除设备（传感器）的示例代码

devices = devices.splice(1, 1);

// Remove existing sprites
dataVizExt.removeAllViewables();

const viewableData = new Autodesk.DataVisualization.Core.ViewableData();
viewableData.spriteSize = 16;

// re-add viewables
devices.forEach((device, index) => {
    const style = styleMap[device.type] || styleMap["default"];
    const viewable = new Autodesk.DataVisualization.Core.SpriteViewable(
        device.position,
        style,
        index + 1
    );

    viewableData.addViewable(viewable);
});

await viewableData.finish();
dataVizExt.addViewables(viewableData);