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

iOS

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

マップを表示する

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

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

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

このチュートリアルのトピックの背景情報については、Mapping API and location services guide の Maps (2D) とベースマップを参照してください。

前提条件

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

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

ステップ

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

Xcode を使用してシングルビュー iOS アプリを作成し、SDK を参照するように構成します。

Xcode を開き、メニューバーから [File] > [New] > [Project] > [iOS] > [App] > [Next] をクリックします。
- [Choose options for your new project] ウィンドウで、次の値を設定します。
  - Product Name: display_a_map
  - Language: Swift
  - Interface: SwiftUI
  - Organization Identifier: <任意の組織>
- 他のすべてのオプションのチェックを外します。
- [Next] をクリックします。
- プロジェクトを保存する場所を選択して、[Create] をクリックします。
Project Navigator で、display_a_mapApp.swift をクリックします。Editor で、display_a_mapApp struct を右クリックします。 [Refactor]、[Rename…] の順に選択して、構造体の名前を MainApp に変更します。右上の [Rename] ボタンをクリックして、新しい名前を確認します。これにより、影響を受けるすべての領域の構造体(struct)とファイルの名前が変更されます。
Swift Package Manager を使用して API への参照を追加します。

アクセストークンを取得する

ArcGIS Online でホストされているサービス、Web マップ、Web シーンにアクセスできるようにするには、アクセストークンが必要です。まだ作成していない場合は、ArcGIS Location Platform のダッシュボードに移動して、API キーを取得します。作成方法は「API キーの取得」をご覧ください。このチュートリアルでは、ロケーションサービスのベースマップの権限が有効になっている API キーが必要です。

API キーを設定する

Project Navigator で MainApp.swift をクリックします。
エディターで、API を参照するインポートステートメントを追加します。

MainApp.swift
```
import SwiftUI
   
// 追加開始
import ArcGIS
// 追加終了
```
DisplayAMap 構造体にイニシャライザを実装します。アクセストークンを使用して、ArcGISEnvironment の ArcGISEnvironment.apiKey プロパティを設定します。

MainApp.swift
```
import SwiftUI

import ArcGIS

@main
struct MainApp: App {

    // 追加開始
    init() {
        ArcGISEnvironment.apiKey = APIKey("<#アクセストークンを入力#>")
    }
    // 追加終了

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }

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

マップの追加

地形ベースマップレイヤーを含むマップを作成します。マップは、富士山付近が中心になります。

Project Navigator で、ContentView.swift をクリックします。
Editor で、API を参照する import ステートメントを追加します。

ContentView.swift
```
import SwiftUI

// 追加開始
import ArcGIS
// 追加終了
```
デフォルト値を持つ Map タイプの map という名前の @State プロパティラッパーを追加します。 arcGISTopographic ベースマップスタイルで Map を作成し、それを返します。

ContentView.swift
```
struct ContentView: View {

    // 追加開始
    @State private var map = {
        //ベースマップのラベルを日本語で表示します。
        let bsp = BasemapStyleParameters(language: BasemapStyleLanguage.specific(Locale.Language(identifier: "ja")))

        let map = Map(basemap:Basemap(style:.arcGISTopographic,parameters: bsp))
       
        return map
    }()
    // 追加終了

}
```
Map や Scene のような GeoModel は、作成にコストがかかり、状態を保持する可能性があります。GeoModel やその他のモデルオブジェクトが必要に応じてのみ作成されるようにするには、上記のコードのように、@State または @StateObject プロパティラッパーを適用することができます。詳しくは、Managing model data in your app をご覧ください。

マップの initialViewpoint プロパティを、富士山付近の座標を持つ Viewpoint で設定します。

ContentView.swift

struct ContentView: View {

    @State private var map = {
        //ベースマップのラベルを日本語で表示します。
        let bsp = BasemapStyleParameters(language:BasemapStyleLanguage.specific(Locale(languageCode: "ja")))
        let map = Map(basemap:Basemap(style:.arcGISTopographic,parameters: bsp))

        // 追加開始
        map.initialViewpoint = Viewpoint(latitude: 35.360626, longitude: 138.727363, scale: 200000)
        // 追加終了

        return map
    }()

}

マップビューの追加

マップビューは、マップを表示する UI コンポーネントです。また、タッチジェスチャを使用したナビゲーションなど、マップとのユーザーインタラクションも処理します。Xcode と SwiftUI を使用してマップビューを追加します。

body で、前の手順で作成したマップを使用して MapView を作成します。

ContentView.swift

struct ContentView: View {

    @State private var map = {
        //ベースマップのラベルを日本語で表示します。
        let bsp = BasemapStyleParameters(language:BasemapStyleLanguage.specific(Locale(languageCode: "ja")))
        let map = Map(basemap:Basemap(style:.arcGISTopographic,parameters: bsp))

        map.initialViewpoint = Viewpoint(latitude: 35.360626, longitude: 138.727363, scale: 200000)

        return map
    }()

    var body: some View {

        // 追加開始
        MapView(map: map)
        // 追加終了

    }

}

MapView は Apple View プロトコルに準拠しています。

Project Navigator で、MainApp.swift をクリックします。
ContentView に .ignoresSafeArea() 修飾子を追加します。 ContentView の body には MapView が含まれており、この修飾子により、マップビューがセーフエリアを超えてすべての端まで表示されるようになります。

MainApp.swift
```
var body: some Scene {
    WindowGroup {
        ContentView()
            // 追加開始
            .ignoresSafeArea()
            // 追加終了

    }
}
```
body 変数の宣言時の型を Scene から SwiftUI.Scene に変更します。

MainApp.swift
```
// 変更前
var body: some Scene {
// 変更後
var body: some SwiftUI.Scene {
```
<Command + R> を押してアプリを実行します。

富士山を中心とした地形ベースマップレイヤーのマップが表示されます。マップビューをピンチ、ドラッグ、およびダブルタップして、マップを操作します。

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

Web マップを表示する

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

マップを表示するのステップで作成したプロジェクトの ContentView.swift を開き、map を下記のように書き換えます。

ContentView.swift

struct ContentView: View {

    @State private var map = {

        let portalItem = PortalItem(
        portal: .arcGISOnline(connection: .anonymous),
        id: PortalItem.ID("Web マップの ID")!
    )
               
    let map = Map(item: portalItem)
           
    return map
           
    }()

}

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

iOS

マップを表示する

前提条件

ステップ

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

アクセストークンを取得する

API キーを設定する

マップの追加

マップ ビューの追加

Web マップを表示する

マップビューの追加