iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

打造你的主題地圖!Mapbox 也可以!(ft. React) 系列

用膩了 Google Map,發現 Mapbox 也是不錯的選擇~(其實是因為介面很好看 )
那就來學習一下好了ヽ( ° ▽°)ノ
..
應該不會就這樣迷失在 Mapbox ㄅ (有人看出來這是雙關嗎)

鐵人鍊成 | 共 30 篇文章 | 11 人訂閱 訂閱系列文 RSS系列文 團隊IT108xWKE
DAY 11

Day 11 - Camera (1):地圖相機位置由你決定!

說是相機位置可能會有點抽象 (對!我就是直接英翻中的,標題真難下)其實就是使用者在地圖的第一視角位置啦~ Mapbox 對於 Camera 提供了以下功能:...

2022-09-26 ‧ 由 no_ 分享
DAY 12

Day 12 - Camera (2):為轉換視角加上過渡動畫

知道如何控制視角位置後,今天我們來替這個過程加上過渡動畫!那在 Camera 的部分也是有相關的 Event 可以使用,一起來用抗抗吧~ (其實我也是昨天在打...

2022-09-27 ‧ 由 no_ 分享
DAY 13

讓 Mapbox 帶你經歷一趟美食之旅!

上次做的 Demo 是台南美食之旅,今天就來用台中舉例好了!台中也好多好吃的 ... 一樣的,我拿 TDX (Transport Data eXchange)...

2022-09-28 ‧ 由 no_ 分享
DAY 14

Day 14 - Layer 圖層疊起來

接下來要介紹一些進階應用啦~你一定看過像這種類型的地圖: 這個只是圖層 (Layer) 的應用之一,它的做法其實就是在一張基礎地圖上面再疊一張圖層,接下來的這...

2022-09-29 ‧ 由 no_ 分享
DAY 15

Day 15 - Layers (1):Line

上一篇介紹 Layer 的架構時,我們有說過「除了 background 和 sky 以外,每個圖層都需要從 source 引用數據」,那我們要怎麼引用這些數據...

2022-09-30 ‧ 由 no_ 分享
DAY 16

Day 16 - Layers (2):Fill

昨天我們用 Line 畫了台灣地圖,那今天就來幫台灣地圖上個色吧 資料來源我們一樣用政府資料開放平台所提供的縣市邊界檔案,如果沒看前一篇的介紹可以看一下資料處理...

2022-10-01 ‧ 由 no_ 分享
DAY 17

Day 17 - Layers (3):Symbol

之前我們學到了怎麼用 Marker 在地圖上標點,其實利用 Layer 也可以做到一樣的效果喔!那就是 Symbol Layer~ 雖然效果一樣,但在過來人的...

2022-10-02 ‧ 由 no_ 分享
DAY 18

Day 18 - Layers (4):Circle

第一次看到 Circle Layer 的時候,天真的我還以為就是在地圖上畫圓圈 ... 但原來是指在地圖上標圓點的意思 XD (一定也有人跟我一樣誤會的吧!)那...

2022-10-03 ‧ 由 no_ 分享
DAY 19

Day 19 - Layers (5):Cluster

不知道大家還記不記得我們在 Day 07 - 來做一個美食地圖吧! 做了一張美食地圖呢?當初許的承諾今天就來實現吧!我們來把那張密集的很可怕的地圖做視覺上的修改...

2022-10-04 ‧ 由 no_ 分享
DAY 20

Day 20 - Layers (6):Heatmap

耶~終於到我們介紹的最後一篇 Layer 啦~ 你一定看過這種類型的地圖: 圖片來源:https://www.soft4fun.net/tech/news/...

2022-10-05 ‧ 由 no_ 分享