iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
SideProject30

製作適用於網頁的台灣登山地圖 系列

除了大家熟知的 Google Map 之外,各種領域因為更細致的需求,都會有其適用的地圖。從原始資料到最終呈現在網頁上的畫面,這一段路可不簡單!

這篇系列文我想藉由這個主題,淺顯的分享如何依照台灣的登山活動需求,選擇合適的技術與資源製作地圖。

參賽天數 26 天 | 共 25 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 21

[Day21] 加入手機通訊點

前言 昨天使用了能實現 OpenMapTiles schema 的設定檔來產製圖磚,並成功在前端展示了 [MapTiler Terrain] 這份 Style...

2023-10-06 ‧ 由 謝晉凡 分享
DAY 22

[Day22] 修改登山路徑

在原本基於 OpenMapTiles 的 Style 之中,山區路徑都以白色來標示: 可以看到,白色的標線不太明顯,而且樣式還很單一,來看看可以怎麼改進。 處理...

2023-10-07 ‧ 由 謝晉凡 分享
DAY 23

[Day23] Maplibre Style 中的表達式

前言 之前在 Day14 示範過使用 Maplibre Style 新增兩個圖層,在前端呈現簡單的樣式。不過相信在前幾天的範例中,讀者應該也發現到屬性值可以不單...

2023-10-08 ‧ 由 謝晉凡 分享
DAY 24

[Day24] 使用 Sprite 來呈現圖示

圖片來源:Mapbox 呈現圖示 使用 Style 渲染地圖時,除了文字以外,還能透過圖示來呈現資料。圖層可以在 layout 中使用 icon-image 屬...

2023-10-09 ‧ 由 謝晉凡 分享
DAY 25

[Day25] 將等高線塞入向量圖磚

我們在 Day16 有提到過,可以利用 maplibre-contour 這個套件來搭配 Terrain-RGB 圖磚展示等高線。 不過傳統上,等高線的資料來源...

2023-10-10 ‧ 由 謝晉凡 分享