MapLibreとGeoJSONで 地理空間情報 2024/10/11 Shibuya.apk #49 NTTテクノクロス 中島進也（なかしょ）

⾃⼰紹介 • なかしょ（中島進也） @nakasho_dev • 所属：NTTテクノクロス株式会社 デジタルトランスフォーメーション事業部 • 業務：MaaS関連のスマートフォンアプリ開発担当 • 最近の技術的興味：モバイルで地理空間情報 • 趣味： Ø妻とモンハンデート ØIT関連の勉強会（主にモバイル系 or アジャイル系 or Microsoft系） Ø技術コミュニティの運営スタッフ üeXtreme Programming Japan User Group（XPJUG） 2019〜 üTDD BootCamp Online (TDDBC) 2020〜 2 ※本資料は私個⼈の意⾒であり、所属企業・部⾨⾒解を代表するものではありません。

世の中は地理空間情報で溢れている

⾊々な地理空間情報サービス 地図サービス Android iOS Web 備考 GoogleMaps 〇 〇 〇 https://developers.google.com/maps?hl=ja MapKit × 〇 〇 https://developer.apple.com/documentation/mapkit/ Bing Maps 〇 〇 〇 https://www.microsoft.com/en-us/maps/bing-maps/choose-your-bing-maps-api Azure Maps 〇 〇 〇 https://azure.microsoft.com/ja-jp/products/azure-maps いつもNavi 〇 〇 〇 https://www.zenrin-datacom.net/solution/api ArcGIS 〇 〇 〇 https://www.esrij.com/products/arcgis-developers/apis-and-sdks/ Here 〇 〇 〇 https://www.here.com/jp MapBox 〇 〇 〇 https://www.mapbox.com/ Mapped In 〇 〇 〇 https://developer.mappedin.com/ maptiler 〇 〇 〇 https://www.maptiler.com/jp/ Mappls 〇 〇 〇 https://about.mappls.com/api/maps/ TomTom 〇 〇 〇 https://developer.tomtom.com/ Mapple 〇 × × https://mapple.com/products/system-sdk/

MapLibre 5 • MapBoxがOSSライセンス から商⽤ライセンスに変 わったことを契機に フォークして開発された • 組織として開発して、開 発した機能に応じてスポ ンサーや個⼈の寄付から のお⾦を⽀払うBounty⽅ 式で開発 https://maplibre.org/sponsors/

MapLibreのプロダクト 6 • MapLibre GL JS ØTypeScriptライブラリ • MapLibre Native ØOpenGLとMetalをサポート ØAndroid, iOS, GLFW, Linux, Node.js, Qt, Windows, macOS • MapLibre RS ØWebGPU, Rust, WebAssembly, まだ不安定 • MapLibre Style Specification ØMapLibreで使⽤するStyleを定義するJSON仕様 • Martin Ø⼤規模なPostGISデータベースからVectorTileを⽣成するサーバ https://maplibre.org/

まずはTutorialで 7 mapView.getMapAsync { map -> map.setStyle("https://demotiles.maplibre.org/style.json") map.cameraPosition = CameraPosition.Builder() .target(LatLng(35.641556,139.669086)).zoom(20.0).build() }

8 https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json OpenStreetMapの データを使⽤する Style 国⼟地理院地図データ を使⽤するStyle

9 MapLibre Style Specification 地図のスタイルを定義するためのフォーマット。この仕様により、地図の 外観やインタラクションを詳細に設定可能。 • レイヤー構成 Ø地図の各要素（道路、建物、⽔域など）はレイヤーとして定義される。 Øレイヤーの種類には、背景、ライン、シンボル、ラスタ、フィル、サークルなどが ある。 • ソース Ø地図データのソースを指定します。これには、ベクターデータやラスターデータの URLが含まれる。 Ø複数のソースを組み合わせて使⽤可能。 • スタイルプロパティ Ø⾊、線幅、透明度など、地図の各要素のスタイルを詳細に設定。 Øズームレベルに応じた動的なスタイル変更も可能。 • JSON形式 Øスタイル指定はJSON形式で記述されます。これにより、プログラム的に⽣成・編集 が容易である。 • クロスプラットフォーム ØAndroid, iOS, Webで共有可能

10 Slippy Map Tilenames仕様の タイルサーバを含む例 • ソースの定義: Øsimple-xyzという名前で、 OpenStreetMapのタイルURLを指 定。 ØSlippy Map Tilenames 仕様であ れば指定可能 • レイヤーの定義 Øbackgroundレイヤーで背景⾊を ライトグレー（#e0e0e0）に設定。 Øosm-tilesレイヤーで定義したXYZ タイルを地図に表⽰。

Azure Mapsのタイル取得APIから表⽰ 11 https://atlas.microsoft.com/map/tile?api-version=2022-08- 01&tilesetId={tilesetId}&zoom={zoom}&x={x}&y={y}

12 GeoJSON 地理空間情報を扱うJSONフォーマット • Feature ØGeometry üPoint, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon ØProperties ü属性情報をKey-Valueで持つ üGeoJSONに対応したSDKによっては特定のKeyを⾃動で解釈できる

13 https://www.geospatial.jp/ckan/dataset/ksj-p29-13 { "type": "Feature", "properties": { "⾏政区域コード": "13112", "公共施設⼤分類": "16", "公共施設⼩分類": "16001", "学校分類": "16001", "名称": "太⼦堂⼩学校", "所在地": "太⼦堂5-7-4", "管理者コード": 3.0 }, "geometry": { "type": "Point", "coordinates": [ 139.666776, 35.646405 ] } } G空間情報センターで無料で配布 されている国⼟数値情報（学 校）ー東京都を使⽤。

14 https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N02-v2_3.html { "type": "Feature", "properties": { "N02_001": "11", "N02_002": "2", "N02_003": "⼭⼿線", "N02_004": "東⽇本旅客鉄道" }, "geometry": { "type": "MultiLineString", "coordinates": [[ [139.7066,35.72145], [139.70596,35.71933] ]] } } 国⼟交通省の国⼟数値情報ダウン ロードサイトで無料で配布されて いる鉄道データから「新幹線」と ⼭⼿線を抽出して使⽤。

15 val data = FeatureCollection.fromJson(geoJson) data.features()?.forEach { feature -> //緯度経度を取得 val geometry = feature.geometry()?.toJson() ?: return@forEach val point = Point.fromJson(geometry) ?: return@forEach val latLng = LatLng(point.latitude(), point.longitude()) bounds.add(latLng) //属性情報を取得 val title = feature.getStringProperty("名称") val place = feature.getStringProperty("所在地") val icon = IconFactory.getInstance(this) .fromBitmap(bitmapBlue) // Markerを追加 val markerOptions = MarkerOptions() .position(latLng) .title(place) .snippet(title) .icon(icon) maplibreMap.addMarker(markerOptions) }

近くの情報のみ取得する場合 ⼤量の地点を⾼速に登録している場合は、GISをサポートしているDBを使⽤した⽅が良い PostgreSQL, MySQL, SQL Server, CosmosDBなど アプリに組み込むものだとSpatia-LiteやSpatia-Roomがある ２点間の距離を求めるAndroidの機能

まとめ 17 • 地理空間情報を扱うサービスはたくさんある ØNative向けSDKを提供してくれているところもたくさんある • 無料で気軽に使えるOSSライブラリとしてMapLibreがある ØMapBoxのフォークなので、MapBoxとの互換性は⾼い ØカスタマイズできるStyleはAndroid, iOS, Webで共有できる • 国⼟交通省やG空間情報センターで配布されている地理空間情 報をGeoJSONで取得すれば⼿軽に地図に表⽰できる Ø最近の地図ライブラリにはGeoJSONに対応したクラスが⽤意されてい る

ご清聴ありがとうございました。 18 @nakasho_dev