FVS點擊跳出彈出框

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

注：不支援行動端。

1.1 版本

1.2 應用場景

透過點選 FVS 三維城市組件中的點/柱/線/模型，可觸發對應元素的彈出框，支援傳遞參數，支援自訂彈出框樣式。如下圖所示：

2.1 使用須知

V2.0.0 版本起，三維組件的分頁跳轉、Javascript、組件聯動、網頁連結/彈出框入口行動至 三維場景組件資料圖層 中。

彈出框、網頁連結事件合併入口為「網頁連結/彈出框」事件，原網頁連結「對話框」開啟方式合併為「彈出框」開啟方式。

2.2 功能入口

進入三維組件編輯介面，在「資料」中先新增資料圖層，再點選圖層中的「新增事件」，選擇「按滑鼠左鍵>網頁連結/彈出框」，再進行事件設定。

彈出框設定分為「內容事件」和「樣式設定」。詳細說明可參考： FVS跳轉網頁連結/彈出框事件 。

如下圖所示：

本文範例：透過點選三維城市柱資料圖層，跳出彈出框顯示大廈的詳細資訊。且將建築名稱作為參數值傳遞到彈出框中。

3.1 製作FVS範本

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

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

3.1.1 建立大屏範本

使用者點選菜單欄「檔案>建立視覺化看板」，設定大屏範本名稱為「FVS彈出框範例」，點選「確定」，如下圖所示：

3.1.2 準備資料

需要建立一個資料集，用於給三維城市新增資料圖層。使用者建立內建資料集「建築位址」，具體資料如下圖所示：

3.1.3 新增三維城市組件

在「頁面1」，使用者選擇組件區「三維組件>三維城市場景」，點選新增到頁面中。在右側配置區點選「內容>編輯組件」，進入三維城市編輯介面。如下圖所示：

3.1.4 建立場景

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

在三維城市編輯介面，使用者點選「建立場景」按鈕，建立方式選擇「生成新場景」。

點選「選擇資料」，選擇文檔提供的三維geojson範例資料，點選「生成場景」，如下圖所示：

3.1.5 新增資料圖層

場景建立成功後，點選配置欄「資料>新增資料圖層>柱體-資料圖層」，並綁定資料集，設定柱體樣式。

設定圖層名稱為「圖層1」。資料集取自「建築位址」，座標點分別對應資料集中的「經度」和「緯度」，柱體名稱選擇「建築名稱」。

滑鼠滑動調整三維城市視角，最終三維城市效果如下圖所示：

3.1.6 新增資料標籤

點選圖層1中的「新增事件>資料更新後」，選擇「資料標籤」。如下圖所示：

設定標籤名稱為「資料標籤」，取消勾選「座標點內容」，其餘設定保持預設。如下圖所示：

3.1.7 儲存範本

點選場景編輯介面左上角「傳回視覺化看板」按鈕，傳回畫布。點選畫布右上角「儲存」按鈕，將範本儲存到報表工程下。

3.2 製作彈窗範本

接下來需要另外製作一張範本，作為彈出框的內容。

3.2.1 建立範本

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

3.2.2 準備資料

建立內建資料集「大樓資料」，具體資料如下圖所示：

注：其中大樓名稱與 3.1.2 節資料集中的建築名稱需保持一致。

3.2.3 新增表格組件

選擇組件區「文字>表格」，點選新增到頁面中。在右側配置區點選「內容>編輯組件」，進入表格編輯介面。

3.2.4 設計表格內容

表格主體 A1~E4 內容如下圖所示，A列、D列為普通正文，B列、E列為資料列。

選中 B2、B3、B4、E1、E2、E3、E4儲存格，點選配置欄「儲存格屬性>擴展」，設定左父格為「自訂>B1」。

3.2.5 設定儲存格過濾

該步驟的目的：讓主範本與彈窗中的資料透過參數傳遞產生聯動。

雙擊 B1 儲存格，點選「過濾」，設定過濾條件為列名「大樓名稱」等於參數「$name」，點選「增加」將條件新增到列表中。如下圖所示：

注：這裏的參數直接輸入即可，無需在範本中新增參數，後續接收主範本傳遞的參數值即可顯示資料。

3.2.6 設定表格內容適應方式

點選表格編輯介面左上角「傳回視覺化看板」，回到畫布。設定表格組件內容適應方式為「雙向鋪滿」。如下圖所示：

3.2.7 設定頁面背景

該步驟是為了讓彈窗中不顯示該範本的背景顏色，僅顯示彈窗的背景顏色，使彈窗顯示效果更好。

選中頁面1，將頁面背景設定為「無」。如下圖所示：

最後點選右上角「儲存」按鈕，將該範本儲存到%FR_HOME%\webapps\webroot\WEB-INF\reportlets資料夾下。

注：若儲存到了其他資料夾/路徑下，下文彈出框呼叫的位址需要自行更改。

3.3 設定FVS彈出框

3.3.1 新增彈出框事件

開啟 3.1 節制作的「FVS彈出框範例.fvs」範本，進入三維城市編輯介面，點選「資料」。

在需要新增事件的資料圖層下，點選「新增事件>按滑鼠左鍵」，選擇「網頁連結/彈出框」事件。如下圖所示：

3.3.2 設定內容事件

設定事件名稱為「建築詳情」，開啟方式為「彈出框」 。

選擇「範本連結」，選擇 3.2 節制作的「大樓彈窗資料.fvs」。

設定參數名稱為「name」（與 3.2.5 節設定的過濾參數一致），參數型別選擇「當前組件欄位」，參數內容選擇欄位「建築名稱」。

如下圖所示：

3.3.3 設定彈出框樣式

選擇「樣式設定」，顯示位置選擇「動態顯示」，其餘設定可根據個人喜好進行設定，本文不再贅述。本例設定如下圖所示：

3.4 效果預覽

儲存範本，預覽「FVS彈出框範例.fvs」範本，效果如 1.2 節所示。

透過點選三維城市柱資料圖層，彈出框顯示大廈的詳細資訊。且將建築名稱作為參數值傳遞到彈出框中。

注1：若點選相關資料圖層，無法出現彈窗，可能是建築擋住了資料圖層，請旋轉視角，確定真正點選到了資料圖層。

注2：彈出框支援行動端，但三維組件不支援行動端，故本文範例無行動端效果。

點選下載 FVS 範本：

FVS彈出框範例.fvs

大樓彈窗資料.fvs