ArcGIS for Developers 開発リソース集

シンプルな地図アプリの作成 (JavaScript)

JavaScript API を用いた Web ブラウザー向け地図アプリの作成方法を紹介します。

サンプルプロジェクトのダウンロード

このリポジトリ（arcgis-dev-resources）には開発を試してみたい方向けのサンプルコードが含まれています。ダウンロードする際の方法は 2 通りあります。

リポジトリをご自身のアカウントに Fork（複製）
1. GitHub にログインして、arcgis-dev-resources ページを開いて [Fork] をクリックすると、ご自身のアカウントに同じリポジトリが作成されます。
2. Fork 後はご自身のローカルマシンにクローンを作成します。

zip ファイルでダウンロード（※GitHub アカウントをお持ちでない方向け）

arcgis-dev-resources ページを開いて [Download ZIP] をクリックするとプロジェクトファイル一式が手に入ります。

地図の表示

まずはダウンロードしたサンプルコードを実行してみましょう。

ダウンロードしたサンプルコード（arcgis-dev-resources/startup/javascript/4.0/map/index.html）を Web ブラウザーにドラッグ＆ドロップします。

※Web サーバーをお持ちの方はサンプルコードを Web サーバーにホストしてアクセスすることを推奨します。http://localhost/arcgis-dev-resources/startup/javascript/4.0/map/index.html のように localhost を指定してアクセスできます。
この状態では地図は表示されません。サンプルコードをテキストエディターで開いてみましょう。
26 行目にある以下のコードの <Web マップ ID> と記載されている箇所に Web マップの作成で作成した Web マップ ID を上書きします。このコードで Web マップを参照します。
```
// Web マップの参照
   var map = new WebMap({
  portalItem: {
    id: "<Web マップ ID>"
  }
});
```
まだ Web マップを作成しておらず、すぐに試してみたい方はサンプル Web マップをご利用ください。
31～34 行目のコードは地図のビューを作成しています。先のコードで参照した Web マップを地図データのソースとして、実際に地図の表示を行います。2D 地図は MapView、3D 地図は SceneView を使用します。
2D の場合
```
// 地図ビュー
var view = new MapView({
  map: map,
  container: "viewDiv"
});
```
3D の場合
```
// 地図ビュー
var view = new SceneView({
  map: map,
  container: "viewDiv"
});
```
このように地図のビューを切り替えるだけで簡単に 2D と 3D を使い分けることができます。
Web アプリを実行すると、以下のように地図が表示されます。

2D

3D

検索機能の追加

検索機能の実装方法はいくつかありますが、ここではもっとも簡単な方法をご紹介します。検索機能の実装には esri/widgets/Search モジュール（検索ウィジェット）を使用します。検索ソースにはサンプル Web マップに含まれる東京都 23 区のデータを使用します。

検索ウィジェットは住所検索/属性検索機能を組み込んだ文字入力フォームの UI を提供します。

ArcGIS API for JavaScript から使用したいモジュールを追加します。モジュールのインポートは require 関数の第一引数に入力される配列内で行います。配列内に検索機能の実装に必要なモジュールを追加します。
```
require(["esri/views/MapView", "esri/WebMap", "esri/widgets/Search", "esri/layers/FeatureLayer", "dojo/domReady!"],
function(MapView, WebMap, Search, FeatureLayer) {
  ...
});
```
以下は検索機能に必要なモジュール一覧です。
- "esri/widgets/Search": 検索ウィジェット
- "esri/layers/FeatureLayer": フィーチャレイヤー（オプション）
フィーチャレイヤーは検索ソース、情報テンプレートは検索結果の属性表示を設定するために利用します。

ここで以下の点に注意してください。
- 配列の一番最後のモジュールは必ず "dojo/domReady!" になるようにしてください
- require 関数の第ニ引数の無名関数の引数にはモジュールに対応したクラス名（任意）を定義しますが、これは配列内のモジュールの順序と対応している必要があります
検索ウィジェット作成のスクリプトを記述します。
```
// 検索ウィジェット
var search = new Search({
    view: view,
    allPlaceholder: "検索キーワードの入力",
    sources: [{
      featureLayer: new FeatureLayer({
        url: "//services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/tokyo_23/FeatureServer/0",
        popupTemplate: {
          title: "東京都 {Name}",
          overwriteActions: true
        }
      }), // 検索ソースとなるフィーチャ レイヤー
      placeholder: "検索キーワードの入力", // プレースホルダー
      searchFields: ["Name"], // 検索対象となる属性フィールド
      displayField: "Name", // 検索結果のポップアップに表示する属性フィールド
      outFields: ["*"], // 結果として返す属性フィールド
      name: "東京都", // 検索ソースの名前
      exactMatch: false
    }]
});

search.startup();
```
"esri/widgets/Search" モジュールが定義する Search クラスは require 関数内でのみ動作します。

対応するマップを指定するための map プロパティにはマップのオブジェクトを、検索ソースを指定するための sources プロパティには検索ソースの情報を定義します。検索ソースがない状態でも ArcGIS のクラウドサービスが提供する住所検索サービスが標準で含まれています。

sources.featureLayer には検索ソースとなるレイヤーを定義しますが、必ずしも地図上に表示されているレイヤーを使う必要はありません。サンプルはマップオブジェクトに存在しない別のレイヤーを検索ソースとして利用します。

フィールド名の確認は次の手順で紹介します。
検索対象とするレイヤーの詳細ページにて、[レイヤー] の項目から対象とするレイヤーをクリックして [サービスの URL] を選択します。
[Fields] という項目にレイヤーのフィールド情報のリストが表示されているので、検索対象とするフィールド名をコピーして searchFields の配列に追加します。

検索結果のポップアップに表示する属性情報として利用したい場合は displayField にも入力してください。
最後に検索ウィジェットを地図ビュー上に配置します。
```
// 地図ビューに検索ウィジェットを配置
view.ui.add(search, {
  position: "top-right"
});
```
positon プロパティで地図ビュー上の四隅への配置位置が指定できます。
Web アプリを実行すると、以下のように地図上に検索ウィジェットが表示され、設定した検索ソースでの検索が可能になります。

アプリの動作が確認できたら ArcGIS の OAuth 認証について学びましょう！

サンプル プロジェクトのダウンロード

地図の表示

検索機能の追加

サンプルプロジェクトのダウンロード