FVS點擊隐藏/顯示資料圖層

適用場景：安裝了「FVS大屏編輯模式」插件的使用者，可參考本文了解 FVS 範本的相關功能。

注：不支援行動端。

1.1 版本

1.2 應用場景

FVS 三維城市組件中，可以設定多個資料圖層，使用者希望根據需求動態顯示資料圖層。如下圖所示：

1）在FVS大屏編輯器中，支援隱藏資料圖層。

2）提供隱藏資料圖層的API，支援透過JavaScript事件動態顯示資料圖層。

1.3 API簡介

1）獲取三維城市全部資料圖層

注：傳回值是資料，必須後面再加個[0]這種取陣列物件。

duchamp.getWidgetByName("三維城市名稱").getDataLayers() 

2）獲取三維城市指定名稱的圖層

duchamp.getWidgetByName("三維城市名稱").getDataLayerByName("圖層1"); 

使用者需要先製作一張包含三維城市組件的 FVS 大屏範本。

注：本章僅示範一個簡單的三維城市組件如何製作。更多功能請參見：三維城市組件 。

2.1 建立大屏範本

使用者點選菜單欄「檔案>建立視覺化看板」，建立一張空白看板，可設定範本名稱和尺寸。如下圖所示：

2.2 建立資料集

需要建立一個資料集，用於給三維城市新增資料圖層。

使用者建立內建資料集「城市資料」，資料集內容如下圖所示：

2.3 新增三維城市組件

在「頁面1」，使用者選擇組件區「三維組件>三維城市」，點選新增到頁面中。

選中三維城市組件，在配置區點選「內容>編輯組件」，進入三維城市編輯介面。如下圖所示：

2.4 建立場景

使用者需要先準備好三維城市的場景資料，點選下載並解壓三維geojson範例資料：範例地區.zip

在三維城市編輯介面，使用者點選「建立場景」按鈕，建立方式選擇「生成新場景」。點選「選擇資料」，選擇文檔提供的三維geojson範例資料，點選「生成場景」，如下圖所示：

2.5 新增資料圖層

1）新增模型圖層「建築名稱」

點選配置欄「資料>新增資料圖層>模型-資料圖層」。

設定圖層名稱為「建築名稱」。資料集取自「城市資料」，模型名稱選擇「建築名稱」。點選「完成」，如下圖所示：

2）新增點圖層「通訊改寫率」

點選配置欄「資料>新增資料圖層>點-資料圖層」。

設定圖層名稱為「通訊改寫率」。資料集取自「城市資料」，座標點具體設定如下圖所示。點選「完成」。

3）新增點圖層「待售樓盤數」

點選配置欄「資料>新增資料圖層>點-資料圖層」。

設定圖層名稱為「待售樓盤數」。資料集取自「城市資料」，座標點具體設定如下圖所示。點選「完成」。

4）新增柱圖層「本月突發事件」

點選配置欄「資料>新增資料圖層>柱-資料圖層」。

設定圖層名稱為「本月突發事件」。資料集取自「城市資料」，座標點具體設定如下圖所示。點選「完成」。

2.6 隱藏資料圖層

在配置欄「資料」介面，隱藏「通訊改寫率」和「待售樓盤數」資料圖層。如下圖所示：

2.7 效果預覽

點選「傳回視覺化看板」，從三維城市編輯介面跳出到畫布介面。

點選右上角「預覽」按鈕，即可預覽FVS範本。

使用者只能看到「建築名稱」和「本月突發狀況」資料圖層，無法看到被隱藏的「通訊改寫率」和「待售樓盤數」資料圖層。

本節範例：

三維城市組件中存在四個資料圖層：「建築名稱」、「本月突發狀況」、「通訊改寫率」和「待售樓盤數」。

「建築名稱」資料圖層始終顯示。按照點選的圖表系列名，動態顯示其他三個資料圖層。

請先按照第二章完成基礎範本製作，再基於基礎範本進行本章操作。

3.1 建立資料集

需要建立一個資料集，用於給餅圖新增資料。其中一欄需要與資料圖層的名稱一致，用於傳遞參數。

開啟第二章製作的FVS大屏範本，建立內建資料集「指標關注度」，資料集內容如下圖所示：

3.2 新增餅圖組件

在「頁面1」，使用者選擇組件區「圖表>餅圖類>餅形圖」，點選新增到頁面中。

選中組件，在配置區設定組件「內容>資料」，設定資料集為「指標關注度」，分類為「無」，系列名為「指標」，值為「關注度」，具體如下圖所示。

組件樣式可根據個人喜好設定，本文不再贅述。

3.3 修改三維城市組件名稱

選中三維城市組件，點選配置欄「組件」，修改組件名稱為「三維城市」。如下圖所示：

注：也可不修改，但後文代碼中的組件名稱需要自行修改。

3.4 設定JavaScript事件

選中餅圖組件，點選「互動>點選事件」，新增點選事件「JavaScript」。

設定事件名稱為「動態顯示資料圖層」。

設定參數，參數名稱為「abc」，參數型別選擇「當前組件欄位」，參數內容為「系列名稱」。

設定JavaScript執行腳本為：

const widget = duchamp.getWidgetByName("三維城市");//獲取名稱為「三維組件」的組件的所有資料圖層名稱
widget.getDataLayers().forEach(layer => layer.setVisible(false));//隱藏獲取到的所有資料圖層
widget.getDataLayerByName("建築名稱").setVisible(true);//顯示名為「建築名稱」的資料圖層
widget.getDataLayerByName(abc).setVisible(true);//顯示與系列名稱一致的資料圖層

3.5 效果預覽

儲存範本，點選右上角「預覽」，預覽效果如下圖所示：

「建築名稱」資料圖層始終顯示。按照點選的圖表系列名，動態顯示其他三個資料圖層。

本節範例：

三維城市組件中存在四個資料圖層：「建築名稱」、「本月突發狀況」、「通訊改寫率」和「待售樓盤數」。

透過點選按鈕，可實現隱藏全部資料圖層/顯示全部資料圖層

請先按照第二章完成基礎範本製作，再基於基礎範本進行本章操作。

4.1 建立標題組件

標題組件被用作按鈕，實現點選切換的功能。

開啟第二章製作的FVS大屏範本，在「頁面1」，選擇組件區「文字>標題」，點選新增到頁面中。

選中組件，在配置區設定組件「內容」，設定標題內容為「顯示/隱藏所有資料圖層」。如下圖所示：

標題組件的其他樣式請按照個人喜好自行配置，本文不再贅述。

4.2 修改三維城市組件名稱

選中三維城市組件，點選配置欄「組件」，修改組件名稱為「三維城市」。如下圖所示：

注：也可不修改，但後文代碼中的組件名稱需要自行修改。

4.3 設定JavaScript事件

選中標題組件，點選「互動>點選事件」，新增點選事件「JavaScript」。

設定事件名稱為「點選隱藏/顯示所有資料圖層」。

設定JavaScript執行腳本為：

const widget = duchamp.getWidgetByName("三維城市");
const layers = widget.getDataLayers();
const visible = !layers.some(layer => layer.visible);
layers.forEach(layer => layer.setVisible(visible));

4.4 效果預覽

儲存範本，點選右上角「預覽」，預覽效果如下圖所示：

先判斷是否有資料圖層顯示着。

• 若有資料圖層顯示着，則點選全部隱藏。

• 若所有資料圖層均隱藏着，則點選全部顯示。

已完成範本請參見：FVS點擊隱藏展示資料圖層.fvs

範例一、範例二分別對應範本中的頁面1、頁面2。

點選下載並解壓三維城市geojson資料：範例地區.zip