最後一篇技術分享!這系列的文章我們都在介紹陸地上的東西,最後一篇看關於海洋的部分吧~ 我們最常拿大海的深度來做界線分類對吧,像是淺水區深海區之類的,今天來做一張...
Mapbox 除了可以支援我們一般常在用的 2D 地圖,還有我們前幾天介紹的 3D 立體地球跟地形外貌以外,還可以用 3D 形式呈現建築物高度喔~ 有點像積木狀...
還記得我在 Day 04 - 在地圖上標記 Marker 的時候寫了一篇地圖的 Marker 教學嗎~其實標點不限於常見的 2D 地圖喔,3D 的也可以!我們今...
今天帶大家去日本看富士山吧~?不過是地圖版的啦,我也好想去日本玩 ༼இɷஇ༽ 程式碼我們沿用上一篇的 3D 地球地圖來繼續做,不清楚的可以點擊這裡! 3D 地形...
我們常見以及常用的地圖大多都是 2D 的,所以在分享這邊我們做 3D 地圖吧!今天就來看一下一顆簡單的旋轉地球我們要怎麼做~ 說是簡單,但看到的當下還是不禁讚...
想了兩天,我們來做一張可以進行行程規劃的地圖好了!不過是簡易版的啦,細節上的設定可以依據需求再去做更改~ 需求目標 老樣子,在進入實作前先訂一下我們的需求:...
如果你覺得接 Direction API 實在是很麻煩,要寫一大堆東西、只想用現成的話,那麼~這篇非常適合你! 其實我是在找 Demo 主題的時候,意外找到這個...
昨天介紹了該如何呼叫 Direction 這支 API,我們今天就拿官網給的範例教學練練手~ 先說明一下我們要做的東西:載入地圖後會有個藍色的點,這個點是我們...
這應該是我們要介紹的最後一支 API 了,那就是 Direction~ 這個功能有在用 Google Map 的你應該再熟悉不過了吧!其實在 Mapbox 也有...
耶~終於到我們介紹的最後一篇 Layer 啦~ 你一定看過這種類型的地圖: 圖片來源:https://www.soft4fun.net/tech/news/...
不知道大家還記不記得我們在 Day 07 - 來做一個美食地圖吧! 做了一張美食地圖呢?當初許的承諾今天就來實現吧!我們來把那張密集的很可怕的地圖做視覺上的修改...
第一次看到 Circle Layer 的時候,天真的我還以為就是在地圖上畫圓圈 ... 但原來是指在地圖上標圓點的意思 XD (一定也有人跟我一樣誤會的吧!)那...
之前我們學到了怎麼用 Marker 在地圖上標點,其實利用 Layer 也可以做到一樣的效果喔!那就是 Symbol Layer~ 雖然效果一樣,但在過來人的...
昨天我們用 Line 畫了台灣地圖,那今天就來幫台灣地圖上個色吧 資料來源我們一樣用政府資料開放平台所提供的縣市邊界檔案,如果沒看前一篇的介紹可以看一下資料處理...
上一篇介紹 Layer 的架構時,我們有說過「除了 background 和 sky 以外,每個圖層都需要從 source 引用數據」,那我們要怎麼引用這些數據...
接下來要介紹一些進階應用啦~你一定看過像這種類型的地圖: 這個只是圖層 (Layer) 的應用之一,它的做法其實就是在一張基礎地圖上面再疊一張圖層,接下來的這...
上次做的 Demo 是台南美食之旅,今天就來用台中舉例好了!台中也好多好吃的 ... 一樣的,我拿 TDX (Transport Data eXchange)...
知道如何控制視角位置後,今天我們來替這個過程加上過渡動畫!那在 Camera 的部分也是有相關的 Event 可以使用,一起來用抗抗吧~ (其實我也是昨天在打...
說是相機位置可能會有點抽象 (對!我就是直接英翻中的,標題真難下)其實就是使用者在地圖的第一視角位置啦~ Mapbox 對於 Camera 提供了以下功能:...
最後一個 Event 我們來介紹在地圖上所做的一些「動作」~ 這邊說的動作是指像是對地圖進行移動、拖拉、旋轉、放大縮小等等,像點擊、懸停那些是歸類在互動 (In...
今天來介紹第二個關於 Event 的應用,「Lifecycle」生命週期~跟 React 的生命週期是一樣的概念,主要是在控制地圖渲染的時機,舉個例子:我希望在...
讓我們來跟地圖做一些互動吧!其實前幾天的文章我們就有跟地圖做到互動了,像是點擊 Marker 或是使用者定位等等,那我們這幾天會特別專注於 Event 的部分~...
來到第七天,我們利用這禮拜所學做一個台南美食地圖!美食之都說是台南應該不為過吧 那我是拿 TDX (Transport Data eXchange) 提供的...
彈跳窗也是個常用的功能,所以我們今天來看看如何在地圖上產生彈跳窗!剛好前幾天學了如何在地圖上標記 Marker,結合一下來做一個小功能~ GoGo Popup...
今天來說一下常用的控制元件! (就是地圖上的小工具啦)預設地圖是長這樣的: 對的沒錯,這些小工具需要我們寫程式來把它們呼叫出來...我們使用 addContr...
一起在地圖上進行標記吧!在地圖上加上很多 Marker 好像就做完一半的 Project 了...?(絕對是視覺影響判斷) 我們把 Marker 分為 2 種,...
耶~終於來到我們的寫 code 環節了~ 基本裝備 Mapbox access token Mapbox GL JS VSCode (主要以自己熟悉為主) N...
Mapbox ? 說到地圖,大家第一個想到的絕對是 Google Map 了吧~但其實你還有其他選擇,那就是 Mapbox! Mapbox 起源自英國的「開放街...
前言 嗨~沒想到我真的參賽了... 這是我第一次參加鐵人賽,如果用詞或是觀念有誤拜託告訴我~ 這個系列主要分享我在使用 Mapbox 上比較常會用到的 API,...
前言 網格(raster)資料是指以規則網格的方式呈現空間資料,可能是長這樣: 上面是試圖以geojson模擬網格資料,網格間隔大概是一英里(1.6km),並且...