Slide 1

Slide 1 text

Mapsuiで地図表示 2024/12/21 .NET Conf 2024 .NETラボ 2024年12月 当日LT NTTテクノクロス 中島進也(なかしょ)

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

2024/6/22 .NETラボ 2024年6月 当日LT NTTテクノクロス 中島進也(なかしょ) MAUIで Azure Mapsの表示 MAUIで Azure Mapsの表示

Slide 4

Slide 4 text

MAUIでの地図表示 4 • Maui Maps(Maui 公式の地図機能) ➢https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/controls/map • ArcGIS Maps SDK for .NET ➢https://www.esrij.com/products/arcgis-maps-sdk-for-dotnet/ • ThinkGeo Mobile Maps ➢https://thinkgeo.com/mobile-maps • Ignite UI for Blazor Map ➢https://jp.infragistics.com/products/ignite-ui- blazor/blazor/components/geo-map • Mapbox SDK for .NET MAUI ➢https://github.com/tuyen-vuduc/mapbox-maui • MapsUI ➢https://github.com/Mapsui/Mapsui .NET9 に対応 .NET9 に対応

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Mapsui 6 • 様々な.NETのフレームワークに対応したMapコンポーネント ➢MAUI, WPF, Avalonia, Uno, Blazor, WinUI, Eto, .NET Android and .NET iOS • OpenStreeetMapの表示に対応 • SkiaSharpにより地図描画を実現 • NetTopologySuiteによる2次元線形ジオメトリをサポート • BruTileによるタイルサービスへのアクセスをサポート ➢OpenStreetMaps以外のタイルサービスにも対応可能

Slide 7

Slide 7 text

internal static class AzureMap { public static IPersistentCache? DefaultCache; private static readonly BruTile.Attribution _azureMapsAttribution = new( //著作権情報を設定 “© TomTom”, “https://www.tomtom.com/legal/en_us/copyrights/”); public static TileLayer CreateTileLayer(string? userAgent = null) { userAgent ??= $“user-agent-of-{Path.GetFileNameWithoutExtension(System.AppDomain.CurrentDomain.FriendlyName)}”; return new TileLayer(CreateTileSource(userAgent)) { Name = “AzureMaps” }; } private static HttpTileSource CreateTileSource(string userAgent) { return new HttpTileSource(new GlobalSphericalMercator(), “https://atlas.microsoft.com/map/tile?subscription-key=xxxxxxxxx&api-version=2022-08- 01&tilesetId=microsoft.base.road&zoom={z}&x={x}&y={y}”, //Azure MapsのTilemapAPI を指定 name: "AzureMaps", attribution: _azureMapsAttribution, configureHttpRequestMessage: (r) => r.Headers.TryAddWithoutValidation("User-Agent", userAgent), persistentCache: DefaultCache); } } MapsuiでAzureMapsのTilemap APIから地図を取得

Slide 8

Slide 8 text

private void InitializeMap() { var mapControl = new Mapsui.UI.Maui.MapControl(); // 地図タイルレイヤーを追加 var tileLayer = AzureMap.CreateTileLayer(); mapControl.Map?.Layers.Add(tileLayer); var center = CreateMPoint(139.7405407, 35.6265801); // この緯度経度は? // Navigatorを使用してマップの中心点とズームレベルを設定 mapControl.Map?.Navigator.CenterOn(center); mapControl.Map?.Navigator.ZoomTo(2); Content = mapControl; } //座標をWebメルカトル座標系に変換し、Mapsui.MPointオブジェクトを作成 private MPoint CreateMPoint(double longitude, double latitude) { var sphericalMercatorCoordinate = SphericalMercator.FromLonLat(longitude, latitude); return new MPoint(sphericalMercatorCoordinate.x, sphericalMercatorCoordinate.y); } 単純な地図表示

Slide 9

Slide 9 text

9 • 品川グランドセントラル タワー ➢緯度: 35.6265801 ➢経度:139.7405407 Azure Mapsを表示

Slide 10

Slide 10 text

// マーカーレイヤーを追加 var markerLayer = new MemoryLayer { Name = "Markers" }; var features = new List(); var marker1 = new PointFeature(CreateMPoint(139.7405407, 35.6265801)); marker1.Styles.Add(CreateMarkerStyle(Mapsui.Styles.Color.Red)); marker1.Styles.Add(CreateLabelStyle("日本マイクロソフト")); features.Add(marker1); var marker2 = new PointFeature(CreateMPoint(139.743045, 35.628471)); marker2.Styles.Add(CreateMarkerStyle(Mapsui.Styles.Color.Blue)); marker2.Styles.Add(CreateLabelStyle("個室ダイニング 天空")); features.Add(marker2); markerLayer.Features = features; mapControl.Map?.Layers.Add(markerLayer); ~ ~ ~ ~ ~ ~ ~ ~ // マーカーのスタイルを指定 private IStyle CreateMarkerStyle(Mapsui.Styles.Color color){~ ~ ~ ~} // ラベルのスタイルを指定 private IStyle CreateLabelStyle(string text){~ ~ ~ ~} 地図にマーカーを追加

Slide 11

Slide 11 text

11 Markerを表示 文字化けしちゃった...

Slide 12

Slide 12 text

文字化け解消できない 12

Slide 13

Slide 13 text

まとめ 13 • MAUIで地図表示できるライブラリは色々ある • .NET9に対応しているのはMaui MapsとMapsui ➢商用ライブラリはLTSにしか対応しないってのもあるよね... • OSSで気軽に使えるのはMapsui ➢Azure MapsのTilesも読み込める

Slide 14

Slide 14 text

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