基於iPortal製作疫情大屏

作者：LX

SuperMap iPortal爲大家提供了開箱即用的SuperMap iPortal WEBAPP——MapDashboard，便捷的拖拽式組件，可以幫助大家輕鬆構建精美的大屏。MapDashboard能夠展現GIS時空數據可視化的魅力，同時幫助GISer輕鬆搭建專業美觀的地圖大屏應用，支持多種數據類型，滿足你的不同可視化需求，只需像製作PPT一樣動動鼠標，就可得到精美大屏。本文將基於iPortal MapDashboard帶領大家制作新型冠狀病毒感染的肺炎疫情大屏，用於展示二月份全國的疫情情況。

地圖大屏功能介紹

豐富的地圖組件和模板
地圖大屏內置了豐富的地理組件和模板，支持二維地圖和三維場景的展示，同時提供了多種類圖表和可視化組件，爲我們帶來了豐富的地理可視化表達方式。
輕鬆編輯，一鍵換色
全拖拽式編輯方式，讓我們可以輕鬆構建應用；同時內置了多套配色主題，可以對應用一鍵換色。
多屏適配，手機隨心看
製作的應用天生適配多種分辨率的屏幕，手機上也能隨心瀏覽和分享。
多源數據接入
支持靜態動態等多種類地理數據，支持視屏、圖片、網頁等多源數據。

疫情大屏製作流程

下面將通過iPortal MapDashboard來快速構建的疫情大屏。

構建疫情大屏步驟

數據準備
本文的數據來源於國家以及各省市衛健委官網（PS：可能會由於計算問題導致有些數據有誤，僅做範例數據演示，不做官方參考數據）
1、獲取到疫情數據生成CSV文件

2、在iDesktop中創建一個數據源，把全國行政區劃數據和獲取的疫情數據都導入到數據源中

3、將疫情數據都導入到數據源中並將各省的疫情數據追加到行政區劃數據集中

4、將全行政區劃數據添加到地圖上製成一幅地圖，然後保存工作空間，並壓縮成zip包
5、在iPortal數據資源中上傳工作空間壓縮包並且發佈成服務
數據上圖
在構建大屏時需要進行地圖添加，因此我們首先用SuperMap iPortal數據上圖進行地圖構建。
1、添加行政區劃圖層：這裏通過搜索添加，搜索到發佈的疫情數據地圖服務，然後添加到地圖中。

2、添加疫情專題圖層：通過搜索添加發布的疫情數據服務，然後添加到地圖中

3、通過對分段法、分段顏色、標籤顯示、輪廓、圖例、字段過濾等設置，我們可以按需配置出一副漂亮的分段專題地圖。

4、最後，保存地圖

大屏構建
這裏通過地圖組件和多個圖表組件來進行可視化表達二月份各省疫情的分佈情況以及每天的疫情變化。
1、打開一個空白的大屏模板、然後添加容器組件給整個頁面佈局並且給容器一個合適的邊框，這裏我選中“邊框6”

2、添加大屏標題
3、添加地圖組件
1）將地圖組件添加到容器中
2）選擇地圖，這裏選中之前在數據上圖中製作好的地圖

3）添加地圖子組件
在右側“地圖屬性設置”中將需要設置的子組件設置爲可見，這裏將“縮放”、“比例尺”、“圖例”組件設置爲顯示狀態
4）添加點選查詢組件，設置需要顯示的字段以及要素高亮樣式和彈窗的顯示樣式
5）添加文字信息
到此整個地圖組件就製作完成了：

圖中通過地圖反映出以湖北爲中心，全國分佈趨勢基本呈空間散射狀態，逐級遞減。我們通過添加地圖子組件來豐富地圖的可視化效果，通過添加點選查詢組件加入圖層字段設置，支持在地圖中進行各省疫情數據的點選查詢。

4、添加圖表組件
這裏主要是添加折線圖、柱狀圖、環形圖來表達疫情信息，這幾種圖表製作方法都一樣，就不一一介紹了，這裏僅以折線圖爲例給大家介紹一下圖表的製作流程
首先，添加圖表標題，直接在組件中將文本組件拖到佈局窗口的適當位置，然後修改字體顏色和大小即可；
其次，選擇之前發佈好的數據

分別設置X軸和Y軸顯示字段

折線圖效果：

通過折線圖可以直觀的反應二月份每天全國疫情的變化趨勢，例如，通過圖表我們很明顯的看出2月份中12日的確診病例是極大的高於其他時間的。
柱狀圖效果：

通過柱狀圖，我們可以很直觀的對比出二月份哪些省份確診病例較多，哪些省份較少。
環形圖效果：

通過環形圖，我們明顯的看出二月份全國涉疫人數中，確診、治癒、死亡以及密切接觸人數的一個佔比情況。
5、添加大屏的文本信息
這裏主要是添加累計確診病例以及累計治癒和死亡病例
到這裏，我們的大屏就製作完成了，我們點擊保存和發佈來預覽一下大屏效果：

同時大屏也支持在移動端瀏覽，將發佈出來的地址在移動端打開即可看到效果:

注意事項：
1、在添加組件之前先添加容器做好佈局，不要直接添加組件，這樣做可以防止在移動端瀏覽的時候佈局錯亂。
2、移動端瀏覽的時候組件的前後順序是按照先上下後左右的順序