巧用三維城市GIS底圖

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

1.1 版本

1.2 場景介紹

本文主要介紹 FVS 的 三維城市組件 GIS 底圖背景結合官方提供的 geojson轉列工具 的巧妙應用，以便快速實現精美的地圖效果。

1.3 實現效果

本文使用一個簡單的範例範本講解三維城市組件的應用，實現效果如下圖所示：

2.1 建立範本

建立一張大屏範本，自訂名稱、畫布尺寸等。如下圖所示：

點選「三維組件>三維城市」，將組件新增到畫布中，如下圖所示：

因為三維城市初次編輯時，需要上傳 geojson 檔案，所以接下來我們需要使用 FineGeoJSON Editor  工具轉列 geojson。

2.2 自訂 geojson 檔案

FineGeoJSON Editor 工具的詳細使用方式可參考說明文檔：FineGeoJSON Editor  。

2.2.1 搜尋定位

首先透過搜尋定位，定位到我們想要的地理位置。如下圖所示：

2.2.2 建立多段線

定位後，如果我們沒有道路、建築等一系列需求，是可以直接匯出 geojson 檔案的。

但是本例我們需要在地圖上顯示幾條管網線路，所以我們需要新增幾條多段線。如下圖所示：

建立完成後，選中多段線，在右側「改寫物」中設定其名稱。如下圖所示：

2.2.3 獲取點位置經緯度

點選「建立標記點」按鈕，選中標記點可以隨意行動位置，在右側圖層屬性會出現該點的經緯度。如下圖所示：

獲取我們需要的經緯度，在 FVS 範本中建立內建資料集，將資料資訊填入。本例資料如下圖所示：

注：這一步新增的標記點只是為了獲取位置資訊，使用完可以刪除。

2.2.4 匯出 geojson

完成後點選「文件>保存 GeoJSON」按鈕，將匯出名為 fine.geojson 的檔案，匯出後名稱可自行修改。

2.3 設定三維城市場景

2.3.1 建立場景

回到 FVS，選中三維城市場景組件，點選「編輯組件」建立場景，選擇匯出的 fine.geojson 檔案。

建立好之後，「場景>地面背景」預設為「單色」，只能看到管網線路，修改為「GIS底圖」就可以看到 geojson 檔案中的地圖資訊了。

操作示範如下：

2.3.2 修改模型樣式

在「模型」中選中模型，修改自訂轉列的管網線路的樣式，使其顯示的更明顯。如下圖所示：

2.3.3 設定資料圖層

1）點選「資料」，新增一個「點-資料圖層」，綁定 2.2.4 節設定的內建資料集。如下圖所示：

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

完成後點選左上角「傳回視覺化看板」傳回畫布，適當調整組件尺寸以及三維城市視角，最後儲存預覽即可。

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

範例範本及 geojson 檔案：三維城市GIS底圖應用範例.zip

範本資源線上體驗：智慧水務管理大屏

範本資源下載位址：智慧水務管理大屏