螞蟻金服 開源 地理空間數(shù)據(jù)可視化引擎 L7??https://github.com/antvis/L7
原文鏈接?譯者一直從事地理可視化的相關(guān)工作，無論在業(yè)務(wù)或者研發(fā)都會涉及到地理地圖相關(guān)設(shè)計玄妈。地圖設(shè)計有一定專業(yè)門檻彼念，而且面向設(shè)計師堵泽，數(shù)據(jù)湿镀，工具邻储，技術(shù)體系都比較欠缺，對設(shè)計師也是很大挑戰(zhàn)栽渴。看到 Andrea Lau這篇分享稳懒，無論在設(shè)計體系和技術(shù)系上非常完善實用闲擦。這篇文章從事無論是技術(shù)和設(shè)計的同學(xué)的工作，都可以細細品讀场梆，收獲很多技巧墅冷，方法，工具上的收獲或油。
本文圖文并茂寞忿，而且章節(jié)比較，原文可以點擊閱讀原文
地圖是無處不在的顶岸，它們是熟悉的腔彰、真實的、有用的辖佣。但是地圖需需要設(shè)計: 不是一個不從事網(wǎng)絡(luò)地圖專業(yè)制圖員設(shè)計的霹抛，而是由一個視覺設(shè)計師設(shè)計的。一個設(shè)計師想創(chuàng)造精美的地圖體驗卷谈，但是在處理地理空間數(shù)據(jù)處理方法和有哪些可能技術(shù)了解是有限的杯拐。如何不擺脫依靠臨摹靜態(tài)地圖圖片獲取矢量地圖邊界？
令人驚嘆的地圖設(shè)計框架
我們從事數(shù)據(jù)可視化工作差不多8年的時間世蔗，制作了60 多種地圖可視化端逼。我最近把所有這些知識組織在一起，上周 (4月12日) 在 Web Directions Design 2019 上做了一次演講污淋。目的是讓設(shè)計師們有批判和創(chuàng)造地圖的知識基礎(chǔ)顶滩，能夠?qū)⑵胀ǖ貓D變成令人驚艷的地圖。
偉大的地圖對使用它的人來說是有用的寸爆，直觀的诲祸，漂亮的，也是設(shè)計師的獨特反映而昨。
下面主要介紹一個非常優(yōu)秀的地圖設(shè)計框架和兩個設(shè)計框架應(yīng)用示例救氯，還包括了原始的PPT, 附加的注釋和相關(guān)知識鏈接。
地圖框架的四個部分
Context 地圖底圖
地圖底圖告訴用戶在哪里歌憨，看到的什么着憨。
這可以用一個三維地球地球來描述 -- 我們可以看到世界，看到陸地务嫡、邊界甲抖、公園漆改、水和街道，還可以不斷放大看到門牌號信息准谚。
用戶熟悉的物理環(huán)境挫剑，幫助用戶更好的確定位置
地圖興趣點（POI) 如公園、建筑物和街道等 提供方位感柱衔。
邊界為地圖內(nèi)容提供準確的范圍
標注樊破，使不熟悉這個區(qū)域的人對他們正在尋找的位置有清晰的認識
這些細節(jié)中的大部分都可以添加到 basemap 中∷纛恚基礎(chǔ)底圖位于地圖最底層哲戚。
4 種基礎(chǔ)底圖的設(shè)計方式
沒有 basemap。這可能是因為用戶不需要任何上下文艾岂，或者你沒有足夠的空間顺少。
簡單的形狀或邊界。
衛(wèi)星影像地圖
抽象簡化地圖
衛(wèi)星影像地圖
衛(wèi)星地圖有許多來源王浴，這些來源可能來自不同的衛(wèi)星或者不同的航空攝影脆炎，這些影像通過校正，拼接氓辣，除云等操作融合成一幅地圖秒裕。
日常地圖的設(shè)計中，衛(wèi)星視圖在某些情況下是有幫助的筛婉，比如知道潛在的家是什么樣子簇爆，或者在繪制公園地圖時展示物理環(huán)境癞松。
但大多數(shù)情況下不選擇衛(wèi)星視圖作為底圖因為：
他們的精度是有限的爽撒，不可以無限放大
它們具有太多的細節(jié)和變化，使得一致的設(shè)計難以實現(xiàn)
由于圖像是固定的不可變响蓉，因此無法對其進行固有設(shè)計
從技術(shù)上講硕勿，它們的加載時間也比大多數(shù)抽象的地圖加載時間要長
在可視化森林大火蔓延項目上我采用了衛(wèi)星影像以及利用 NASA black marble 衛(wèi)星影像制作的NSW地圖的夜光地圖視頻，
這就是為什么我們更經(jīng)撤慵祝看到街道地圖的原因源武。
簡化街道地圖
顏色往往遵循幾個不同的色板
常見的灰色、藍色想幻、綠色粱栖、黃色
暗灰度
輕灰度或 降低飽和
完全自定義
當(dāng)人們需要方向或位置信息時，一個通用的街道地圖是很有用的脏毯。淺色和深色底圖很常見闹究，因為它們有助于強調(diào)頂部覆蓋的數(shù)據(jù)。并且自定義的地圖也可以用來視覺表達食店。
下面是一個最常見的街道地圖的例子: 谷歌默認地圖渣淤，它在左邊赏寇，而在右邊?realestate.com.au房產(chǎn)銷售出租的地圖（原文中可以左右拖動）
google地圖房地產(chǎn)地圖
你可以看到房地產(chǎn)地圖已經(jīng)移除了一些興趣點 如企業(yè)和餐館，只留下了教育价认。地圖標記略有不同嗅定，但仍然是 Google Maps 提供的底圖的一部分。
google默認
這是另外一個房產(chǎn)地圖的domain.com.au版本用踩。
調(diào)整了顏色渠退，去消除道路的輪廓，刪除了一些標注捶箱。這樣可以制作更清晰的地圖智什，讓用戶可以專注于他們的興趣點，他們正在關(guān)注的信息丁屎。
在這兩種情況下荠锭，即使谷歌地圖提供了用戶比較熟悉的地圖界面，也沒有太多考慮如何設(shè)計地圖晨川，以最好地幫助潛在的房產(chǎn)買家獲得更多的信息证九。
底圖設(shè)計工具
Domain的地圖設(shè)計是通過特定Google 地圖樣式編輯器，創(chuàng)建地圖樣式共虑。這是一項免費服務(wù)愧怜，無需登錄即可使用。類似的服務(wù)是https：// snazzymaps.com/妈拌。
google maps
Google Map 地圖編輯器提供幾套通用的地圖模板拥坛。然后通過配置面板設(shè)置地圖顯示信息，調(diào)整顏色尘分，去除一些噪音猜惋，可以根據(jù)需求突出顯示不同類型的基礎(chǔ)地圖信息，包括交通培愁，道路著摔，公園，地點和商家定续。你甚至可以選擇刪除除公園外的所有內(nèi)容谍咆。
地圖編輯完成后，你可以保存JSON使用也可以發(fā)送給給其他團隊成員私股。
google map 地圖編輯器已經(jīng)很強大了摹察，但是有很多東西仍然無法定制。為此你需要更高級的工具倡鲸，如Mapbox供嚎。你也可以選擇其它創(chuàng)建自定義底圖的工具如Carto和企業(yè)軟件ArcGIS，但我們最常使用Mapbox。
Mapbox studio
在Mapbox Studio中查坪，你可以完全控制：
文字排版
顏色配置
不同縮放級別控制顯示細節(jié)
在排版方面寸宏，你可以上傳你想要使用的任何字體，Mapbox提供多語言支持偿曙。數(shù)字地圖設(shè)計一般采用無襯線字體氮凝，減小文本標注的間距，除非你要設(shè)計非常特殊的地圖望忆。mapbox設(shè)計地圖罩阵，一切皆有可能。
除非你設(shè)計一些非常特別東西启摄，否則數(shù)字地圖的排版通常是無襯線稿壁，縮小文本標注的間距，文字要大寫特別是道路以避免下降歉备。但實際上傅是，一切皆有可能。
設(shè)計地圖標注的關(guān)鍵點在于設(shè)計地圖的視覺層次結(jié)構(gòu)蕾羊，和你設(shè)計Web網(wǎng)站標題和段落的方式一樣喧笔。
你還可以上傳自定義圖標。
然而龟再，Mapbox非常繁瑣书闸，如果你想知道你正在改變的配置的效果你需要反復(fù)試驗。但是一旦你掌握了利凑，Mapbox功能非常強大浆劲，你可以完全主導(dǎo)地圖設(shè)計。
如果你對在衛(wèi)星視圖中發(fā)現(xiàn)的內(nèi)容感到滿意哀澈，并在Google中進行了調(diào)整牌借，或者在Mapbox中完成設(shè)計，就可以通過截圖并將其集成到你的設(shè)計中日丹。
SketchApp 有個地圖設(shè)計插件走哺，你可以導(dǎo)入谷歌地圖樣式或Mapbox地圖服務(wù)地址蚯嫌，然后可以插入正確尺寸的地圖到的你的Sketch文件哲虾。但是我們發(fā)現(xiàn)截圖是最直接，最靈活的方法择示。如何使用 mapbox和 sketch設(shè)計地圖你可以看這篇博客 Map UI設(shè)計工作流程 - Mapbox to Sketch
標注數(shù)據(jù)來源
最后束凑，地圖數(shù)據(jù)源來源非常重要的，通常標注在地圖的底部栅盲。
這是因為衛(wèi)星視圖中使用的圖像和數(shù)據(jù)汪诉，Google和Mapbox都來自某個地方，因此必須標注來源。
2. Data 數(shù)據(jù)
如果地圖底圖展示人們在哪里扒寄，看到的什么鱼鼓，數(shù)據(jù)就會告訴地圖我們相關(guān)的原因泡躯。
有三種類型的空間數(shù)據(jù)
點 零散的經(jīng)緯度點集合
線 相連接的點序列
面 閉合的點序列
Points
在設(shè)計點或標記時援制，有幾件事需要考慮: 準確性和映射。
Accuray 準確性
在設(shè)計標記時胚委，需要考慮考慮準確性课竣。標記可用于顯示精確位置（例如嘉赎，精確定位到地址或建筑物）或普通的地點。
如果標記不是確切的街道地址或位置于樟，那么將標記指向特定位置會有誤導(dǎo)性公条。因此可以設(shè)計一般標記，通常以位置為中心迂曲。一般標記也可以是圖標靶橱，形狀，甚至是小圖表路捧。
如果你的信息準確無誤抓韩，例如完整的街道地址，那么你可以選擇常見地圖標記形狀鬓长，十字形或任何其他具有明顯形狀的點谒拴。
你可以選擇使用較大的精確標注表示更重要的信息，使用較小一般標注來表達不那么重要的信息涉波。
Encodeing 映射
標注的選擇與需要的映射的數(shù)據(jù)密切相關(guān)英上，制圖師雅克·貝爾廷（Jacques Bertin）在1967年著名的《圖形符號學(xué)》（Semiology of Graphics）一書中將這些映射稱為視覺變量，即使在今天也是如此啤覆。
最常見的是顏色苍日，形狀和圖像，這些都是作者解釋的窗声。
顏色通常通過不同的色調(diào)表示不同的類別相恃，或者不同的飽和度表示不同的數(shù)值大小。
如果形狀有具體含義笨觅，形狀和圖標可能很有用拦耐。Google地圖標注僅為20 x 32像素。在這個尺寸见剩，很難看到詳細的形狀和圖標杀糯。特別是圖標通常放在其他形狀內(nèi)，如圓圈苍苞，以保持一致固翰，但減少了它們的大小。
紋理包括處理圖標的重復(fù)元素，并且可以用于關(guān)聯(lián)不同的事物骂际。
使用長度疗琉，面積或體積 - 制作3D - 表示數(shù)據(jù)大小的差異
角度 不同的角度可能看起來像是主要方向的特定設(shè)計，但也可以應(yīng)用于選舉結(jié)果的擺動等事情歉铝，請參閱NYTimes示例nytimes.com/interactive
在所有情況下没炒，一個好的標注的關(guān)鍵是它應(yīng)該和你的底圖較強的差異，為用戶提供好的視覺對比犯戏，以直觀地看到它們的數(shù)據(jù)送火。
Lines
關(guān)于線可視化這里簡要說明，我們似乎沒有那么多線數(shù)據(jù)的設(shè)計先匪。這可能是因為線條的表達方式比較固定一些种吸，例如：道路，火車線和方向（如左圖所示）呀非。
但是坚俗，我們做了很多是以抽象的方式連接點（在右邊：https：//smallmultiples.com.au/projects/a-tale-of-two-cities/）。在這里關(guān)鍵是使用弧線不是直線岸裙，不是半圓而不是縮放的圓形猖败，以獲得平滑美觀的線條。這將有助留出空間給標注提供足夠的空間降允，有助于減少交叉恩闻。并區(qū)分各個線條。
Areas
不同區(qū)域根據(jù)數(shù)據(jù)映射的地圖稱為分級統(tǒng)計圖剧董。例如：
在澳大利亞各地的選民地圖中幢尚，按黨派著色
在郊區(qū)的地圖中，按每個抵押貸款壓力的百分比著色翅楼。
但是你怎么能首先得到這些區(qū)域呢尉剩？一種方法是臨摹圖像，這有時仍然是獲取地理空間數(shù)據(jù)的常用方法毅臊。
另一種方法是向客戶詢問地理空間文件理茎。數(shù)據(jù)格式可能是Shapefile，Mapinfo或GeoJSON等空間數(shù)據(jù)文件管嬉。
例如皂林，你可以從ABS?abs.gov.au/geography下載郊區(qū)和州等標準多邊形，還有其他易于搜索的來源宠蚂。然后：
使用 mapshaper?https://mapshaper.org的Web服務(wù)將文件導(dǎo)入并查看生成的形狀
你可以縮放并下載為SVG式撼，以便在Illustrator中使用童社。
你還可以簡化這些文件求厕。這是因為形狀對于你正在設(shè)計的縮放級別而言過于復(fù)雜，因此你也可以在mapshaper中簡化它們。
操作地理空間文件的更高級選擇是使用QGIS?qgis.org/en/site/呀癣，它非常強大美浦，但用于高級用途
QGIS實際上非常制作數(shù)據(jù)映射，但是一旦你將它從maphaper中取出并插入到 illustrator or sketch 中项栏，你就不得不手動完成浦辨。
Polygon 顏色映射
面數(shù)據(jù)視覺映射的方法很多，最常見最直接的還是顏色
顏色
色調(diào)（定量）
飽和度
數(shù)值（定性）（也是透明度）
其他填充可能是
紋理/圖案沼沈。
顏色漸變非常重要流酬。如果它只是一個連續(xù)的梯度，我們怎么能清楚地看到風(fēng)暴的最壞部分呢列另？另一方面芽腾，使用的顏色數(shù)量非常大。
而對于色盲的人來說页衙，漸變毫無意義摊滔。
了解你的數(shù)據(jù)類型是非常重要的
類別：像選舉數(shù)據(jù)中的政黨類型
連續(xù)：像抵押貸款壓力一樣，你想把重點放在那些非常低或非常高的人身上
離散：像收入一樣店乐，你可能希望在同一張地圖上查看富人和窮人艰躺。
Color Brewer http://colorbrewer2.org是一個很好的工具，用于探索分級統(tǒng)計圖的調(diào)色板眨八。它還可以幫助你了解不同類型的數(shù)據(jù)腺兴，而且設(shè)計可用的。
Legend
現(xiàn)在你已將所有數(shù)據(jù)都放在地圖上廉侧，你的用戶如何理解它含长？圖例。
最好的方法是擁有一個非常清晰的地圖伏穆，不需要太多額外的信息拘泞，但通常任何地圖仍然需要一些密鑰來解讀。
你的常規(guī)的設(shè)計知識這里能得到應(yīng)用枕扫。我的唯一提示是陪腌，如果你的數(shù)據(jù)映射是好的，它會堅持烟瞧，所以用戶不必繼續(xù)參照圖例诗鸭。
3. control 地圖控件
控件是人們改變他們正在觀看的地圖內(nèi)容方式。
常用的控件有:
放大和縮小
Pan (通常在拖動地圖時是固有的)
按位置/地理位置搜索
重置為默認狀態(tài)
更改 底圖
全屏
打開和關(guān)閉圖層
在設(shè)計控件時遵循以下規(guī)則：
將它們放在地圖的邊界內(nèi)以顯示它們控制的內(nèi)容
將控件放在邊緣以確保焦點保持在地圖上
使用熟悉的圖標來節(jié)省空間参滴，但如果功能不太明顯强岸，也可以使用標簽。
當(dāng)然砾赔，有些功能不需要與控件直接交互蝌箍，例如：可以通過滾輪青灼，捏在觸摸屏上或+和 - 鍵來實現(xiàn)縮放。話雖這么說妓盲，縮放的存在至少提示人們可以使用縮放杂拨，無論他們使用何種交互方法。
4. interaction 交互
交互是人們可以在地圖中找到更多細節(jié)和信息的方式悯衬。
地圖上的交互和與常規(guī)UI設(shè)計非常相似弹沽。它擁有相同的機遇和挑戰(zhàn)，例如：
通過設(shè)計良好的選擇狀態(tài)來明確選擇或過濾的內(nèi)容筋粗。
具有明確定義的層次結(jié)構(gòu)策橘，優(yōu)先處理信息并以對使用地圖的人顯而易見的方式進行設(shè)計。
如何使用過渡和動畫來支持層次結(jié)構(gòu)和選擇娜亿。
請記住役纹，無論地圖的彈出框有多小，都應(yīng)將它們視為常規(guī)內(nèi)容暇唾，具有層次結(jié)構(gòu)和結(jié)構(gòu)促脉，以使信息清晰，動作明顯策州。
兩個示例 靜態(tài)地圖和交互地圖
重新設(shè)計簡單的靜態(tài)地圖：墨爾本藝術(shù)中心
會議演講在墨爾本藝術(shù)中心舉行瘸味，因此使用涉及地圖的網(wǎng)頁上的示例似乎很合適。
以下是訪問頁面底部的示例够挂。
這個靜態(tài)地圖的目的很簡單：幫助人們找到藝術(shù)中心旁仿，以便他們指定到訪計劃
讓我們分解現(xiàn)有的地圖：
底圖 通用Google地圖顯示默認顏色和默認興趣點。
數(shù)據(jù) 一點孽糖，表示為通用紅色標記枯冈。
控件 沒有。
交互 點擊可將人們帶到maps.google.com办悟，并預(yù)先填寫藝術(shù)中心作為目的地尘奏。
現(xiàn)在讓我們考慮一下如何改進它：
底圖。為什么人們在訪問我們的頁面中尋找地圖病蛉？想弄清楚怎么去藝術(shù)中心炫加。因此，地圖專注于交通铺然，刪除所有其他興趣點俗孝。此外：
亞拉河需要突出（并且仍然是熟悉的藍色）
CBD和一些道路需要被標記以定位用戶
地圖大部分已縮減為灰度，專注于交通魄健，水和數(shù)據(jù)赋铝。
數(shù)據(jù)革骨。我們試圖將藝術(shù)中心標識包含在標記中绿满，但對于小區(qū)域來說它有點過于復(fù)雜。最終的重新設(shè)計使用品牌粉紅色和標記上的一點定制，創(chuàng)建更銳利的邊緣以讓人聯(lián)想到三角形圖案的邊緣。
控件原环。添加了放大和縮小按鈕以暗示交互能力滔驾。
交互。沒有改變，但通過顯示控件使其更加明顯。
這個重新設(shè)計當(dāng)然有一些限制：
我們已經(jīng)對地圖的目的做了一些推斷
實施后布疙，出于技術(shù)原因趴荸，我們可能需要將標記移動到地圖的中心
我們保持與原始尺寸相同的尺寸波闹，但最有可能擴展到包含更多背景。
技術(shù)說明
我們只是使用https://mapstyle.withgoogle.com來設(shè)置底圖樣式并關(guān)閉一些地圖要素瘫证。snazzymaps.com/提供類似于谷歌工具之前的服務(wù)重窟。
交互地圖設(shè)計：查找服務(wù)中心位置
第二個示例是https://service.nsw.gov.au/service-centre上的交互式地圖。
這張地圖的目的是讓人們找到離他們最近的新南威爾士州服務(wù)中心（“申請許可證，獲得許可證，登記出生，支付大部分罰款等等”）。
使用地圖框架分解地圖：
背景 通用Google地圖顯示默認顏色和默認興趣點缸沃。
數(shù)據(jù) 很多點（約200）。
控件 縮放东羹，全屏視圖美尸，街景視圖，街道和衛(wèi)星底圖之間切換斟薇。
交互 人們可以：
按位置搜索（鍵入或使用地理位置）
點擊一個點了解更多詳情师坎。
在改進方面：
背景 我們使底圖中的顏色不那么突出，以便專注于標記堪滨。否則胯陋，我們會留下提供的詳細信息，因為這對于熟悉查找位置非常重要袱箱。
數(shù)據(jù) 由于所有重疊遏乔，標記的質(zhì)量沒有幫助。為了解決這個問題发笔，我們使用了聚類盟萨，其中標記的大小反映了被分組的標記的數(shù)量，有助于顯示分布了讨。聚類的另一個作用是它為人們提供了放大區(qū)域的快捷方式捻激。
控件 除了添加“返回新南威爾士州”重置按鈕外，沒有任何改變前计。
交互 我們刪除了列表和地圖之間的重復(fù)信息胞谭，以降低復(fù)雜性。
此外男杈，還進行了一些一般性設(shè)計改進：
將地圖移動到左側(cè)丈屹，更靠近位置搜索
減少了位置搜索的大小
按字母順序排序列表
為與地圖進行任何交互后的列表添加了選定/懸停狀態(tài)
我們包括豪勛爵島（Lord Howe Island），為方便起見势就，這些島嶼經(jīng)常被新南威爾
技術(shù)說明
為了設(shè)置底圖的樣式泉瞻，我們使用了https://mapstyle.withgoogle.com
為了獲得標記數(shù)據(jù)脉漏，我們在Chrome中使用了React Developer Tools（但客戶通常會在Shapefile，GeoJSON或CSV中提供地理空間數(shù)據(jù)）
為了聚類標記袖牙，我們基于leaflet.github.io/Leafl構(gòu)建了一個原型侧巨。
總結(jié)
我鼓勵你應(yīng)用真正令人驚嘆的地圖設(shè)計框架來設(shè)計你的下一張地圖，希望我們可以重新設(shè)計一個通用地圖來給所有用戶提供很棒的地圖體驗鞭达。
有了一張精彩的地圖司忱，你可以去任何地方。
參考文章和地圖工具
context 底圖
尋找標準的澳大利亞地區(qū)畴蹭，如州坦仍，郊區(qū)，地方政府區(qū)（LGAs）/理事會或選民邊界叨襟？abs.gov.au/geography
Google地圖風(fēng)格和https://mapstyle.withgoogle.com Snazzy Maps ?snazzymaps.com ?為Google地圖設(shè)計風(fēng)格繁扎。mapbox.com/mapbox-studi
carto.com/platform/vect
衛(wèi)星圖像和底圖
nationalmap.gov.au/
naturalearthdata.com/
mapbox.com/maps/satelli
nearmap.com.au/
傳單底圖提供程序列表
bing.com/maps
data 數(shù)據(jù)
Mapshaper?mapshaper.org/用于查看，放大糊闽，簡化和下載地理空間文件到SVG梳玫。
Color Brewer?colorbrewer2.org/幫助你選擇和理解不同類型數(shù)據(jù)的不同調(diào)色板以及可訪問性。
control 地圖控件
The Noun Project (find a good library?)
Font Awesome 圖標
進一步閱讀
“Tufte制作地圖有多大用處右犹？”?makingmaps.net/2007/08/2007年8月16日提澎，John Krygier
“更多地圖設(shè)計原則”?makingmaps.net/2008/02/?2008年2月5日，John Krygier
“Stamen的地圖清單”?hi.stamen.com/stamens-c?2014年5月22日念链，Stamen Design
這更具技術(shù)性：“使用CARTO創(chuàng)建地圖的最佳實踐檢查表”?carto.com/docs/tips-and最后修改時間為2018年12月11日盼忌，Carto和https://carto.com/academy/courses/design-for-beginners/
地圖設(shè)計最佳實踐：簡介proceedings.esri.com/liBillie Eff等2016年2月
“原型制作更流暢的地圖”?medium.com/google-desig?2018年8月，Antin Harasymiv
“政治泡沫和隱藏的多樣性：來自2016年大選的詳細地圖的亮點”?nytimes.com/interactive2018年7月25日掂墓，結(jié)果
“制作地圖”?icsm.gov.au/education/f
這是我們在Small Multiples架子上的數(shù)據(jù)可視化書籍列表谦纱，包括我們與映射相關(guān)的書籍。
