iT邦幫忙

mapbox相關文章
共有 31 則文章
鐵人賽 Modern Web DAY 29

技術 Day 29 - 一些很酷的 Mapbox Styles~(5)

最後一篇技術分享!這系列的文章我們都在介紹陸地上的東西,最後一篇看關於海洋的部分吧~ 我們最常拿大海的深度來做界線分類對吧,像是淺水區深海區之類的,今天來做一張...

鐵人賽 Modern Web DAY 28

技術 Day 28 - 一些很酷的 Mapbox Styles~(4)

Mapbox 除了可以支援我們一般常在用的 2D 地圖,還有我們前幾天介紹的 3D 立體地球跟地形外貌以外,還可以用 3D 形式呈現建築物高度喔~ 有點像積木狀...

鐵人賽 Modern Web DAY 27

技術 Day 27 - 一些很酷的 Mapbox Styles~(3)

還記得我在 Day 04 - 在地圖上標記 Marker 的時候寫了一篇地圖的 Marker 教學嗎~其實標點不限於常見的 2D 地圖喔,3D 的也可以!我們今...

鐵人賽 Modern Web DAY 26

技術 Day 26 - 一些很酷的 Mapbox Styles~(2)

今天帶大家去日本看富士山吧~?不過是地圖版的啦,我也好想去日本玩 ༼இɷஇ༽ 程式碼我們沿用上一篇的 3D 地球地圖來繼續做,不清楚的可以點擊這裡! 3D 地形...

鐵人賽 Modern Web DAY 25

技術 Day 25 - 一些很酷的 Mapbox Styles~(1)

我們常見以及常用的地圖大多都是 2D 的,所以在分享這邊我們做 3D 地圖吧!今天就來看一下一顆簡單的旋轉地球我們要怎麼做~ 說是簡單,但看到的當下還是不禁讚...

鐵人賽 Modern Web DAY 24

技術 Day 24 - 簡易版行程規劃地圖

想了兩天,我們來做一張可以進行行程規劃的地圖好了!不過是簡易版的啦,細節上的設定可以依據需求再去做更改~ 需求目標 老樣子,在進入實作前先訂一下我們的需求:...

鐵人賽 Modern Web DAY 23

技術 Day 23 - Direction (2):適合懶人的插件

如果你覺得接 Direction API 實在是很麻煩,要寫一大堆東西、只想用現成的話,那麼~這篇非常適合你! 其實我是在找 Demo 主題的時候,意外找到這個...

鐵人賽 Modern Web DAY 22

技術 Day 22 - Direction (1):基礎操作

昨天介紹了該如何呼叫 Direction 這支 API,我們今天就拿官網給的範例教學練練手~ 先說明一下我們要做的東西:載入地圖後會有個藍色的點,這個點是我們...

鐵人賽 Modern Web DAY 21

技術 Day 21 - Direction API 怎麼用?

這應該是我們要介紹的最後一支 API 了,那就是 Direction~ 這個功能有在用 Google Map 的你應該再熟悉不過了吧!其實在 Mapbox 也有...

鐵人賽 Modern Web DAY 20

技術 Day 20 - Layers (6):Heatmap

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

鐵人賽 Modern Web DAY 19

技術 Day 19 - Layers (5):Cluster

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

鐵人賽 Modern Web DAY 18

技術 Day 18 - Layers (4):Circle

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

鐵人賽 Modern Web DAY 17

技術 Day 17 - Layers (3):Symbol

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

鐵人賽 Modern Web DAY 16

技術 Day 16 - Layers (2):Fill

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

鐵人賽 Modern Web DAY 15

技術 Day 15 - Layers (1):Line

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

鐵人賽 Modern Web DAY 14

技術 Day 14 - Layer 圖層疊起來

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

技術 Day 10 - Events (3):Movement

最後一個 Event 我們來介紹在地圖上所做的一些「動作」~ 這邊說的動作是指像是對地圖進行移動、拖拉、旋轉、放大縮小等等,像點擊、懸停那些是歸類在互動 (In...

鐵人賽 Modern Web DAY 9

技術 Day 09 - Events (2):Lifecycle

今天來介紹第二個關於 Event 的應用,「Lifecycle」生命週期~跟 React 的生命週期是一樣的概念,主要是在控制地圖渲染的時機,舉個例子:我希望在...

鐵人賽 Modern Web DAY 8

技術 Day 08 - Events (1):Interaction

讓我們來跟地圖做一些互動吧!其實前幾天的文章我們就有跟地圖做到互動了,像是點擊 Marker 或是使用者定位等等,那我們這幾天會特別專注於 Event 的部分~...

鐵人賽 Modern Web DAY 7

技術 Day 07 - 來做一個美食地圖吧!

來到第七天,我們利用這禮拜所學做一個台南美食地圖!美食之都說是台南應該不為過吧 那我是拿 TDX (Transport Data eXchange) 提供的...

鐵人賽 Modern Web DAY 6

技術 Day 06 - 給地圖加上彈跳窗

彈跳窗也是個常用的功能,所以我們今天來看看如何在地圖上產生彈跳窗!剛好前幾天學了如何在地圖上標記 Marker,結合一下來做一個小功能~ GoGo Popup...

鐵人賽 Modern Web DAY 5

技術 Day 05 - 關於一些 Control

今天來說一下常用的控制元件! (就是地圖上的小工具啦)預設地圖是長這樣的: 對的沒錯,這些小工具需要我們寫程式來把它們呼叫出來...我們使用 addContr...

鐵人賽 Modern Web DAY 4

技術 Day 04 - 在地圖上標記 Marker

一起在地圖上進行標記吧!在地圖上加上很多 Marker 好像就做完一半的 Project 了...?(絕對是視覺影響判斷) 我們把 Marker 分為 2 種,...

鐵人賽 Modern Web DAY 3

技術 Day 03 - 環境安裝 & init Map

耶~終於來到我們的寫 code 環節了~ 基本裝備 Mapbox access token Mapbox GL JS VSCode (主要以自己熟悉為主) N...

鐵人賽 Modern Web DAY 2

技術 Day 02 - 認識 Mapbox

Mapbox ? 說到地圖,大家第一個想到的絕對是 Google Map 了吧~但其實你還有其他選擇,那就是 Mapbox! Mapbox 起源自英國的「開放街...

鐵人賽 Modern Web DAY 1

技術 Day 1 - 前言與大綱介紹

前言 嗨~沒想到我真的參賽了... 這是我第一次參加鐵人賽,如果用詞或是觀念有誤拜託告訴我~ 這個系列主要分享我在使用 Mapbox 上比較常會用到的 API,...

鐵人賽 Modern Web DAY 14
30天打造我的WebGIS 系列 第 14

技術 [Day 14] WebGIS中的網格資料

前言 網格(raster)資料是指以規則網格的方式呈現空間資料,可能是長這樣: 上面是試圖以geojson模擬網格資料,網格間隔大概是一英里(1.6km),並且...