Raspberry PiとMapLibre GL JSを用いたオフライン地図表示システムの試作
1.2K Views
November 10, 24
スライド概要
2024/11/08(金) MapLibre Meetup Japan #03 発表資料です。
災害時のインターネット回線断絶に対応するためのオフライン地図表示システムの試作を紹介しています。このシステムでは、Raspberry Pi 4を使用し、MapLibre GL JSを用いて地図を表示します。システムの構築手順や必要な機材、背景地図や3D都市モデル、国土地理院の標高タイルを利用し、オフラインで動作可能な地図を実現します。また、デモを通じて接続方法や表示方法についても説明します。
イベント発表資料の公開
関連スライド
各ページのテキスト
Raspberry PiとMapLibre GL JSを 用いたオフライン地図表示システム の試作 2024/11/08(金) 18:00～20:30 MapLibre Meetup Japan #03 @エフスペ渋谷 1
自己紹介 塩飽 洋平（しわく ようへい） 株式会社Geolonia（ジオロニア） 地図と位置情報の会社でGISエンジニアを しています （フロントエンドエンジニア見習いです） GitHub : https://github.com/shiwaku X(旧Twitter) : https://x.com/shi__works 2
目次 1. 背景と目的 2. 必要な機材と開発環境 3. システム構築手順 4. 背景地図（国土地理院 最適化ベクトルタイル） 5. 3D都市モデル（建築物モデル） 6. 国土地理院 標高タイル（数値PNGタイル） 7. オフライン地図の表示 8. デモ 3
背景と目的 背景と目的 o 災害時のインターネット回線断絶に対応するオフライ ン地図システムの必要性 使用機材及びWeb地図ライブラリ o Raspberry Pi 4、MapLibre GL JS等 参考資料 o unvt/portable https://github.com/unvt/portable 【参考文献】 「洪水災害時における避難支援のための オフライン3Dハザードマップの開発と評価」 東京大学,2023年,修士論文,平澤 彰悟 4
必要な機材と開発環境 必要な機材 • 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
システム構築手順 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
背景地図（国土地理院 最適化ベクトルタイル） 特徴 ● 最適化ベクトルタイルは、国 土地理院が提供する「地理院 地図Vector」を設計・改良し、 データ量を軽減し、描画性 能を向上させた軽量・最適 化されたベクトルタイルで す。 ※最適化ベクトルタイル デモサイト（PMTiles） 参考リンク 最適化ベクトルタイル https://github.com/gsi-cyberjapan/optimal_bvmap 1枚のタイルサイズを最大 地理院地図Vector 256kB以下となるよう設計 https://maps.gsi.go.jp/vector/ 参考資料：国土地理院最適化ベクトルタイル の特徴（国土地理院） 7
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
国土地理院 標高タイル（数値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
オフライン地図の表示 └─html │ index.html ├─lib │ ├─[email protected] │ │ maplibre-gl.css │ │ maplibre-gl.js │ │ │ └─[email protected] │ 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
【デモ】オフライン地図の表示 Wi-Fiアクセスポイントへの接続 （Raspberry Pi 4への接続） オフライン地図への接続 SSID : UNVTPortable PW : unvtportable http://192.168.249.1/ 11