修改背景地图样式_Mapbox Studio快速自定义地图

本文介绍了如何使用Mapbox Studio自定义地图样式。首先,通过Mapbox官网注册并选择Web Maps SDK开始。然后,在Mapbox Studio中新建风格,编辑背景颜色和添加图层,调整元素样式。接着,添加3D建筑图层并设置高度。最后,分享地图链接,通过开发者工具和模拟器进行角度选择和屏幕尺寸适配,实现地图截图。
摘要由CSDN通过智能技术生成

—注册&登录—

网址:https://www.mapbox.com/

5732e0e60e6646ee8ce0452948636d4f.png

① 点击 Start building

59629f817454dd1f05a4a73dea444052.png

② 在 Maps SDK 下选择 Web

fce627c8fc47863d15c6aebc2e986bc8.png

③ 点击 Next 到下一步

db626dd2a379fc6356a20cb8acb29177.png

④ 在底部找到 Mapbox Studio 点击 Get Started

b22db43f046e55b059855ca7c597ab93.png

⑤ 在底部找到 Mapbox Studio 点击 Get Started

cc29e87ff0094cdc0b7989e5822a1773.png

—地图绘制—

① 点击 New style 选择合适模板,或重新点击Blank重新创建风格。

a7f3a8b9486fb9433ef5a9b86bb3d9ff.png

② 点击 New style 选择合适模板,或重新点击Blank重新创建风格。完成后进入空白画板界面。

9c0eee44a53dc08b1d670b55bdf7829f.png

③ 单击 Background 可以对背景颜色进行编辑,这里设为333333。

cf83d728c150fc3ab51fdf2e39646c94.png

④ 单击 Add layer 可以添加自己需要的图层。

38b4c8e9dde0928ab93b76110d61f2ec.png

⑤ 添加完成后还则以对元素的颜色、透明度、宽度、线头样式、转角样式进行修改,还可以添加描边、偏移、移动等操作。

5a9710202ed10b4e5f1951ff7abbada1.png

⑥ 可多次添加所需元素,并修改。

68ff5bba0389fc3a3cdeeffecbc59dac.png

df9acb162abae1a92d8ed75d293d571b.png

⑦ 点击 publish 或 ctlr+s 即可保存样式。

7d3f4bcc0f318ebfab047ee91185ae3c.png

—三维建筑—

① 单击 Add layer 添加building图层,并在Type选项中,选择第二个。

5a1a99c830de9c53c930c90afb497e05.png

② 设置好建筑颜色和透明度。

9b5265e722e18f60d987c3b5ae1f5acf.png

③ 在 Helght 选项卡中选择 Ues a formula。

2dc2bd0a4f8f2b09bc210485a6b2fda4.png

④ 单击添加 Helght 数据。

595b1841616093a10b1d909e194ca76e.png

d5775357ce6945a8be2e00867562be35.png

—打印出图—

① 单击 Share 并复制 Share URL。

c52e48a7c365f7b0db999e2141eba9f5.png

② 打开复制的网页,并选好出图角度。

6fbb91f81293618989d85d1a4bfd5bf6.png

③ 点击F12调出开发者工具。

aaf83e66ba6fd3384089605be914fb22.png

④ Ctlr+Shift+M,打开模拟器。选择 Responsive,自定义截图的解析度。

20ab60d86441fc9083e399b5b609e23a.png

④ Ctrl + Shift + P 调出命令列,输入“cfss”,单击回车即可自动下载。

bcdc84cfbebf05caa9e7f894ad1b7695.png

d02d898201afa477d8bd87362aba2796.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值