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

1.1 版本

1.2 應用場景

在製作三維場景時，可能存在有不同類型的多個監測點位模型，希望透過點選按鈕展示不同的點位。

效果如下圖所示：

1.3 實現思路

透過 JavaScript 點選事件實現，JavaScript 程式碼如下：

注：僅支援 三維自訂場景 組件和 三維城市場景 組件中的自訂模型。

duchamp.getWidgetByName("組件名稱").getMeshByName("模型名稱").setVisible(false);
//設定模型物件是否可見，true表示可見，false表示不可見

2.1 建立範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白範本，可自訂名稱和尺寸。如下圖所示：

2.2 設計三維自訂場景組件

2.2.1 新增組件並建立場景

新增三維自訂場景組件到頁面，點選「編輯組件」，生成一個空場景。如下圖所示：

2.2.2 上傳並新增模型

1）點選下載並解壓 glb 模型檔案：點位模型資源.zip

2）在三維自訂場景組件編輯介面，點選「模型>新增模型物件>上傳新模型」，將模型上傳後，選中模型，將其新增到場景中。如下圖所示：

注：V1.18.1 及之後版本支援多選模型批量上傳。

3）選中模型物件，複製模型，適當調整模型位置、場景視角。可根據實際情況修改模型名稱，後續需透過獲取模型名稱實現模型的隱藏與顯示。

最終效果如下圖所示：

4）完成場景設定後，點選左上角「傳回視覺化看板」傳回到畫布。

2.3 設定模型隱藏顯示

2.3.1 新增標題組件

新增一個標題組件，組件內容為「只顯示藍色點」。如下圖所示：

2.3.2 設定 JavaScript 點選事件

給標題組件新增一個 JavaScript 點選事件，JavaScript 程式碼如下：

duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("藍色點").setVisible(true); //true表示可見
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("藍色點_c1").setVisible(true);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("橙色點").setVisible(false); //false表示不可見
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("橙色點_c1").setVisible(false);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("青色點").setVisible(false);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("青色點_c1").setVisible(false);

步驟如下圖所示：

另外複製兩個已設定好的標題組件，分別為「只顯示橙色點」和「只顯示青色點」，修改 JavaScript 程式碼分別如下：

• 只顯示橙色點

duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("藍色點").setVisible(false);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("藍色點_c1").setVisible(false);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("橙色點").setVisible(true);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("橙色點_c1").setVisible(true);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("青色點").setVisible(false);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("青色點_c1").setVisible(false);

• 只顯示青色點

duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("藍色點").setVisible(false);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("藍色點_c1").setVisible(false);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("橙色點").setVisible(false);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("橙色點_c1").setVisible(false);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("青色點").setVisible(true);
duchamp.getWidgetByName("自訂模型1_頁面1").getMeshByName("青色點_c1").setVisible(true);

2.4 效果預覽

點選範本右上角「儲存」，「預覽」按鈕，效果如 1.2 節效果所示。

注：不支援行動端。

點選下載範本：JS實現FVS模型的顯示或隱藏.fvs