商務合作請聯繫：[email protected]

微信號：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：fonts.google.com/specim

網站上支持直接下載字體，以及使用代碼嵌入字體。那麼在 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 maps 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
主講人

在線註冊：點擊這裡進入網站進行註冊

??相關閱讀

  • 前 Uber 可視化主管 Nico Belmonte 加入 Mapbox 擔任 Maps 總經理
  • Vision SDK 已面向全球開發者開放下載，快速將 AI 地圖加入車載應用
  • 「權力的遊戲」主題地圖 GOT 已上線 Mapbox Studio

??點擊關鍵詞查看相關內容

  • 中文教程：3D地圖 地圖設計 地圖著色 雙語地圖 中國地圖 地圖優化 邊界線
  • 行業方案：汽車 室內地圖 區塊鏈 導航 5G BI 公益 物流 旅遊 天氣 AR
  • 客戶案例：大疆 飛豬 Keep 孤獨星球 保時捷 亞馬遜 墨跡
  • 在線體驗：核武器威力展示 房產投資 人口密度3D交互
  • 社區活動：開發者故事 開發者直播 開發者調查報告 開發者圖鑑

商務合作請聯繫：[email protected]

掃描下方二維碼，回復【技術】即可加入開發者羣，對接資源，一起學習成長。??

推薦閱讀：

相關文章