JS实现数据库表字段控制FVS模型显隐

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 版本

1.2 应用场景

使用 FVS 三维组件设置模型，希望模型可根据数据库表字段改变数据或状态。例如下图所示：

注：不支持移动端。

1.3 实现思路

使用刷新数据接口 refreshData 定时刷新模型数据，结合 subscribeMarkerData 订阅监听数据更新，当数据图层中的数据更新，执行回调。

2.1 准备数据

首先请在本地工程所使用的数据库中新建一个表，表名为「车辆监控」，包含三个字段：

• 车辆编号：自定义车辆编号，与模型名称保持一致（模型名称可修改）

• 是否有车：0 表示没有，即车辆模型不可见；1 表示有，车辆模型可见

• 车停时长：自定义停车时长
  

表样式如下图所示：

注：可使用 Navicat 新增数据库表，详细操作请自行百度。

2.2 准备模板

关于如何上传模型、添加模型等功能请先查看文档：三维自定义场景组件 。

本文提供初始模板 停车场模型.fvs ，点击下载模板，将其放置到工程路径 %FR_HOME%\webapps\webroot\WEB-INF\reportlets 下。

打开设计器，在文件列表中打开该模板。如下图所示：

2.3 添加页面加载结束事件

点击「模板>页面加载结束事件」，输入 JavaScript 代码。如下图所示：

JavaScript 代码如下：

// 等待 callback 的返回值
// 每 200 ms 重新执行一次 callback，直到 callback 有返回值为止
async function future(callback) {
  return new Promise(resolve => {
    const timerId = setInterval(() => {
      const result = callback();
      if (result) {
        // 有返回值时，清除定时器，并通过 resolve 返回最终结果
        clearInterval(timerId);
        resolve(result);
      }
    }, 200);
  });
}
async function perform() {
  // 等待场景加载结束，并获取到 widget, dataLayer
  const widget = await future(() => duchamp.getWidgetByName("停车场模型"));
  const dataLayer = await future(() => widget.getDataLayerByName("车辆监控"));

  // 根据数据图层 marker 数据，隐藏指定模型
  const processMarkerData = data => {
    const visible = data["是否有车"] === "1";
    const name = data["车辆编号"];
    const mesh = widget.getMeshByName(name);
    mesh.setVisible(visible);
  };

  // 订阅监听数据图层 Marker 数据，当 Marker 更新时，执行订阅监听函数
  dataLayer.subscribeMarkerData(data => {
    processMarkerData(data);
  });

  // 每隔 3s，刷新组件数据
  setInterval(() => {
    widget.refreshData();
  }, 3000); // 循环执行
}

perform();

注：若存在多个分页，需要指定某个分页中三维组件实现监控刷新时，JavaScript 代码如下：

// 等待 callback 的返回值
// 每 200 ms 重新执行一次 callback，直到 callback 有返回值为止
async function future(callback) {
  return new Promise(resolve => {
    const timerId = setInterval(() => {
      const result = callback();
      if (result) {
        // 有返回值时，清除定时器，并通过 resolve 返回最终结果
        clearInterval(timerId);
        resolve(result);
      }
    }, 200);
  });
}
async function perform() {
  // 等待场景加载结束，并获取到 widget, dataLayer
  const widget = await future(() => duchamp.getWidgetByName("停车场模型"));
  const dataLayer = await future(() => widget.getDataLayerByName("车辆监控"));

  // 根据数据图层 marker 数据，隐藏指定模型
  const processMarkerData = data => {
    const visible = data["是否有车"] === "1";
    const name = data["车辆编号"];
    const mesh = widget.getMeshByName(name);
    mesh.setVisible(visible);
  };

  // 订阅监听数据图层 Marker 数据，当 Marker 更新时，执行订阅监听函数
  const observer = dataLayer.subscribeMarkerData(data => {
    processMarkerData(data);
  });

  // 每隔 3s，刷新组件数据
  const refreshTimerId = setInterval(() => {
    widget.refreshData();
  }, 3000); // 循环执行

  const clean = () => {
    observer.unsubscribe();
    clearInterval(refreshTimerId);
  };
}
let page1Clean = null;
duchamp.on("storychange", current => {
  if (current === "页面2") {
    page1Cleaner = perform();
  } else {
    page1Clean && page1Clean();
  }
});

2.4 效果预览

点击右上角「保存」，再点击「预览」。效果如 1.2 节所示。

点击下载模板：JS实现数据库表字段控制模型显隐.fvs