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

地理信息系統(tǒng)（英語(yǔ)：Geographic Information System，縮寫(xiě)：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)常看到使用地圖來(lái)分析顯示各類數(shù)據(jù)信息，這樣使用地圖來(lái)反映和分析數(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地圖作為大屏的主視圖來(lái)呈現(xiàn)的。

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

可視化大屏多用于外部展示或給領(lǐng)導(dǎo)匯報(bào)情況。在大屏的中央放置地圖，講解者在介紹整體數(shù)據(jù)情況時(shí)可以從這里說(shuō)明。整個(gè)交流過(guò)程有獲得重要決策信息的感覺(jué)，而且不論是政務(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)系起來(lái)，數(shù)據(jù)地圖應(yīng)運(yùn)而生，在準(zhǔn)確傳達(dá)數(shù)據(jù)的基礎(chǔ)上使界面更加直觀，更具有觀賞性。

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è)要求：

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ù)的精確度要求也越來(lái)越高。數(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)行顯示的，匯集出來(lái)的城市各個(gè)領(lǐng)域的要素?cái)?shù)據(jù)，不應(yīng)該是簡(jiǎn)單的信息堆砌，而是要有良好的視覺(jué)、風(fēng)格設(shè)計(jì)。高水準(zhǔn)的視覺(jué)效果，可以為管理者提高決策的判斷力，提高工作效率。

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

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

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

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

面對(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ù)可視化，可以通過(guò)快速選擇添加地圖組件、配置數(shù)據(jù)和顯示效果。

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

構(gòu)建了以GIS地圖為核心，以數(shù)據(jù)指標(biāo)為輔助的數(shù)據(jù)大屏，通過(guò)交互下鉆的方式，可以對(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ù)分析決策。

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

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

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

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

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

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

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

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

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

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

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

2. 3D地圖的制作

除了上述第三方地圖制作，地圖還有其它方法制作，本次主要介紹地圖自主制作的方法。可通過(guò)三維軟件制作如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地圖的制作。

3D Map Generator 示例：

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

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

3D Map Generator 的使用方法案例： 打開(kāi)3D MapGenerator-Terrain，選擇Find Real Location。插件會(huì)自動(dòng)打開(kāi)它自帶的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ū)。

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

3）打開(kāi)瀏覽器，選擇Googlemap或者百度地圖等地圖找到相同位置。

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

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

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

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

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

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

04 結(jié)語(yǔ)

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

關(guān)于數(shù)據(jù)可視化地圖，一個(gè)出色的數(shù)據(jù)地圖，必然是GIS與BI的完美結(jié)合。整個(gè)數(shù)據(jù)地圖具有多層次的圖形顯示功能，并具有多方面的控制功能，配合一些個(gè)性化的交互功能，能夠更好的滿足業(yè)務(wù)使用、數(shù)據(jù)管理、開(kāi)發(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í)隨地通過(guò)智能手機(jī)和平板電腦進(jìn)行查看。

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

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

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

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

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

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

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

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

?

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

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議