反饋已提交
網絡繁忙
適用場景:安裝了「FineVis資料視覺化」插件的使用者,可參考本文了解 FVS 範本的相關功能。
在製作三維場景時,可能存在有不同類型的多個監測點位模型,希望透過點選按鈕展示不同的點位。
效果如下圖所示:
透過 JavaScript 點選事件實現,JavaScript 程式碼如下:
注:僅支援 三維自訂場景 組件和 三維城市場景 組件中的自訂模型。
duchamp.getWidgetByName("組件名稱").getMeshByName("模型名稱").setVisible(false);//設定模型物件是否可見,true表示可見,false表示不可見
點選設計器左上角「檔案>建立視覺化看板」,建立一張空白範本,可自訂名稱和尺寸。如下圖所示:
新增三維自訂場景組件到頁面,點選「編輯組件」,生成一個空場景。如下圖所示:
1)點選下載並解壓 glb 模型檔案:點位模型資源.zip
2)在三維自訂場景組件編輯介面,點選「模型>新增模型物件>上傳新模型」,將模型上傳後,選中模型,將其新增到場景中。如下圖所示:
注:V1.18.1 及之後版本支援多選模型批量上傳。
3)選中模型物件,複製模型,適當調整模型位置、場景視角。可根據實際情況修改模型名稱,後續需透過獲取模型名稱實現模型的隱藏與顯示。
最終效果如下圖所示:
4)完成場景設定後,點選左上角「傳回視覺化看板」傳回到畫布。
新增一個標題組件,組件內容為「只顯示藍色點」。如下圖所示:
給標題組件新增一個 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);
點選範本右上角「儲存」,「預覽」按鈕,效果如 1.2 節效果所示。
注:不支援行動端。
點選下載範本:JS實現FVS模型的顯示或隱藏.fvs
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉