20241108_Raspberry PiとMapLibre GL JSを用いたオフライン地図表示システムの試作
412 Views
November 10, 24
スライド概要
イベント発表資料の公開
関連スライド
各ページのテキスト
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