傳統地圖不夠炫,快來GET實用而強大的html5地圖

數據地圖,你在做關於地理位置的數據分析時常會用到。

億信BI在數據分析展示方面是首屈一指,內置數十種可視化元素和圖形,通過設計與搭配,可衍生出成千上萬種可視化效果。億信BI有強大的地圖功能,包括基本地圖、GIS地圖、熱力地圖、html5地圖、3D地圖等,有以下一個體系:


傳統地圖不夠炫,快來GET實用而強大的html5地圖

先來認識一下html5地圖,小億教你如何使用億信BI的數據地圖製作功能,來提升表哥表姐們數據報表的逼格。

html5地圖類型介紹

1、html5主幹線圖

帶主幹線的地圖,用於查看地理位置信息之上定義的關係圖。

名稱:中國鐵路運輸線路

創作思維:中國有多少條鐵路線路?從A地到B地是否有鐵路線路?若是有,我可以乘坐哪條線路?鐵路線路主要分佈在哪些省份?下面的作品展示了這個創意。

傳統地圖不夠炫,快來GET實用而強大的html5地圖

從上圖中我們可以看到中國的部分鐵路運輸線路,有南北線和東西線組成,圖片列舉了從北京出發到廣州的一條線路(北京-石家莊-鄭州-武漢-廣州),還可以根據距離選擇最佳的乘車方案。

2、html5標點地圖

標點和地圖的結合,我們以地圖為背景,在上面標點。我們將標點展示在一個指定的地理區域內,標點裡可以展示數值。

名稱:全國各市PM2.5情況統計

創作思維:PM2.5已經成為了人們日常關注的焦點,它可以判斷一個城市環境的優劣,PM2.5數值越大表明環境汙染越嚴重,將採集過來的PM2.5數據彙總錄入到數據庫中,通過地圖展現PM2.5數值分佈情況,我們可以很清晰的判斷哪些城市適合居住。


傳統地圖不夠炫,快來GET實用而強大的html5地圖

從上圖中可以看出PM2.5數值的大小使用由青到紅的顏色排列,數值越大顏色越紅,數值越小顏色越青,汙染嚴重(PM2.5>200)的地區分佈在北京、河北、山西等地,並以紅色閃動的炫光提醒,也可以拖動地圖左下方的值域設置組件過濾顯示在PM2.5數值區間的地區。

3、html5渲染式地圖

渲染地圖按區域指標數值大小以不同的顏色渲染來展示和區分,以起到預警的作用。

名稱:湖北省各市六月份平均氣溫分佈情況

創作思維:相信很多人都有查看天氣預報的習慣,我們接觸都是單純的氣溫數據,數據越大,溫度越高,當引入html5渲染式地圖後,我們可以將氣溫的數值渲染在地圖上,當溫度越高時,顏色越深,這樣可以形成一個很直觀的感受。

傳統地圖不夠炫,快來GET實用而強大的html5地圖

從上圖我們可以看到湖北省各市的氣溫,使用不同的顏色表示溫度,溫度越高,顏色越紅,隨州市六月份的均溫最高,拖動地圖左下方的域值設置組件顯示不同的氣溫區間的城市。

4、html5流向圖

流向圖常用來可視化源匯流數據。源地和匯地可以是點,也可以是面。源地和匯地之間的互動數據,常用線段來表達,線的寬度或顏色來表示源地和匯地之間的流向數值,線段上可以使用自定義圖片如箭頭來表示流向方向。流向地圖多應用於區際貿易、交通流向、人口遷移、購物消費行為、通訊信息流動、航空線路等場景。

名稱:湖北省畢業生流向圖

創作思維:每年畢業季,特想看看畢業生都去了哪裡?使用html5流向圖後就可以很清楚的將這些信息捕捉到。

傳統地圖不夠炫,快來GET實用而強大的html5地圖

從上圖可以看到,湖北省的畢業生還是北漂的比較多,既有從本省到各省的流向,鼠標放到流向省份還可以看到具體人數。

傳統地圖不夠炫,快來GET實用而強大的html5地圖

通過拖動地圖左下方的值域,紅黃綠藍色依次漸變,可以看到對畢業生吸引力很大的城市依舊還是帝都呢。每年到春運的時候,哪些線路人員流動比較大,也可以使用html5流向圖來顯示。

html5地圖製作教程

此處以渲染圖為例講解制作過程,其他類型的製作流程都大同小異。

第一步:添加統計圖組件,選擇html5地圖類型

將柱狀圖組件以拖拽的方式添加到報表模板中:

傳統地圖不夠炫,快來GET實用而強大的html5地圖

雙擊組件出現統計圖設置窗口,選擇“統計圖類型”後在左側欄中找到“地圖”這一項。選擇其中一種類型,點擊確定。

傳統地圖不夠炫,快來GET實用而強大的html5地圖

第二步:html5地圖取數設置

製作分析表,根據地區維度浮動出指標值。

傳統地圖不夠炫,快來GET實用而強大的html5地圖

在統計圖設置中設置數據源,關聯做好的分析表格。

傳統地圖不夠炫,快來GET實用而強大的html5地圖


第三步:調整地圖配色

為了讓地圖的效果更好,通常會先選擇系統中提供的配色方案,然後再設置標題、微調背景牆壁、邊框和填充等的顏色樣式。如下圖所示,選擇需要的配色方案之後,在預覽中就能看到地圖的配色效果。

傳統地圖不夠炫,快來GET實用而強大的html5地圖

接著,可以在高級選項中,設置邊框和填充色,其他微調設置就不一一介紹。

傳統地圖不夠炫,快來GET實用而強大的html5地圖

第四步:優化其他設置

可以同時使用標點圖和渲染圖:添加兩個系列,分別選擇不同的系列類型。

傳統地圖不夠炫,快來GET實用而強大的html5地圖

還可以選擇地圖類型:

傳統地圖不夠炫,快來GET實用而強大的html5地圖

最後,這樣一張數據渲染地圖就做好啦。你學會了嗎?

傳統地圖不夠炫,快來GET實用而強大的html5地圖

另一種GIS地圖,我們下次再約哦~


分享到:


相關文章: