教程 | 玩转 Mapbox 和 Framer X ，快速打造移动端 3D 地图原型
商务合作请联系：apac-bd@mapbox.com
微信号：Mapbox_max
如果你是做移动端开发的，或者是 UI/UX 设计师，可能需要借助一些工具来打造酷炫的体验，比如原型设计利器 Framer X。
我们在之前的文章中介绍过，Framer X 是一款功能全面使用灵活的原型设计工具，对前端工程师和交互设计师都很友好。Framer X 的一大优势就在于它强大的组件库，不仅有官方提供的基础流行 UI 组件，更有各大知名公司将他们的官方组件库接入进来，如 Youtube, Twitter, Dropbox, Facebook 等。Mapbox 也正式接入了他们的地图组件，让你的 App 可以自由调动世界地图。
下面咱们就一起来几个 Mapbox US Team 地图设计团队推荐的例子，了解下如何用 Mapbox 玩转这款优秀的原型设计工具吧。
🚀
从 Mapbox Framer Component 开始
我们先来一起看看 Mapbox Framer Component ，这是一款只需要拖拖拽拽就可以帮助你打造基于真实地理位置原型的开发包，基于 React 技术，只需要把 Mapbox 账户中的 accessToken 直接输入 Framer X 中就可以了。
目前已经超过 12,000 次下载量了。
主要有下面三种功能：
添加 Mapbox 地图：使用 Main Mapbox Component 与 Mapbox Studio 无缝连接，可以使用任何自定义样式，还支持加入搜索框。视频教程
在地图上添加动画：使用 Sequential Location Map Component 可以将地图定位到世界各地，并放大和缩小，或者根据您的视觉需要转动和倾斜地图，通过单击或设置自动播放来控制动画。视频教程
在地图上添加点：Maker Map Component 不仅支持加入自定义点，还可以添加弹出消息、搜索框以及设计地图上的标签。视频教程
下面是一个 Demo 的详解和最新功能介绍。一起来看看吧。
🚀
Demo 制作的几个步骤
第一步
使用 Mapbox Studio制作底图（20 分钟）
在这里推荐大家使用 Decimal designer map style 这个地图设计模版。
1. 用电脑直接点击这里即可打开加载好模版的 Mapbox Studio。
2. 使用 Studio 中的 Filter 工具，对整个地图进行重新着色。将 Emerald Green（#50C878） 换成更加顺滑的 Raspberry Rouge。
具体来说，Fliter 是一个可以快速根据颜色、类型等筛选地图 Layer 的工具，我们在这里根据颜色 #50C878 从 94 个 Layers 中筛选出来 6 个 Layers，直接修改颜色就好。
你可以改成你喜欢的任何颜色，具体的色号可以到这个网站查询。我们在这里选择了#cc0080 红宝石色，修改后的效果如下图。你也可以继续改变其他颜色，做自己喜欢的样子。
3. 我们可以尝试变换字体，带来更好的效果。因为字体比较敏感，我们选用开源的字体 Lato：https://fonts.google.com/specimen/Lato
网站上支持直接下载字体，以及使用代码嵌入字体。那么在 Mapbox Studio 中，我们可以通过 Filter 找到字体，并上传新的字体来替换。
4. 添加 3D 建筑，我们可以把建筑 Layers 的属性换成 fill-extrusion，并且添加高度。如果你不知道怎么做，可以看一下这个 4 分钟的视频。
第二步
把地图加入到 Framer X 中，你可以把这个 style 的 url 以及 accessToken 复制到 Framer X 中。Style URL 是下面的结构。
mapbox://styles/（你的用户名）/（一串随机码）
具体步骤不再详细描述，可以通过前面提过的视频在短短几分钟内迅速掌握。
第三步
点击 Framer X 右上角小手机标签，可以生成二维码，在手机上预览或者分享给朋友。
❤️
几个刚上新的新功能
使用 JSON 文件添加自定义地点
Marker Map 允许您上传 JSON 文件，并直接在地图上以标签的方式展现出来。还可以设置弹框，这样用户点击标签后就可以弹出相关内容。
JSON 文件一般是这样的格式👇
[
{
"name": "Framer HQ",
"location": { "longitude": 52.372888, "latitude": 4.888030 },
"focusLocation": { "zoom": 12, "bearing": 0, "pitch": 60 },
"category": "office",
"details": "This is where the magic happens!"
},
// Add as many more markers as you’d like!
]自定义标签的设计
您可以将标签放在 Marker Map 的右边缘，并将其附加到您在画布上设计的内容上，取代默认红色标记。
让地图动起来
我们加入了 fly.to Mapbox API，便于我们让地图动起来。可以通过代码控制地图的运动，比如下面的代码定义了四个动作。
// To control what locations the map looks at, provide an
// array of location values. All properties for the locations are optional,
// with any unspecified values reverting to the current map's values.
// Valid properties are:
// latitude, longitude, zoom, bearing, pitch
export const CameraMoveSequence: Override = () => {
return {
locations: [
// first location
{ bearing: 0, pitch: 0, zoom: 11, latitude: 41.385063, longitude: 2.173404 },
// second location
{ zoom: 13 },
// third location
{ pitch: 60 },
// fourth location
{ bearing: 90 }
]
};
};这段代码会让最终的效果依次展现定位、缩放、旋转、俯仰等效果。
欢迎你更多的动作创意了！
🏫
在线课程《Live Location Meets Power Prototypes》
如果你对结合 Mapbox 和 Framer X 的使用非常感兴趣，不妨来报名听一下 Framer 产品工程师和 Mapbox 高级体验设计师带来的在线直播，主题是《Live Location Meets Power Prototypes》。
日期：2019 年 5 月 22 日 周三
时间：11 am PT / 2 pm ET / 8pm CST
北京时间 2019 年 5 月 23 日 周四 2 : 00 a.m
主讲人
在线注册：点击这里进入网站进行注册
👀相关阅读
👀点击关键词查看相关内容
商务合作请联系：apac-bd@mapbox.com
扫描下方二维码，回复【技术】即可加入开发者群，对接资源，一起学习成长。👇