【前端搞地图】如何设计一张让用户过目不忘的地图-2

简介: 【前端搞地图】如何设计一张让用户过目不忘的地图-2

前言

🌏【前端搞地图】系列第二弹来啦,今天给大家带来一款地图设计神器,可以称作是地图界的ps。这款神器就是 Mapbox Studio。在之前的一篇文章中简单讲述了Mapbox的简单使用,需要学习的小伙伴可以自行查看: 【前端搞地图】如何设计一张让用户过目不忘的地图,这篇文章主要来介绍Mapbox Studio的用法。

效果image.pngMapbox Studio 是什么?

地图界的ps``地图界的ps``地图界的ps , 重要的事情说三篇,你如果不知道ps是什么,那我就没辙了,废话不多说,先来看看这个ps长什么样吧!!!

image.png好了,下面正式开始画图吧!!!

正式开始画图

画图之前先上一下ps链接: https://studio.mapbox.com/ 也可以进入Mapbox国际站导航上的Products > Studio直接进入; 因为Mapbox服务器部署在国外,所以访问起来会稍微有点慢,网络不好的童鞋可以自行寻找解决办法或者耐心等待 🤥

没有注册的童鞋记得自行注册登录哈,这里就不做过多介绍了 🐠

新建一个 styleimage.png可以从官方模版选择,或者从自己历史中选择一个,这里我选择了一个Basic > Galaxy的模板image.png进入之后就会出现地图了

和大部分的绘图软件一样,mapbox的绘图也有“图层”这一概念。先画出大地,然后画出海洋、河流、湖泊,接着画出森林......依次一层一层的叠加图层,最终变成一张地图。同样,也会有图层顺序的概念。放在最顶上的图层会将放在下面的图层遮住。image.png仔细查看左侧配置菜单,发现几乎所有的元素都是可以配置的,可以自定义颜色自定义图层等... 以下只演示部分功能,具体的功能可以自己打开ps摸索尝试,本菜鸡也是自己一步一步摸索出来的 🐶

添加图层

点击左侧菜单 Layers , 依次点击 + 添加一个图层,选择数据。这里可以选择官方的提供的数据也可以去上传自己的数据,上传数据点击 Upload data将会看到一个上传文件框,将 MBTilesKMLGPXGeoJSONShapefile(压缩)或 CSV文件拖放到此处以将其转换矢量切片。要创建栅格切片,请拖放 GeoTIFF 文件。image.png这里我就直接使用官方的数据了,加载道路数据,加载完数据,有些童鞋肯定会想,这也不是我想要的地图呀??? 🔥

别急,如此强大的ps工具,怎么会没有办法修改样式呢 🔥

颜色宽度透明度... 等多种样式都是可以调整的image.png以上只是演示了加载道路数据,官方还提供了 行政``航路``机场``建筑``土地``水系... 等数据,这个就不去一一演示了,使用方式基本类似

修改语言

从以上图片可以看出,目前地图大部分文字展示之类的都是英文,这是因为Mapbox本来就是国外的,所以默认语言使用英文也是很正常的。记得很久之前Mapbox Studio是不支持直接设置语言的,以前想要设置语言需要集成到项目中使用代码设置,这样对没有代码基础的童鞋或者是设计师使用起来可能不是太友好,既然号称地图界的ps,肯定不能仅仅来满足开发者使用啊。但是比较赞是,Mapbox Studio 新版本已经支持直接在编辑的时候设置语言了,这个要给 Mapbox 团队一个大大的赞👍👍👍image.png

关于设计

因为本人不是专业的设计师,设计配色部分内容参考自:https://zhuanlan.zhihu.com/p/69845741

配色

对于专业的设计师来说,配色肯定不是问题啦,想要什么感觉分分钟弄出来。但对于可能不是设计师的同学们来说,以下几个方法或许可以给你一点灵感。

  1. 如果你做的地图是需要日常使用的,那么从自然中选取颜色就是最好的方式啦,因为自然的颜色和人类对色彩的认知是一致的,这样你的地图就更容易被人理解。

比如:

  • 🏠居住地:棕色、粉色
  • 🛣️道路:浅黄色、浅棕色、白色
  • 🏖️水系:蓝色
  • 🌴植被:绿色
  1. 如果你需要在这几个大类上进行更精细的划分,可以尝试通过使用不同的深浅度

比如:

  • 🛣️道路:三级道路用浅黄色、二级道路用土黄色、一级道路用橙黄色
  • 🏖️水系:河流、湖泊用浅蓝色,海洋用深蓝色
  • 🌴植被:草地用浅绿,森林用深绿
  1. 同色系的地图

很多情况下,我们会针对特定的场景有特定的风格要求。

比如:

我们要绘制一张登山爱好者用的地图。那么需要用到的信息可能就只有山脉河流植被等高线马路旅馆(住宿点)信息。

于是我们可以尝试只保留这些最有用的信息,将其他不重要的信息全都删去。

选用一个绿色系的配色方案,通过调整绿色的深浅来区分内容。同色系的地图下,能够非常有效的利用另一种颜色突出目标信息,同时更有代入感。

比如使用深色系的地图,营造出夜晚的氛围,快速突出路况信息:此外,mapbox提供了一个有趣的配色工具 cartogram ,能够快速的从一张图片上生成配色方案。

制作 3D 建筑

mapbox 自身就提供了一些 3D 建筑数据,可以直接用。同时也支持自己上传数据。制作 3D 建筑的地图,只需要了解两个关键点就够了:

  • 🔥设置数据属性
  • 🔥通过 formula 设置建筑高度

增加绘制建筑图层,参考以上选择道路的的步骤一步一步增加选择数据,增加完数据,选择type数据展现形式,目前有以下几种:

  • Fill 平面填充
  • Fill extrusion 3D 填充 🔥
  • Line 线条
  • Circle 圆点
  • Symbol 文字或者 icon
  • Heatmap 热力图

这里选择 Fill extrusion,然后切换回 style,你会看到所有的建筑都变成黑色的了。style 中可以设置建筑的颜色透明度高度等...也可以自定义计算的方式去设置建筑物的高度,这个自行摸索啦💪💪💪image.png

相关文章
|
前端开发 搜索推荐 定位技术
GIS前端—地图标注
GIS前端—地图标注
277 1
|
存储 前端开发 定位技术
GIS前端编程 地图常用操作
GIS前端编程 地图常用操作
216 0
|
9月前
|
前端开发 定位技术 API
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
【4月更文挑战第30天】本文介绍了在Flutter中集成第三方服务,如支付和地图,以增强应用功能和用户体验。开发者可通过官方或社区插件集成服务,关注服务选择、API调用、错误处理和用户体验。支付集成涉及选择服务、获取API密钥、引入插件、调用API及处理结果。地图集成则需选择地图服务、获取API密钥、初始化地图并添加交互功能。集成时注意选择稳定插件、阅读文档、处理异常、优化性能和遵循安全规范。随着Flutter生态发展,更多第三方服务将可供选择。
131 0
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
|
9月前
|
前端开发 定位技术
前端知识笔记(十七)———地图多点标注功能
前端知识笔记(十七)———地图多点标注功能
166 1
|
前端开发 数据可视化 定位技术
GIS前端-地图标绘与动画
GIS前端-地图标绘与动画
181 0
|
前端开发 JavaScript 定位技术
GIS前端-地图事件编程
GIS前端-地图事件编程
98 0
|
开发框架 前端开发 JavaScript
GIS前端-地图操作与交互
GIS前端-地图操作与交互
230 0
|
4月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
316 14
|
4月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
84 0
|
4月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
102 6

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75