Mapbox教你出图:今天你的图炫酷了吗?

2020-2-6    前端达人


Xiao素材 |MapBox应用

本期精选 / MapBox应用教程,让你的底图超乎预料的炫酷

点击查看原图

e2dd47236b5d498897ffd34b915764f5.jpeg


今天给大家带来炫酷MapBox的具体应用

相信大家在绘制平面类分析图时

都遇到过地图获取的问题

在此之前

我们也提供给了其他的类型的方式来绘制分析底图

1. 其他方式

百度个性地图

通常地图形式如下

点击查看原图


喜欢用这种类型地图的小伙伴

网址接好咯

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

文末素材有百度个性地图代码

谷歌个性地图

老规矩放一波样式给大家看一看

点击查看原图



但是这些

都不是我们今天能的重点

2. MapBox效果

因为真要说到可操控性可调整性

非MapBox莫属

先来看看官方效果

点击查看原图

65aa1549b0b644d7aae99fee9d4889d7.jpeg

981462bfba7f4130bf2b40e27a87cff6.jpeg

点击查看原图f789b95081ed47f2bc018e26d85c3539.jpeg

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




是不是已经超级酷炫好看了

那看到这里你就以为完了吗

NO NO NO NO NO

再来看我们根据模板花几分钟改的底图

点击查看原图点击查看原图


点击查看原图


看到这的第一眼

是不是觉得这才是

自己想要的分析底图

误区

想想平常我们自己绘制的底图一般像这样

纯苦力类

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


96fe6d94ea294e0e8288008b86a06587 (1).jpeg


怎么样

是不是想立即Get一波呢

别急,来看视频学习一下

大致分为四个板块

3. 四大板块

第一个板块

基本步骤

首页—Get Started—选择合适的风格

(建议开启网页翻译哦)

点击查看原图点击查看原图


点击查看原图


第二个板块

怎样来操作

右键旋转视图

中间缩放视图

左键平移视图

右侧箭头菜单—还原视图—

Reset Pith&重设正北方向 Reset North


点击查看原图d979898158e84454ad11e19bdee498ba (1).jpeg



第三个板块

这一个板块相对复杂一些

同学可以看着视频配着幕布食用

左侧为参数调整栏

直接点击地图元素的相应位置

即可修改相应参数

36372fb4c78b4efba0f245bf9ce906db.jpeg


d454efb44d1b4bab9061463f1bd28bea.jpegded94da53b064c78a6f1c73890ead363.jpeg


第四个板块

添加图层和修改数据

Add Layer/Select Data里面内容含

数据资源—类型—绽放级别Zoom—过滤器

具体怎么操作一定要看视频哦

aeead05900694ec4b66e47098b06ffd3.jpeg



如果觉得观看视频还是不太清楚的小伙伴

不要慌张

作者还贴心的为大家准备了

MapBox的知识结构图


点击查看原图


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

转载自:搜狐

作者:

大地视觉设计软件



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服




分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档