自订繪制3D城市或園區

適用場景：安裝了「FineVis數據可視化」插件的使用者，可參考本文了解 FVS 範本製作。

1.1 版本

1.2 場景介紹

本文主要介紹基於fvs的三維城市組件和官方提供的geojson繪制工具，如何構建一個3D的城市區域、園區或棟樓場景。

1.3 實現效果

效果1：自訂繪制園區佈局，自動生成3D建築效果

效果2：點選模型彈框

效果3：點選按鈕切換園區視角

2.1 繪制geojson

先提供一個與FVS配套的擴展工具，實現使用者自訂繪制園區、城市的geojson：https://fvs.fineres.com/geojson/

注：以下使用的園區圖紙來源於網路，對應的園區場景也是虛擬。

2.1.1 定位園區

搜尋框定位到該園區所在位置，可以滑鼠拖動地圖位置、放大縮減地圖區域：

2.1.2 框選園區

點選“建立矩形”按鈕框選園區所在區域：

2.1.3 上傳園區圖紙

在“背景”中點選“上傳”，上傳園區圖紙作為區域背景：

2.1.4 繪制園區

以園區圖紙作為背景，分別勾勒建築、道路、水系和草地的輪廓。

1）勾勒建築輪廓：

在勾勒輪廓時，先點選滑鼠右鍵初步確定多邊形。

點選白色圓點可以刪除多邊形的頂點，點選藍色圓點增加頂點，可以拉動頂點的位置調整多邊形。

多邊形輪廓最終確定後，點選“確定”按鈕；若需要刪除多邊形，可在“完成”後點選“刪除”按鈕。

確定輪廓後，選中建築多邊形，在“名稱”欄為建築命名；可賦予一個高度，此處建築之間的高度不同，匯入fvs後也會有不同的高度。

2）勾勒水系和草地的輪廓：以同樣的方式轉列多邊形並命名，但講型別選擇為“草地”或“水系”，即可得到一塊草地或湖泊。

3）勾勒道路：點選建立多段線，即可得到一個3個頂點的多段線，調整這個多段線的頂點位置，獲得一條道路。

2.1.5 暫存和匯出

暫存工程：若轉列園區是一個比較費時的工程，可以中途點選“文件>暫存工程”， 把手頭編輯的工作暫存至瀏覽器(基於瀏覽器快取, 只在本機使用)；

儲存GeoJSon：完全轉列好後，點選“檔案>儲存GeoJSon”，可獲取園區的geojson檔案。

注：轉列完成後要注意把上傳背景的矩形刪掉。

2.2 匯入生成 3D

進入組件編輯介面，使用“三維城市場景”組件匯入剛剛轉列的園區geojson。詳情請看文檔：FVS三維城市場景組件

匯入後生成效果如下，使用者可以選擇開啟或關閉“GIS底圖”。若開啟GIS底圖，可以看到園區所在的地理資訊，如道路名稱等。

2.3 調整模型

2.3.1 調整模型樣式

點選“模型”tab並進入模型列表，選中任一建築，可以調整建築的頂面和立面的材質和顏色，也可以一鍵切換風格。

調整好一個建築的樣式後，可以點選“應用到所有主建築”，更換預設建築樣式。

2.3.2 調整模型視角

滑鼠左鍵拖動可以旋轉模型的視角，右鍵可以位移模型，滑鼠捲動放大縮減。

點選「傳回視覺化看板」回到畫布介面，點選“視角調整”進入視角編輯狀態，可以根據範本整體佈局調整模型的大小和視角。

2.3.3 新增場景特效

調整好建築樣式後，可以給場景新增衝擊波、飛昇線條和粒子特效，也可以開啟相機功能實現自動旋轉。

2.4 配置資料

2.4.1 模型資料標籤

模型的名稱是與資料聯動的“樞紐”，使用者可以修改建築模型的名稱；配置資料時，需要準備好含有模型名稱欄位的資料集。在在「資料」-「新增資料圖層」-「模型-資料圖層」新增資料圖層：

根據模型名稱匹配「模型名稱」欄位，如下圖所示：

點選「新增事件>資料更新後>資料標籤」，為模型設定顯示內容、字元大小、色相即顯示形式。如下圖所示：

2.4.2 模型彈框

在配置好模型的資料圖層後，可以對圖層設定“彈出框”的點選交互事件，實現點選圖層對應的建築模型彈出明細資訊視窗。

具體可以參考說明文檔：FVS三維組件點選跳出彈出框

2.5 構建多視角

若要實現園區視角的切換效果，需要複製多個分頁，依次調整每個分頁的模型視角，並開啟分頁的平滑過渡功能。

在每個分頁分別製作跳轉按鈕（這裏用了”標題“組件），選中作為按鈕的組件，選擇「互動」-「點選事件」-「分頁跳轉」，選擇對應的跳轉頁面：

2.6 預覽效果

注：三維組件不支援行動端。

測試範本：智慧園區test.fvs

測試材料：餐飲中心彈窗資料.fvs