JS實現資料庫表欄位控制FVS模型顯隱

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 應用場景

使用 FVS 三維組件設定模型，希望模型可根據資料庫表欄位改變資料或狀態。例如下圖所示：

注：不支援行動端。

1.3 實現思路

使用重新整理資料API 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