ArcGIS Developers 開発リソース集 > スタートアップガイド > アプリ開発 > .NET

.NET

出典：ArcGIS Maps SDK for .NET - Tutorials - Display a map

マップを表示する

このチュートリアルでは ArcGIS Maps SDK for .NET を使用して、マップとベースマップレイヤーを表示する方法を紹介します。

マップには、地理データのレイヤーが含まれています。マップには、ベースマップレイヤーと、オプションで 1 つ以上のデータレイヤーを追加できます。マップビューを使用し、場所とズームレベルを設定することで、マップの特定の領域を表示できます。

このチュートリアルでは、地形ベクタータイルベースマップレイヤーを使用して、富士山付近を表示する地図を作成します。

前提条件

このチュートリアルを実施するには、以下が必要です。

API キーにアクセスするための ArcGIS 開発者アカウント。アカウントをお持ちでない場合は、サインアップ (無料) してください。アカウントの作成方法は「開発者アカウントの作成」をご覧ください。
開発環境がシステム要件を満たしていることを確認します。

必要に応じて、ArcGIS Maps SDK for .NET をインストールして、Visual Studio プロジェクトテンプレート (Windows のみ) とオフラインにコピーされた NuGet パッケージを利用することもできます。

ステップ

新しい Visual Studio プロジェクトを作成する

ArcGIS Maps SDK for .NET は、Windows Presentation Framework (WPF)、Universal Windows Platform (UWP)、Windows UI Library (WinUI)、.NET MAUI 向けのアプリをサポートしています。このチュートリアルの説明は、Visual Studio for Windows を使用して .NET 6 WPF プロジェクトを作成することを目的としています。

注: .NET API アプリを開発できるプラットフォームは、開発環境に応じて異なります。例えば、Visual Studio for Mac を使用する場合、WP Fと UWP のプロジェクトは利用できません。詳しくは、システム要件をご覧ください。

Visual Studio を起動し、新しいプロジェクトを作成します。
- Visual Studio の開始画面で、[新しいプロジェクトの作成] をクリックします
- C# 用の「WPF アプリケーション」テンプレートを選択します。テンプレートが表示されていない場合は、テンプレートの検索テキストボックスに「WPF アプリケーション」と入力すると、テンプレートを見つけることができます。
- [次へ] をクリックします。
- [新しいプロジェクトを構成します] 画面で必要な値を入力します。
  - プロジェクト名: DisplayAMap
  - 場所: 任意のフォルダーを選択
- [次へ] をクリックします。
  - フレームワークで「.NET 6.0 (長期的なサポート)」を選択します。
- [作成] をクリックしてプロジェクトを作成します。

Visual Studio for Windows で開発する場合、ArcGIS Maps SDK for .NET には、サポートされる各 .NET プラットフォーム用のプロジェクトテンプレートセットが用意されています。これらのテンプレートには、基本的な Model-View-ViewModel (MVVM) アプリに必要なすべてのコードが含まれています。ArcGIS Maps SDK for .NET Visual Studio 拡張機能をインストールして、テンプレートを Visual Studio（Windows のみ）に追加します。詳細については、インストールガイドを参照してください。

このチュートリアルの手順は、WPF for .NET 6（Visual Studio 2022 以降が必要）を使用してアプリケーションを作成することに特化しています。サポートされている他の .NET プラットフォームでアプリを完成させるには、ArcGIS Maps SDK for .NET プロジェクトテンプレートの 1 つからプロジェクトを作成できます。Visual Studio テンプレートの 1 つから開始する場合、ガイドに記載されているコードとプロジェクトに含まれるコードにいくつかの違いがあることがあります。

API の参照を追加する

注: ArcGIS Maps SDK for .NET プロジェクトテンプレートの 1 つからプロジェクトを作成した場合、必要な NuGet パッケージが既にプロジェクトに追加されています。

NuGet パッケージをインストールして、API への参照を追加します。
- ソリューションエクスプローラーで、[依存関係] を右クリックし、[NuGet パッケージの管理] を選択します。
- [NuGet パッケージマネージャー] ウィンドウで、[パッケージソース] に「nuget.org」が選択されていることを確認します。
- [参照] タブを選択して、[検索] テキストボックスに「ArcGIS Maps SDK」と入力します。
- 検索結果から、プラットフォームに適したパッケージを選択します。このチュートリアルでは「Esri.ArcGISRuntime.WPF」NuGet パッケージを選択します。
- [バージョン] にパッケージの「最新の安定版…」が選択されていることを確認します。
- [インストール] をクリックします。
- NuGet は、パッケージの依存関係または競合を自動的に解決します。デフォルトでは、[変更のプレビュー] ダイアログが表示されます。変更を確認し [OK] をクリックしてパッケージのインストールを続行します。
- [ライセンスへの同意] ダイアログでライセンス条項を確認し、[同意する] をクリックしてパッケージをプロジェクトに追加します。
- Visual Studio の [出力] ウィンドウで、パッケージが正常にインストールされたことを確認します。ターゲットの Windows バージョンに関するエラーが表示された場合は、次の手順で修正します。
- [NuGet パッケージマネージャー] ウィンドウを閉じます。
Visual Studio エラーリストに「The ‘Esri.ArcGISRuntime.WPF’ nuget package cannot be used to target ‘net6.0-windows’. Target ‘net6.0-windows10.0.19041.0’ or later instead.」のようなエラーが表示される場合があります。その場合は、次の手順に従って対処してください。
- ソリューションエクスプローラーで、ツリービューの DisplayAMap プロジェクトエントリを右クリックし、[プロジェクトファイルの編集] を選択します。
- TargetFramework 要素を “net6.0-windows10.0.19041.0”（またはそれ以上）で更新します。
```
<PropertyGroup>
<OutputType>WinExe</OutputType>
<TargetFramework>net6.0-windows10.0.19041.0</TargetFramework>
<UseWPF>true</UseWPF>
</PropertyGroup>
```
- プロジェクトファイル (DisplayAMap) を保存して閉じます。

API キーを取得する

ArcGIS Online でホストされているサービス、Web マップ、および Web シーンにアクセスするには API キーが必要です。まだ取得していない場合は、ArcGIS Developers のダッシュボードに移動してAPIキーを取得します。

アプリで API キーを設定する

ソリューションエクスプローラーで、App.xaml のノードを展開し、App.xaml.cs をダブルクリックして開きます。

App クラスで、OnStartup() 関数のオーバーライドを追加して、ArcGISRuntimeEnvironment で ApiKey プロパティを設定します。

注: API キーは、このチュートリアルの便宜上、コードに直接格納されていますが、ソースコードに API キーを格納することは、ベストプラクティスではありません。

App.xaml.cs

public partial class App : Application
{
    // 追加開始
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);
        // 注: API キーをソース コードに保存することはベスト プラクティスではありません。
        // API キーは、チュートリアルの便宜上、ここで参照されています。
        Esri.ArcGISRuntime.ArcGISRuntimeEnvironment.ApiKey = "API キー";
    }
    // 追加終了
}

App.xaml.cs ファイルを保存して閉じます。

アプリロジックを保存するビューモデルを作成する

このアプリは、以降のすべてのチュートリアルで使用する基盤を構築するためのものです。堅固な設計で構築することをお勧めします。

Model-View-ViewModel (MVVM) デザインパターンは、ユーザーインターフェイス要素 (および関連するコード) をアプリの基礎となるロジックから分離するアーキテクチャを提供します。このパターンでは、「モデル」はアプリで消費されるデータを表し、「ビュー」はユーザーインターフェースであり、「ビューモデル」にはモデルとビューをバインド (結合) するロジックが含まれます。このようなパターンに必要な追加のフレームワークは、小規模なプロジェクトでは大変な作業に思えるかもしれませんが、プロジェクトの複雑さが増すにつれて、堅固な設計を行うことでコードの保守性と柔軟性が大幅に向上します。

MVVM で設計された ArcGIS アプリでは、通常、マップビューがメインのビューコンポーネントになります。クラスの多くは、モデルの役割を果たします (データをマップ、レイヤー、グラフィックス、フィーチャなどとして表します)。ビューモデルコンポーネントには、ArcGIS オブジェクトを操作するためのロジックを追加したり、ビューに表示するためのデータを提供したりするため、記述するコードの多くはここになります。

注: すべての ArcGIS Maps SDK for .NET プロジェクトテンプレートは、MVVM デザインパターンを使用しています。

プロジェクトのビューモデルを定義する新しいクラスを追加します。
- [プロジェクト] メニュー > [クラスの追加…] をクリックします。
- 新しいクラスに MapViewModel.cs と名前を付けます。
- [追加] をクリックして新しいクラスを作成し、プロジェクトに追加します。
- 新しいクラスが VisualStudio で開きます。

必要な using ステートメントをビューモデルに追加します。

MapViewModel.cs

using System;
using System.Collections.Generic;
using System.Text;

// 追加開始
using Esri.ArcGISRuntime.Mapping;
using System.ComponentModel;
using System.Runtime.CompilerServices;
// 追加終了

MapViewModel クラスに INotifyPropertyChanged インターフェイスを実装します。

このインターフェイスは、ビューモデルのプロパティが変更されたことをクライアント (ビュー) に通知するために使用される PropertyChanged イベントを定義します。

MapViewModel.cs
```
namespace DisplayAMap
{
    // 変更前
    // internal class MapViewModel
    // 変更後
    internal class MapViewModel : INotifyPropertyChanged
    {
    }
}
```

MapViewModel クラス内に、PropertyChanged イベントを実装するコードを追加します。ビューモデルのプロパティが変更されると、OnPropertyChanged の呼び出しにより、このイベントが発生します。

MapViewModel.cs

class MapViewModel : INotifyPropertyChanged
{
    // 追加開始
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    // 追加終了
}

ビューモデルに Map オブジェクトを公開する Map という新しいプロパティを定義します。プロパティが設定されると、OnPropertyChanged を呼び出します。

MapViewModel.cs

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    // 追加開始
    private Map? _map;
    public Map? Map
    {
        get { return _map; }
        set
        {
            _map = value;
            OnPropertyChanged();
        }
    }
    // 追加終了
}

MapViewModel クラスに SetupMap という関数を追加します。この関数は、新しいマップを作成して Map プロパティを設定します。マップは、地形ベクタータイルベースマップを使用します。

MapViewModel.cs

    private Map _map;
    public Map Map
    {
        get { return _map; }
        set
        {
            _map = value;
            OnPropertyChanged();
        }
    }

    // 追加開始
    private void SetupMap()
    {
        //地形 ベクタータイル ベースマップを使用して新しいマップを作成します。
        Map = new Map(BasemapStyle.ArcGISTopographic);
    }
    // 追加終了
}

MapViewModel が新規にインスタンス化された際に、SetupMap 関数を呼び出すコンストラクターを追加します。 MapViewModel newMapVM = new MapViewModel(); のようなコードを書くと、クラスコンストラクターが実行されます。これはクラスが初期化された時に実行する必要があるコードを追加するのに良い場所です。

MapViewModel.cs

class MapViewModel : INotifyPropertyChanged
{
    // 追加開始
    public MapViewModel()
    {
        SetupMap();
    }
    // 追加終了

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

これで MapViewModel が完成しました。

MVVM デザインパターンを使用する利点は、ビューモデルのコードを再利用できることです。API はプラットフォーム間でほぼ標準的な API サーフェスを持っているため、１つのアプリ用に作成したビューモデルのコードは、通常、サポートされているすべての .NET プラットフォームで動作します。

次に、プロジェクトにビューを設定して、ビューモデルを使用します。

マップビューを追加する

MapView コントロールは、マップを表示するために使用します。マップビューをプロジェクトの UI に追加し、MapViewModel で定義したマップを使用するように設定します。

必要な XML 名前空間とリソースを追加します。

MainWindow.xaml を開き、XAML ビューに切り替えます。
既存の名前空間の宣言内に、ArcGIS コントロールの esri XML 名前空間を追加します。
MapViewModel インスタンスを静的リソースとして定義する XAML を追加します。

MainWindow.xaml

<Window x:Class="DisplayAMap.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DisplayAMap"

        <!--追加開始-->
        xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013"
        <!--追加終了-->

        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <!--追加開始-->
    <Window.Resources>
        <local:MapViewModel x:Key="MapViewModel" />
    </Window.Resources>
    <!--追加終了-->

    <Grid>
    </Grid>

MapView コントロールを MainWindow.xaml に追加し、MapViewModel にバインドします。
- 「MainMapView」という名前の MapView コントロールを定義する XAML を追加します。
- データバインディングを使用して、MapViewModel リソースを使用し MapView コントロールの Map プロパティを設定します。
MainWindow.xaml
```
<Window.Resources>
    <local:MapViewModel x:Key="MapViewModel" />
</Window.Resources>

<Grid>

    <esri:MapView x:Name="MainMapView" Map="{Binding Map, Source={StaticResource MapViewModel}}" />

</Grid>
```

マップビューの視点を設定する

ウィンドウの読み込み時にマップビューの視点 (ビューポイント) を設定します。富士山を中心にマップを表示するための、位置と縮尺を定義します。

MainWindow.xaml.cs を開きます。これは、MainWindow.xaml に関連付けられたコードと、それが定義するユーザーインターフェイス要素を含むコードビハインドファイルです。

必要な using ステートメントを追加します。

MainWindow.xaml.cs

using System.Windows.Navigation;
using System.Windows.Shapes;

// 追加開始
using Esri.ArcGISRuntime.Geometry;
using Esri.ArcGISRuntime.Mapping;
// 追加終了

namespace DisplayAMap
{

MainWindow のコンストラクターで、新しい Viewpoint を定義するコードを追加し、マップビューに適用します。

MainWindow.xaml.cs

public MainWindow()
{
    InitializeComponent();

    // 追加開始
    // マップの中心位置として設定する MapPoint を作成
    MapPoint mapCenterPoint = new MapPoint(138.727363, 35.360626, SpatialReferences.Wgs84);
    // マップの視点を決める Viewpoint を設定
    MainMapView.SetViewpoint(new Viewpoint(mapCenterPoint, 200000.0));
    // 追加終了
}

アプリを実行する

[デバッグ] メニュー > [デバッグの開始] をクリックして (またはキーボードの [F5] キーを押して) アプリを実行します。

富士山を中心に、地形ベクタータイルベースマップレイヤーが追加されたマップが表示されます。マップビュー上でマウスホイールをダブルクリック、ドラッグ、およびスクロールして、マップを操作します。

完成版のプロジェクトはこちらからダウンロードできます (マップの表示場所は本チュートリアルで設定した場所とは異なります)。

Web マップを表示する

「Web マップの作成」のガイドで Web マップを作成している場合は、作成した Web マップも基本的に同じステップで表示できます。

Visual Studio で、マップを表示するのステップで作成したプロジェクトの MapViewModel.cs を開きます。
必要な using ステートメントを追加します。

MapViewModel.cs
```
using Esri.ArcGISRuntime.Portal;
using System.Threading.Tasks;
```

MapViewModel.cs 内の SetupMap 関数を下記のように書き換えます。

MapViewModel.cs

private async Task SetupMap()
{
    // ArcGIS ポータルを作成します。URI を指定しない場合は "www.arcgis.com" を使用します。
    ArcGISPortal portal = await ArcGISPortal.CreateAsync();

    // アイテム ID を使用して、Web マップをポータル アイテムとして取得します。
    PortalItem mapItem = await PortalItem.CreateAsync(portal, "Web マップの ID");

    // ポータル アイテムからマップを作成します。
    Map map = new Map(mapItem);

    // マップを表示するには、マップ ビューにバインドされている MapViewModel.Map プロパティを設定します。
    this.Map = map;
}

アプリの動作が確認できたら ArcGIS のセキュリティと認証について学びましょう！

.NET

マップを表示する

前提条件

ステップ

新しい Visual Studio プロジェクトを作成する

API の参照を追加する

API キーを取得する

アプリで API キーを設定する

アプリ ロジックを保存するビュー モデルを作成する

マップ ビューを追加する

マップ ビューの視点を設定する

アプリを実行する

Web マップを表示する

アプリロジックを保存するビューモデルを作成する

マップビューを追加する

マップビューの視点を設定する