B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

3 評(píng)論 9783 瀏覽 65 收藏 21 分鐘

編輯導(dǎo)語(yǔ):GIS地圖是一種新型的地圖,用來反映和分析數(shù)據(jù),直觀地表達(dá)數(shù)據(jù)間的空間關(guān)系。那么,如何制作數(shù)據(jù)可視化地圖呢?本文作者對(duì)此作出了分析,一起來看一下吧。

地理信息系統(tǒng)(英語(yǔ):Geographic Information System,縮寫:GIS)是以可視化和分析地理配置信息為目的,用于描述和表征地球及其他地理現(xiàn)象的一種系統(tǒng)。

B端設(shè)計(jì)師會(huì)在數(shù)據(jù)可視化大屏設(shè)計(jì)中或多或少有所接觸,GIS地圖是一種新型的地圖,其所呈現(xiàn)的內(nèi)容遠(yuǎn)非靜態(tài)地圖所能及。

在一些新聞報(bào)道中,也經(jīng)??吹绞褂玫貓D來分析顯示各類數(shù)據(jù)信息,這樣使用地圖來反映和分析數(shù)據(jù)的形式就是GIS地圖實(shí)際應(yīng)用。由于GIS地圖能夠最直觀地表達(dá)數(shù)據(jù)間的空間關(guān)系,所以它被廣泛應(yīng)用于各種數(shù)據(jù)分析場(chǎng)景。

GIS是數(shù)據(jù)可視化的高頻應(yīng)用之一,去網(wǎng)上搜索以下“數(shù)據(jù)可視化大屏”,基本上是以GIS地圖作為大屏的主視圖來呈現(xiàn)的。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

為什么數(shù)據(jù)可視化大屏展示總是以GIS地圖作為主視圖?

可視化大屏多用于外部展示或給領(lǐng)導(dǎo)匯報(bào)情況。在大屏的中央放置地圖,講解者在介紹整體數(shù)據(jù)情況時(shí)可以從這里說明。整個(gè)交流過程有獲得重要決策信息的感覺,而且不論是政務(wù)事務(wù),還是市場(chǎng)化的商業(yè)活動(dòng)都在一定的空間范圍內(nèi)進(jìn)行,需要報(bào)告的重要數(shù)據(jù)基本上與地區(qū)直接相關(guān),整體信息的獲取也非常方便。因此,地圖是數(shù)據(jù)可視化設(shè)計(jì)中必不可少的一個(gè)元素。

隨著數(shù)據(jù)可視化技術(shù)的發(fā)展,企業(yè)需要把數(shù)據(jù)和地理聯(lián)系起來,數(shù)據(jù)地圖應(yīng)運(yùn)而生,在準(zhǔn)確傳達(dá)數(shù)據(jù)的基礎(chǔ)上使界面更加直觀,更具有觀賞性。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

01 數(shù)據(jù)地圖有哪些要求?

地理數(shù)據(jù)可視化是可視化決策系統(tǒng)中的關(guān)鍵,往往將地圖要素、業(yè)務(wù)管理、物聯(lián)網(wǎng)感知、視頻監(jiān)控等多種數(shù)據(jù)集成,并且進(jìn)行高度融合和挖掘分析,構(gòu)建智能化管理相關(guān)應(yīng)用,幫助用戶對(duì)現(xiàn)實(shí)地理空間中的各種監(jiān)測(cè)對(duì)象作出快速、準(zhǔn)確的判斷,為城市規(guī)劃、建設(shè)、管理和決策提供可視化支持。

正因GIS地理信息數(shù)據(jù)的重要基礎(chǔ)支撐作用,具體到可視化決策系統(tǒng)中,地理信息可視化必須滿足以下幾個(gè)要求:

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

1. 功能強(qiáng)大

數(shù)據(jù)地圖的重要功能是加載顯示各個(gè)地域的數(shù)據(jù)信息,并進(jìn)行融合分析,因此必須具有超強(qiáng)的功能性,才能承載大型城市的運(yùn)行態(tài)勢(shì)。數(shù)據(jù)地圖可載入高精度地形資料、三維建筑物資料、BIM資料、城市傾斜攝影資料、感應(yīng)器資料、車輛、人員、攝像機(jī)、基礎(chǔ)設(shè)施、事件資料等要素資料,全面、詳盡地再現(xiàn)各類數(shù)據(jù)在地理空間上的運(yùn)行態(tài)勢(shì)。

2. 數(shù)據(jù)精確

隨著GIS地理空間技術(shù)的不斷提高,對(duì)于地理空間數(shù)據(jù)的精確度要求也越來越高。數(shù)據(jù)地圖上的地理要素?cái)?shù)據(jù)顯示必須具備高度的準(zhǔn)確性,精準(zhǔn)定位并且真實(shí)反應(yīng)各個(gè)地理要素的空間位置信息和狀態(tài),為用戶決策研判提供全面、準(zhǔn)確的事實(shí)依據(jù)支持。逐步實(shí)現(xiàn)地理信息管理空間的細(xì)化、管理對(duì)象的精確、數(shù)據(jù)指標(biāo)的精準(zhǔn),保障各類決策、管理能夠真實(shí)有效的推進(jìn)。

3. 效果震撼

對(duì)需要加載到數(shù)據(jù)地圖中進(jìn)行顯示的,匯集出來的城市各個(gè)領(lǐng)域的要素?cái)?shù)據(jù),不應(yīng)該是簡(jiǎn)單的信息堆砌,而是要有良好的視覺、風(fēng)格設(shè)計(jì)。高水準(zhǔn)的視覺效果,可以為管理者提高決策的判斷力,提高工作效率。

02 如何去選擇數(shù)據(jù)地圖?

首先,你需要確定你所要顯示的數(shù)據(jù)是否與地理位置或地理信息相關(guān)。然后,確定你所要展示的地域范圍。我舉個(gè)例子,拿一個(gè)面向國(guó)內(nèi)業(yè)務(wù)的銷售公司來說,他們更關(guān)注的是全國(guó)、各個(gè)銷售大區(qū)以及各省的銷售數(shù)據(jù),你就可以使用2D或3D中國(guó)地圖來顯示您的銷售數(shù)據(jù)。

或者你的銷售范圍只有某個(gè)城市,你更新了解某一家店的具體銷售情況,周邊的競(jìng)爭(zhēng)對(duì)手等更準(zhǔn)確的數(shù)據(jù),GIS地圖和數(shù)據(jù)指標(biāo)都可以滿足需求。

最后要思考的是,如何在大屏上將地圖與其他元素進(jìn)行整合,確定最終的地圖展現(xiàn)形式。這個(gè)步驟是數(shù)據(jù)可視化大屏視覺的一個(gè)重要步驟,大屏中各個(gè)元素的協(xié)調(diào)統(tǒng)一,決定了最終的大屏展示效果。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

面對(duì)不同的業(yè)務(wù)場(chǎng)景,數(shù)據(jù)地圖可以怎么玩?

與普通的圖表相比,數(shù)據(jù)地圖的呈現(xiàn)效果更好,更美觀震撼。

數(shù)據(jù)地圖能夠做出2D、3D多種矢量、邊界、瓦片地圖,支持交互、漫游,如點(diǎn)擊下鉆到區(qū)縣;支持增加多層數(shù)據(jù),每一層數(shù)據(jù)可以設(shè)置不同的顯示效果,如基礎(chǔ)的飛線層、氣泡層、散點(diǎn)層、熱力層、柱狀層、風(fēng)場(chǎng)圖、提示框、標(biāo)牌、環(huán)境光層、直射光層等。

借助第三方數(shù)據(jù)可視化工具,如阿里云 DataV-數(shù)據(jù)可視化平臺(tái)、騰訊云圖數(shù)據(jù)可視化展示平臺(tái)、百度智能云數(shù)據(jù)可視化Sugar BI、袋鼠云EasyV數(shù)據(jù)可視化,可以通過快速選擇添加地圖組件、配置數(shù)據(jù)和顯示效果。

利用矢量圖、提示框、標(biāo)志、散點(diǎn)層等組件,形象地展示企業(yè)的國(guó)內(nèi)經(jīng)營(yíng)情況。通過直觀的可視化語(yǔ)言,集中展示大數(shù)據(jù)平臺(tái)的建設(shè)成果。通過專業(yè)的故事策劃,突出企業(yè)的經(jīng)營(yíng)狀況和未來發(fā)展,為媒體宣傳、企業(yè)接待等場(chǎng)景提供宣傳資料。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

構(gòu)建了以GIS地圖為核心,以數(shù)據(jù)指標(biāo)為輔助的數(shù)據(jù)大屏,通過交互下鉆的方式,可以對(duì)特定區(qū)域進(jìn)行監(jiān)控和實(shí)時(shí)監(jiān)控,對(duì)景區(qū)各種智能系統(tǒng)進(jìn)行監(jiān)控調(diào)度,并接入IOT設(shè)備,實(shí)現(xiàn)自動(dòng)觸發(fā)、主動(dòng)報(bào)警、聯(lián)動(dòng)指揮監(jiān)控、廣播、巡檢等工作,實(shí)現(xiàn)管理工作有記錄、可追溯。整個(gè)數(shù)據(jù)地圖集成了監(jiān)控、控制、維護(hù)和管理功能,實(shí)現(xiàn)了所有系統(tǒng)的聯(lián)動(dòng)指揮調(diào)度和大數(shù)據(jù)分析決策。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

03 數(shù)據(jù)地圖如何制作

1. 第三方地圖百度地圖的獲取和對(duì)接

數(shù)據(jù)地圖一般都是去對(duì)接三方平臺(tái),如百度地圖、高德地圖、騰訊地圖等。他們都會(huì)提供對(duì)應(yīng)的地圖開放服務(wù)。下面以百度地圖為例,介紹下地圖的獲取和調(diào)色方法以及最后跟開發(fā)交付的流程。

百度地圖整合智能定位、路線規(guī)劃、導(dǎo)航、路況、地圖影像服務(wù)、軌跡服務(wù)、人口遷徙服務(wù)、位置搜索服務(wù)、智能小程序等,百度地圖提供城市研究、商圈分析、人群熱力分布、人群洞察、目標(biāo)人群識(shí)別、地塊價(jià)值分析等多維服務(wù),賦能政府、規(guī)劃等多個(gè)行業(yè)。

1)首先登錄百度開放平臺(tái)(https://lbsyun.baidu.com/index.phptitle=%E9%A6%96%E9%A1%B5),點(diǎn)擊功能與服務(wù)-地圖。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

2)進(jìn)入地圖頁(yè)面之后,下拉找到個(gè)性化地圖,點(diǎn)擊按鈕查看詳情。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

3)進(jìn)入個(gè)性化地圖編輯平臺(tái),開始使用。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

4)個(gè)性化地圖里面有一些預(yù)置的地圖模版,大家可以點(diǎn)擊查看了解一下。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

5)回到主題點(diǎn)擊一個(gè)預(yù)設(shè)地圖就可以對(duì)地圖進(jìn)行自定義配置了,如圖:

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

6)圖中左側(cè)為地圖的可配置項(xiàng)目,點(diǎn)擊選擇可根據(jù)自己的需求對(duì)地圖進(jìn)行配置,包括顏色字體界線等等都可以配置。每個(gè)配置項(xiàng)下面都會(huì)有很多配置子項(xiàng),非常詳細(xì),這塊大家可以多點(diǎn)點(diǎn),根據(jù)自己需求來做調(diào)整。同樣高德地圖的地圖樣式獲取與上面百度地圖差不多,可以自行嘗試下。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

7)將配置好的文件點(diǎn)擊右上角的發(fā)布,會(huì)有彈窗,里面會(huì)有調(diào)用和使用地圖的方法。直接復(fù)制鏈接丟給開發(fā)就好了。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

2. 3D地圖的制作

除了上述第三方地圖制作,地圖還有其它方法制作,本次主要介紹地圖自主制作的方法??赏ㄟ^三維軟件制作如3dmax、C4D、Maya等等,本次選擇一個(gè)比較簡(jiǎn)單的方法用到的一款PS插件是:3D Map Generator。

3D Map Generator 是一個(gè)三維立體地圖自動(dòng)生成 Photoshop模板,也就是三維地圖生成ps插件。3D Map Generator插件可以快速制作3D地形圖,格式可儲(chǔ)存zxp,atn和psd等等。

3D Map Generator-Terrain ,官方全稱:3D Map Generator-Terrain From Heightmap, 適用于PS的3D高程地圖地形生成插件。

3D Map Generator 作為第一款適用于Photoshop的高度地形生成插件,你不需要是 PS 或者 GIS 的高手,就可以輕松的生成真實(shí)地點(diǎn)的三維地形,并且可以編輯生成的各種地形要素(比如:山、水等),形成你想要的風(fēng)格。它的主要功能就是,基于準(zhǔn)確的地理信息生成三維地形,而且地形要素可編輯。還提供各種紋理貼圖和筆刷,方便3D地圖的制作。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

3D Map Generator 示例:

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

簡(jiǎn)單來說,該插件可以將 google 地圖的照片效果和 heightmapper 高程地圖的高度灰度圖(高度灰度圖是用于存儲(chǔ)數(shù)值,例如高程數(shù)據(jù)的光柵圖像,可用于在計(jì)算機(jī)圖形中做3D顯示。高度圖包含一個(gè)通道,解釋為距離表面的“地坪”的位移或“高度”的距離,并且可表現(xiàn)為灰度圖像的亮度,黑色表示最小高度,白色表示最大高度)數(shù)據(jù),通過PS整合為一,形成類似3D可視化效果。

理論上來說,只要能有相應(yīng)的高度灰度圖(高程?hào)鸥駡D),就可以生成全球任一地方的3D地形。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

3D Map Generator 的使用方法案例:打開3D MapGenerator-Terrain,選擇Find Real Location。插件會(huì)自動(dòng)打開它自帶的heightmapper網(wǎng)站,這里就是插件中附帶的強(qiáng)大的實(shí)際的高程信息數(shù)據(jù)庫(kù),是地形生成準(zhǔn)確性的重要保障。

進(jìn)入Heightmapper之后,可以選擇連接Googlemaps 或者 OpenStreetMap。這次的教程中選擇Googlemaps作為講解,感興趣的小伙伴也可以試試使用OpenStreetMap,操作方法類似。

1)點(diǎn)擊Googlemaps,進(jìn)入界面,選擇所要制作地形的位置,我們以臺(tái)北市為例,并滑動(dòng)鼠標(biāo)找到想要分析的片區(qū)。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

2)在右上角任務(wù)欄里,去掉地圖線/map lines和地圖標(biāo)簽/map labels這兩個(gè)選項(xiàng),同樣選擇出口/export保存圖片。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

3)打開瀏覽器,選擇Googlemap或者百度地圖等地圖找到相同位置。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

4)將保存好的三張圖片導(dǎo)入ps,根據(jù)標(biāo)簽、地形等將衛(wèi)星圖和地形圖對(duì)齊,裁掉多余部分。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

5)點(diǎn)擊創(chuàng)建3d地形(可根據(jù)需要選擇適合角度),等待幾分鐘后便可得到一張地形圖。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

6)這時(shí)我們打開圖層top_layer_groups中top_layer_hd的第一個(gè)圖層雙擊進(jìn)行編輯。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

7)打開我們有三個(gè)地圖的第一個(gè)界面選擇Googlemap的圖層復(fù)制到top_layer_01.psd。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

8)Ctrl+s 保存后打開地形圖界面我們就可以看到地形已經(jīng)出現(xiàn)在了模型上。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

9)我們可以再?gòu)?fù)制圖層后加入描邊,添加各種小標(biāo)志,除了指北針、比例尺之外,還有云、樹木、船等,可以進(jìn)一步增強(qiáng)圖面信息。只需要短短幾分鐘,結(jié)合衛(wèi)星地圖和地形就可以做出不同風(fēng)格的地形分析圖。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

04 結(jié)語(yǔ)

以上與大家分享了數(shù)據(jù)可視化地圖的一些制作方法。

關(guān)于數(shù)據(jù)可視化地圖,一個(gè)出色的數(shù)據(jù)地圖,必然是GIS與BI的完美結(jié)合。整個(gè)數(shù)據(jù)地圖具有多層次的圖形顯示功能,并具有多方面的控制功能,配合一些個(gè)性化的交互功能,能夠更好的滿足業(yè)務(wù)使用、數(shù)據(jù)管理、開發(fā)運(yùn)營(yíng)等不同應(yīng)用場(chǎng)景的圖形查詢和輔助分析需求。

地圖具有重要的作用,每個(gè)人都可以從高質(zhì)量的地圖中方便地獲取信息。

GIS 用戶每天都會(huì)創(chuàng)建和使用地圖, 這些地圖為 GIS 應(yīng)用提供了基本體驗(yàn)和實(shí)用界面。地圖也是 GIS 用戶與組織內(nèi)部其他人員以及其他組織的用戶共享工作的主要方式。地圖提供了重要的上下文,因?yàn)樗鼈兗瓤梢赃M(jìn)行分析,又充滿藝術(shù)效果。地圖老少皆宜,提供世界范圍的信息和形狀。

所有人都可以使用 GIS 地圖。這些地圖使 GIS 進(jìn)入到了我們的生活,并可隨時(shí)隨地通過智能手機(jī)和平板電腦進(jìn)行查看。

05 地圖平臺(tái)推薦

用過百度、高德、騰訊地圖平臺(tái)的應(yīng)該都知道平臺(tái)內(nèi)地圖的參數(shù)調(diào)整都有一定局限性,只能通過他們提供的選項(xiàng)進(jìn)行調(diào)整,有的地不可配置就很難受。今天給大家整理了下國(guó)外的一些地圖平臺(tái),有的配置項(xiàng)會(huì)多一些相對(duì)可控,缺點(diǎn)就是國(guó)內(nèi)樓宇數(shù)據(jù)沒有國(guó)內(nèi)地圖的全,大家需要的自取。

1)Mapbox https://www.mapbox.com/maps

基于矢量渲染與webgl技術(shù),交互、可定制的前端框架。里面有好多的地圖樣式,可控性較高,缺點(diǎn)就是國(guó)內(nèi)街景視圖樓宇的數(shù)據(jù)較少。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

2)Snazzy Maps https://snazzymaps.com/

Snazzy Maps主要面向網(wǎng)頁(yè)設(shè)計(jì)師以及開發(fā)人員,網(wǎng)站上現(xiàn)有近130種不同地圖主題,每種主題下還有多種細(xì)分風(fēng)格可選,地圖樣式比較豐富,配置項(xiàng)也挺多。設(shè)計(jì)人員可以根據(jù)應(yīng)用或網(wǎng)站整體風(fēng)格自行挑選適配方案。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

3)Mapv https://mapv.baidu.com/

Mapv 是基于百度地圖的大數(shù)據(jù)可視化開源庫(kù),可以用來展示大量的點(diǎn)、線、面的數(shù)據(jù),每種數(shù)據(jù)也有不同的展示類型,如直接打點(diǎn)、熱力圖、網(wǎng)格、聚合等方式展示數(shù)據(jù)。

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

B端設(shè)計(jì)師必看,數(shù)據(jù)可視化地圖制作指南

 

本文由郝小七指導(dǎo)http://theventurebank.com/u/917803

本文由 @Color可樂 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 百度地圖開放平臺(tái)
    https://lbsyun.baidu.com/products/map

    來自北京 回復(fù)
  2. 感覺這個(gè)可視化地圖用在學(xué)習(xí)地理知識(shí)上也很有趣

    回復(fù)
  3. 與普通的圖表相比,數(shù)據(jù)地圖的呈現(xiàn)效果更好,更美觀震撼。

    來自廣西 回復(fù)