モバイルで地理空間情報 2024/5/17 YUMEMI.grow Mobile #13 NTTテクノクロス 中島進也（なかしょ）

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

http://xpjug.com/ 2024年 9月28日(土) 開催

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

色々な地理空間情報サービス 地図サービス 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/

データ管理 空間演算 タイムゾーン Creator 天気 画像 ルート指定 位置情報 検索 交通情報 マップ Azure Mapsのサービス 6 URL: https://azure.microsoft.com/ja-jp/products/azure-maps

URL: https://qiita.com/nakasho-dev/items/ffb3ff7323edab0b1b68

あ．．． 8 URL: https://azure.microsoft.com/en-us/updates/azure-maps-native-sdk-for-android-and-ios-will-be-retired-on-31-march-2025-transition-to-use-web-view-of-azure-maps-web-sdk/

WebではなくNativeで実現したいので Nativeで実装できるSDKを求めて．．．

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

MapLibreのプロダクト 11 • 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で 12 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() }

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

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

15 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空間情報センターで無料で配布 されている国土数値情報（学 校）ー東京都を使用。

16 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) }

NativeSDKの3D対応状況 17 • Terrain3DにTypeScript SDKは対応している • Native SDKにも対応が検討されているが資金が不足とのこと • https://github.com/maplibre/maplibre-native/issues/252 • Terrain3Dに対応すると、Plateauの日本全国の地形データが使 えるかも？

まとめ 18 • 地理空間情報を扱うサービスはたくさんある ➢Native向けSDKを提供してくれているところもたくさんある • 無料で気軽に使えるOSSライブラリとしてMapLibreがある ➢MapBoxのフォークなので、MapBoxとの互換性は高い • NativeSDKは３D関連には弱い、今後に期待

ご清聴ありがとうございました。 19