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

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

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

在一些新聞報道中，也經常看到使用地圖來分析顯示各類數(shù)據(jù)信息，這樣使用地圖來反映和分析數(shù)據(jù)的形式就是GIS地圖實際應用。由于GIS地圖能夠最直觀地表達數(shù)據(jù)間的空間關系，所以它被廣泛應用于各種數(shù)據(jù)分析場景。

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

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

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

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

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

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

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

1. 功能強大

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

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

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

3. 效果震撼

對需要加載到數(shù)據(jù)地圖中進行顯示的，匯集出來的城市各個領域的要素數(shù)據(jù)，不應該是簡單的信息堆砌，而是要有良好的視覺、風格設計。高水準的視覺效果，可以為管理者提高決策的判斷力，提高工作效率。

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

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

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

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

面對不同的業(yè)務場景，數(shù)據(jù)地圖可以怎么玩？

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

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

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

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

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

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

1. 第三方地圖百度地圖的獲取和對接

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

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

1）首先登錄百度開放平臺（https://lbsyun.baidu.com/index.phptitle=%E9%A6%96%E9%A1%B5），點擊功能與服務-地圖。

2）進入地圖頁面之后，下拉找到個性化地圖，點擊按鈕查看詳情。

3）進入個性化地圖編輯平臺，開始使用。

4）個性化地圖里面有一些預置的地圖模版，大家可以點擊查看了解一下。

5）回到主題點擊一個預設地圖就可以對地圖進行自定義配置了，如圖：

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

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

2. 3D地圖的制作

除了上述第三方地圖制作，地圖還有其它方法制作，本次主要介紹地圖自主制作的方法。可通過三維軟件制作如3dmax、C4D、Maya等等，本次選擇一個比較簡單的方法用到的一款PS插件是：3D Map Generator。

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

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

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

3D Map Generator 示例：

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

理論上來說，只要能有相應的高度灰度圖（高程柵格圖），就可以生成全球任一地方的3D地形。

3D Map Generator 的使用方法案例： 打開3D MapGenerator-Terrain，選擇Find Real Location。插件會自動打開它自帶的heightmapper網站，這里就是插件中附帶的強大的實際的高程信息數(shù)據(jù)庫，是地形生成準確性的重要保障。

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

1）點擊Googlemaps，進入界面，選擇所要制作地形的位置，我們以臺北市為例，并滑動鼠標找到想要分析的片區(qū)。

2）在右上角任務欄里，去掉地圖線/map lines和地圖標簽/map labels這兩個選項，同樣選擇出口/export保存圖片。

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

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

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

6）這時我們打開圖層top_layer_groups中top_layer_hd的第一個圖層雙擊進行編輯。

7）打開我們有三個地圖的第一個界面選擇Googlemap的圖層復制到top_layer_01.psd。

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

9）我們可以再復制圖層后加入描邊，添加各種小標志，除了指北針、比例尺之外，還有云、樹木、船等，可以進一步增強圖面信息。只需要短短幾分鐘，結合衛(wèi)星地圖和地形就可以做出不同風格的地形分析圖。

04 結語

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

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

地圖具有重要的作用，每個人都可以從高質量的地圖中方便地獲取信息。

GIS 用戶每天都會創(chuàng)建和使用地圖， 這些地圖為 GIS 應用提供了基本體驗和實用界面。地圖也是 GIS 用戶與組織內部其他人員以及其他組織的用戶共享工作的主要方式。地圖提供了重要的上下文，因為它們既可以進行分析，又充滿藝術效果。地圖老少皆宜，提供世界范圍的信息和形狀。

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

05 地圖平臺推薦

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

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

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

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

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

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

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

?

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

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