淺談開放街圖(OpenStreetMap)
及其生態系

About me

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

謝晉凡(typebrook)
OSM, 登山, Unix
曾任究心公益科技(Android)
待業中

The Basics

Compare to Google Maps

軟體資源有幾個層次

原始資料（從現實世界取得的資訊）
服務（API、加值過後的資料）
產品（最終使用到的軟體）

Google Map 是「產品」

~~原始資料~~（你接觸不到）
服務
- Map SDK
- POI/Navigation API
產品
- Google 地圖: www.google.com/maps/
- 我的地圖
- Android/iOS: 地圖
- Google Earth

OSM 是「資料庫」

原始資料
- 使用開放資料庫授權
服務
- 圖磚 API
- 資料庫 API
產品

Everyone owns OSM

一份地理資料集/庫，有制度、有社群
使用 ODbL 授權
由 OSMF (開放街圖基金會) 保護、推廣、支持
但不擁有

How it works?

Postgres: https://wiki.openstreetmap.org/wiki/Database
Budget: https://wiki.osmfoundation.org/wiki/Board/Minutes/2023-02/Budget

Why it rocks?

Community Driven, no one dominates
ODbL
使用案例

資料長什麼樣?

OSM 只包含三

種類	id	tag	地理資訊
node	有	有	座標
way	有	有	nodes
relation	有	有	ways/nodes

取得資料

好想工作室
https://openstreetmap.org/node/7602886831
XML格式 (試著加上.json)
https://openstreetmap.org/api/0.6/node/7602886831
L棟倉庫創意生活館
https://openstreetmap.org/api/0.6/way/204493492
公園里
https://openstreetmap.org/api/0.6/relation/3756152

依照條件取得資料

依照地名/關鍵字: osm.org
https://www.openstreetmap.org/search?query=
tag 統計: taginfo
http://taginfo.openstreetmap.org/
依照 type/tag: Overpass
https://overpass-turbo.eu/
依照貢獻方式: OSM Change Analyzer
https://osmcha.mapbox.com/

取得整份資

Planet
https://planet.openstreetmap.org/pbf
Extract
http://download.geofabrik.de/asia/taiwan-latest.osm.pbf

自行分析資料

GDAL
- 使用 ogr2ogr 轉換格式
- 使用 SQL 語句進行篩選
osm-c-tools
- osmconvert 轉換格式
- osmfilter 進行篩選
osmium
- 直接進行格式轉換和篩選

如何使用?

切換到 OSM 生態系

Why?

別跟錢錢過不去！

開發口罩地圖他收60萬帳單驚呆了

模式1
底圖 + 資料

Case 展示點/線/面資料

口罩地圖

使用相關圖磚服務

使用相關框架

Switch to OSM

https://switch2osm.org/the-basic
Integrate OSM by default

模式2
在圖磚中塞入向量資料

Case: 自由變換使用語言

Example

MVT (Mapbox Vector Tile):

使用 Protobuffer 格式來紀錄地理資料
- Tile -> Layer -> Feature
- 由 Schema 決定儲存的資料
Vector Tile Provider
依照框架調整渲染方式：
- Mapbox/Maplibre style spec
- Trangram Scene FIle
使用線上編輯器調整樣式:
- Maputnik
- Maptiler

模式3
擁有自己的圖磚服務！

想像一下，在底圖以外
要呈現的資料有上百萬個！

Case: 台電電桿品質檢視

頁面連結

Brandon Liu COSCUP 2023 (07/30)

PMTiles and OSMExpress

OSMExpress
- 使用單一檔案提供查找
- S2 Geometry: 快速產生地理搜尋結果
- 可以提供快速切片服務
PMTiles
- 使用單一檔案提供 Tile Service
- S3 friendly! low-cost, zero-maintenance!

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`	在筆記中貼入程式碼
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.

淺談開放街圖(OpenStreetMap)
及其生態系

About me

The Basics

Compare to Google Maps

軟體資源有幾個層次

Google Map 是「產品」

OSM 是「資料庫」

Everyone owns OSM

How it works?

Why it rocks?

資料長什麼樣?

OSM 只包含三

取得資料

依照條件取得資料

取得整份資

自行分析資料

如何使用?

Why?

模式1
底圖 + 資料

Case 展示點/線/面資料

使用相關圖磚服務

使用相關框架

Switch to OSM

模式2
在圖磚中塞入向量資料

Case: 自由變換使用語言

MVT (Mapbox Vector Tile):

模式3
擁有自己的圖磚服務！

想像一下，在底圖以外
要呈現的資料有上百萬個！

Case: 台電電桿品質檢視

Brandon Liu COSCUP 2023 (07/30)

PMTiles and OSMExpress

其它應用方式

手機/電腦端

Contritubion 增刪查改

淺談開放街圖(OpenStreetMap)及其生態系

About me

The Basics

Compare to Google Maps

軟體資源有幾個層次

Google Map 是「產品」

OSM 是「資料庫」

Everyone owns OSM

How it works?

Why it rocks?

資料長什麼樣?

OSM 只包含三

取得資料

依照條件取得資料

取得整份資

自行分析資料

如何使用?

Why?

模式1底圖 + 資料

Case 展示點/線/面資料

使用相關圖磚服務

使用相關框架

Switch to OSM

模式2在圖磚中塞入向量資料

Case: 自由變換使用語言

MVT (Mapbox Vector Tile):

模式3擁有自己的圖磚服務！

想像一下，在底圖以外要呈現的資料有上百萬個！

Case: 台電電桿品質檢視

Brandon Liu COSCUP 2023 (07/30)

PMTiles and OSMExpress

其它應用方式

手機/電腦端

Contritubion 增刪查改

淺談開放街圖(OpenStreetMap)
及其生態系

模式1
底圖 + 資料

模式2
在圖磚中塞入向量資料

模式3
擁有自己的圖磚服務！

想像一下，在底圖以外
要呈現的資料有上百萬個！