iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
SideProject30

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

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

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

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

[Day11] 檢視向量圖磚

今天比較沒有時間,就簡單聊聊取得 MVT 格式的向量圖磚後,如何才能檢視其內包含的資料。 通常穩定的向量圖磚服務為了開箱即用,提供者都會搭配至少一個預設的渲染方...

2023-09-26 ‧ 由 謝晉凡 分享
DAY 12

[Day12] 開始動手做圖磚

前天提到了專門用於將 OSM 資料集轉換為向量圖磚的 tilemaker。今天我們就先來實作看看,把有關登山的向量圖磚展示在前端! 首先從簡單的點資料開始,先試...

2023-09-27 ‧ 由 謝晉凡 分享
DAY 13

[Day13] 開始動手做圖磚 - 以縮放層級篩選資料

昨天簡單的示範使用 tilemaker,將資料處理邏輯撰寫於 process.lua 內,讓 OSM 中的「山頂」資料 natural=peak 以及「三角點」...

2023-09-28 ‧ 由 謝晉凡 分享
DAY 14

[Day14] 定義地圖樣式-Maplibre Style

前言 如同之前提到過的,MVT (Mapbox Vector Tile) 是由 Mapbox 提出來的標準,因此也率先用於自家的產品:網頁端的 Mapbox G...

2023-09-29 ‧ 由 謝晉凡 分享
DAY 15

[Day15] 定義地圖樣式-使用 symbol Layer

前言 昨天我們在 Style 中,使用了 type=circle 的 Layer 來顯示三角點的點位資料。不過圓點僅僅只能通過顏色或大小來表示資料外觀,為了能在...

2023-09-30 ‧ 由 謝晉凡 分享
DAY 16

[Day16] 渲染高程資料

Terrain RGB 前幾天我們將目光放在自製向量圖磚,並在前端渲染山頂/三角點等圖形。今天我們就先暫時放下這些,來看看登山地圖中,另一個重要的元素:高程資訊...

2023-10-01 ‧ 由 謝晉凡 分享
DAY 17

[Day17] 精進山頭標示

前言 從今天開始,就不再一一列舉 tilemaker 設定檔的名詞,以及 Maplibre Style 的細節。我們就從地圖樣式的「需求」出發,來看看可以怎麼撰...

2023-10-02 ‧ 由 謝晉凡 分享
DAY 18

[Day18] 加入水域資料

前幾天處理的是山頭的點資料,今天就來看看如何把有面積的水域資料加入地圖之中。 加入新的 Tile Layer 有關登山活動會使用到的水域,在 OSM 中會被標記...

2023-10-03 ‧ 由 謝晉凡 分享
DAY 19

[Day19] tilemaker 細部設定

前幾天都從需求出發,使用 tilemaker 製作圖磚並立即渲染到 Maplibre 的 Web Map 之中。 從源頭的 OSM 資料集到最後展示的地圖,大致...

2023-10-04 ‧ 由 謝晉凡 分享
DAY 20

[Day20] 來改別人的 Code: tilemaker x OpenMapTiles

從 Day12 開始,我們提到了如何使用 tilemaker 依需求產製向量圖磚,並且在前端渲染。包括山頂/三角點、等高線以及水域。大部分的功夫會花在利用 Lu...

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