Mapbox教你出圖:今天你的圖炫酷了嗎?

2020-2-6    前端達(dá)人


Xiao素材 |MapBox應(yīng)用

本期精選 / MapBox應(yīng)用教程,讓你的底圖超乎預(yù)料的炫酷

點(diǎn)擊查看原圖

e2dd47236b5d498897ffd34b915764f5.jpeg


今天給大家?guī)?lái)炫酷MapBox的具體應(yīng)用

相信大家在繪制平面類(lèi)分析圖時(shí)

都遇到過(guò)地圖獲取的問(wèn)題

在此之前

我們也提供給了其他的類(lèi)型的方式來(lái)繪制分析底圖

1. 其他方式

百度個(gè)性地圖

通常地圖形式如下

點(diǎn)擊查看原圖


喜歡用這種類(lèi)型地圖的小伙伴

網(wǎng)址接好咯

http://developer.baidu.com/map/custom/

文末素材有百度個(gè)性地圖代碼

谷歌個(gè)性地圖

老規(guī)矩放一波樣式給大家看一看

點(diǎn)擊查看原圖



但是這些

都不是我們今天能的重點(diǎn)

2. MapBox效果

因?yàn)檎嬉f(shuō)到可操控性可調(diào)整性

非MapBox莫屬

先來(lái)看看官方效果

點(diǎn)擊查看原圖

65aa1549b0b644d7aae99fee9d4889d7.jpeg

981462bfba7f4130bf2b40e27a87cff6.jpeg

點(diǎn)擊查看原圖f789b95081ed47f2bc018e26d85c3539.jpeg

e6474a09d55d49e18573d6dce54627d5.jpeg9534841a9a2848baadeba880b5f0c490 (1).jpegc5a73c2cfbb74721853f54a33c2874c4 (1).jpeg677ba2b536b74c218b6eddf8fbc897aa.jpeg5c3e52bc67754db5ad4a889c6eb73411.jpeg97c752d4aded4ff8a2d8da6bb95275f1.jpeg




是不是已經(jīng)超級(jí)酷炫好看了

那看到這里你就以為完了嗎

NO NO NO NO NO

再來(lái)看我們根據(jù)模板花幾分鐘改的底圖

點(diǎn)擊查看原圖點(diǎn)擊查看原圖


點(diǎn)擊查看原圖


看到這的第一眼

是不是覺(jué)得這才是

自己想要的分析底圖

誤區(qū)

想想平常我們自己繪制的底圖一般像這樣

純苦力類(lèi)

5cf701cc0dc24970b0c2a557ec14aa8e (1).jpeg0625c8b515d148d394940fd09acc4542 (1).jpeg


96fe6d94ea294e0e8288008b86a06587 (1).jpeg


怎么樣

是不是想立即Get一波呢

別急,來(lái)看視頻學(xué)習(xí)一下

大致分為四個(gè)板塊

3. 四大板塊

第一個(gè)板塊

基本步驟

首頁(yè)—Get Started—選擇合適的風(fēng)格

(建議開(kāi)啟網(wǎng)頁(yè)翻譯哦)

點(diǎn)擊查看原圖點(diǎn)擊查看原圖


點(diǎn)擊查看原圖


第二個(gè)板塊

怎樣來(lái)操作

右鍵旋轉(zhuǎn)視圖

中間縮放視圖

左鍵平移視圖

右側(cè)箭頭菜單—還原視圖—

Reset Pith&重設(shè)正北方向 Reset North


點(diǎn)擊查看原圖d979898158e84454ad11e19bdee498ba (1).jpeg



第三個(gè)板塊

這一個(gè)板塊相對(duì)復(fù)雜一些

同學(xué)可以看著視頻配著幕布食用

左側(cè)為參數(shù)調(diào)整欄

直接點(diǎn)擊地圖元素的相應(yīng)位置

即可修改相應(yīng)參數(shù)

36372fb4c78b4efba0f245bf9ce906db.jpeg


d454efb44d1b4bab9061463f1bd28bea.jpegded94da53b064c78a6f1c73890ead363.jpeg


第四個(gè)板塊

添加圖層和修改數(shù)據(jù)

Add Layer/Select Data里面內(nèi)容含

數(shù)據(jù)資源—類(lèi)型—綻放級(jí)別Zoom—過(guò)濾器

具體怎么操作一定要看視頻哦

aeead05900694ec4b66e47098b06ffd3.jpeg



如果覺(jué)得觀看視頻還是不太清楚的小伙伴

不要慌張

作者還貼心的為大家準(zhǔn)備了

MapBox的知識(shí)結(jié)構(gòu)圖


點(diǎn)擊查看原圖


今天就和大家分享到這里了

轉(zhuǎn)載自:搜狐

作者:

大地視覺(jué)設(shè)計(jì)軟件



藍(lán)藍(lán)設(shè)計(jì)m.820esy.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)




分享本文至:

日歷

鏈接

個(gè)人資料

存檔