---
title: Raspberry PiとMapLibre GL JSを用いたオフライン地図表示システムの試作
tags:  #raspberry pi #maplibre gl js #オフライン地図 #災害対策 #3d都市モデル #標高タイル #最適化ベクトルタイル #オープンソース #foss4g  
author: [Yohei Shiwaku](https://convert.docswell.com/user/shi-works)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LJ3PN8RG75.jpg?width=480
description: 2024/11/08(金) MapLibre Meetup Japan #03 発表資料です。 災害時のインターネット回線断絶に対応するためのオフライン地図表示システムの試作を紹介しています。このシステムでは、Raspberry Pi 4を使用し、MapLibre GL JSを用いて地図を表示します。システムの構築手順や必要な機材、背景地図や3D都市モデル、国土地理院の標高タイルを利用し、オフラインで動作可能な地図を実現します。また、デモを通じて接続方法や表示方法についても説明します。
published: November 10, 24
canonical: https://convert.docswell.com/s/shi-works/KEX8L8-2024-11-10-174230
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LJ3PN8RG75.jpg)

Raspberry PiとMapLibre GL JSを
用いたオフライン地図表示システム
の試作
2024/11/08(金) 18:00～20:30
MapLibre Meetup Japan #03
@エフスペ渋谷
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/8JDLWMYN7G.jpg)

自己紹介
塩飽 洋平（しわく ようへい）
株式会社Geolonia（ジオロニア）
地図と位置情報の会社でGISエンジニアを
しています
（フロントエンドエンジニア見習いです）
GitHub : https://github.com/shiwaku
X(旧Twitter) : https://x.com/shi__works
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/VEP29R6NE8.jpg)

目次
1. 背景と目的
2. 必要な機材と開発環境
3. システム構築手順
4. 背景地図（国土地理院 最適化ベクトルタイル）
5. 3D都市モデル（建築物モデル）
6. 国土地理院 標高タイル（数値PNGタイル）
7. オフライン地図の表示
8. デモ
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/27VDMR3Y7Q.jpg)

背景と目的
背景と目的
o 災害時のインターネット回線断絶に対応するオフライ
ン地図システムの必要性
使用機材及びWeb地図ライブラリ
o Raspberry Pi 4、MapLibre GL JS等
参考資料
o unvt/portable
https://github.com/unvt/portable
【参考文献】
「洪水災害時における避難支援のための オフライン3Dハザードマップの開発と評価」
東京大学,2023年,修士論文,平澤 彰悟
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/5JGYGM3WJL.jpg)

必要な機材と開発環境
必要な機材
• Raspberry Pi 4 Model B 8GB 14,020円 税込
• Pi4Case (Red/White) (ラズパイ4公式ケース) 800円 税込
• microSDカード64GB 1,100円 税込
• SDカードリーダー 2,279円 税込
• モバイルバッテリー 2,990円 税込
• スマートフォン（Android）
開発環境
• ノートPC
o OS : Windows 10 Pro 64ビット
o CPU : インテル Core i7
o メモリ : 16GB
o SSD : 512GB
Raspberry Pi 4 Model B
（出典）秋月電子通商
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/47QMXR5QEP.jpg)

システム構築手順
Raspberry Piの初期設定
• Raspberry Pi OSをmicroSDカードにインストール
し、Raspberry Pi 4に挿入
• 初回起動後にWi-FiやSSH設定を行い、リモート接
続を有効化
Webサーバーとアクセスポイント設定
• Apache2/Nginxをインストールし、Webサーバーと
して構築。
• hostapdとdnsmasqを用いてRaspberry PiをWi-Fiア
クセスポイント化
データのホスティングとオフライン地図へのアクセス
• 国土地理院 最適化ベクトルタイル、3D都市モデル
PLATEAU建築物モデル、国土地理院 標高タイル
（DEM10B）等をRaspberry Pi（マイクロSDカー
ド）に格納
• QRコードで接続し、ブラウザから地図を表示
- apache2/Nginx
- hostapd
- dnsmasq
- 地理院 最適化ベクトルタイル - 国土地理院 標高タイル
- 3D都市モデル(建築物モデル)
※数値PNGタイル
※PMTiles形式
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/KE4V689Y71.jpg)

背景地図（国土地理院 最適化ベクトルタイル）
特徴
● 最適化ベクトルタイルは、国
土地理院が提供する「地理院
地図Vector」を設計・改良し、
データ量を軽減し、描画性
能を向上させた軽量・最適
化されたベクトルタイルで
す。
※最適化ベクトルタイル デモサイト（PMTiles）
参考リンク
最適化ベクトルタイル
https://github.com/gsi-cyberjapan/optimal_bvmap
1枚のタイルサイズを最大
地理院地図Vector
256kB以下となるよう設計
https://maps.gsi.go.jp/vector/
参考資料：国土地理院最適化ベクトルタイル
の特徴（国土地理院）
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/L713V2KNEG.jpg)

3D都市モデル（建築物モデル）
特徴
● 国土交通省が推進する
「PLATEAU（プラトー）」
プロジェクトは、日本全国
200都市以上の3D都市モデ
ル（建築物モデル等）をオ
ープンデータとして提供し
ています。
※3D都市モデル建築物モデル（PMTiles）デモサイト
参考リンク
LOD1相当を使用
PLATEAU公式サイト
https://www.mlit.go.jp/plateau/
3D都市モデル（Project PLATEAU）ポータルサイト
https://www.geospatial.jp/ckan/dataset/plateau
Japanese Building Footprint Data
（Pacific Spatial Solutions株式会社）
https://source.coop/repositories/pacificspatial/flateau/descripti
on
※上記で公開されている3D都市モデル（Project PLATEAU）
建築物モデルのGeoParquet形式のデータ（CC BY 4.0ライセ
ンス）をPMTilesに変換したデータを使用しています。
3D都市モデルの特徴と活用法
https://www.mlit.go.jp/plateau/learning/tpc01-2/
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/G7WPLRPME2.jpg)

国土地理院 標高タイル（数値PNGタイル）
特徴
● 標高タイルは、DEM（数値標高
モデル）データを利用しており、
MapLibre GL JS等で3D地形を
表示することが可能です。
標高タイルの作成方法と地理院地図で表示される
標高値について
https://maps.gsi.go.jp/development/hyokochi.html
標高タイルの詳細仕様
https://www.mlit.go.jp/plateau/learning/tpc01-2/
※国土地理院 標高タイル（DEM10B）3D地形デモサイト
参考リンク
国土地理院 標高タイル（DEM10B）
https://maps.gsi.go.jp/development/ichiran.html#dem
※国土地理院 標高タイル（DEM10B）をMapbox TerrainRGB形式に変換したものを使用しています。
今後の展望
● 産総研がシームレス標高タイル
として、DEM10BとDEM5A
（航空レーザ測量に基づく、精
度の高い標高データ）を統合し
た標高タイルを公開中
産業技術総合研究所 シームレス標高タイル
https://tiles.gsj.jp/tiles/elev/tiles.html
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4JZKMRKMJ3.jpg)

オフライン地図の表示
└─html
│ index.html
├─lib
│ ├─maplibre-gl@4.5.0
│ │
maplibre-gl.css
│ │
maplibre-gl.js
│ │
│ └─pmtiles@2.11.0
│
index.js
│
https://github.com/shiwaku/g-portable-upload-data
├─public
│
optimal_bvmap-v1.pmtiles ※国土地理院 最適化ベクトルタイル(15.8GB)
│
PLATEAU_2023_LOD0.pmtiles ※3D都市モデル(建築物モデル)(2.9GB)
│
gsi-dem-terrain-rgb ※国土地理院 標高タイル(8.7GB)
│
├─glyphs
OS(5GB)+各データを合わせて32GB程度なので、
microSDカード64GBに収まる感じです。
├─sprite
└─style
std.json ※スタイル（標準地図）
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/YE6QNRQ5EV.jpg)

【デモ】オフライン地図の表示
Wi-Fiアクセスポイントへの接続
（Raspberry Pi 4への接続）
オフライン地図への接続
SSID : UNVTPortable
PW : unvtportable
http://192.168.249.1/
11


