ArcGIS API for JavaScript スタートアップガイド

(1)

ArcGIS API for JavaScript

スタートアップガイド

(2)

はじめに

このスタートアップガイドについて

このスタートアップガイドは初めて ArcGIS API for JavaScript を使用して Web マッピングアプリケーションを構築する開発者の方に最も基本的な開発手順の流れを紹介するものです。本書をお読みいただくことで、ArcGIS API for JavaScript を使用した Web マッピングアプリケーション開発の基礎を理解することができます。

ArcGIS API for JavaScript とは

ArcGIS API for JavaScript とは ArcGIS Web Mapping の一つであり、 ArcGIS for Server や ArcGIS Online などのオンライン GIS リソースやジオプロセシングモデルなどの GIS タスクを組み込んだブラウザベースの GIS アプリケーションを公開したり、既に公開されている Web サイトの中に容易に地図や GIS 機能を埋め込んだりすることができる API です。

このガイドでは ArcGIS API for JavaScript を用いた Web マッピングアプリケーションの開発について紹介します。

ArcGIS Web Mapping の詳細は下記をご参照ください。

(6)

ArcGIS API for JavaScript の開発環境

ArcGIS API for JavaScript は JavaScript ベースの API であるため、テキストエディタさえあれば Web マッピングアプリケーションを開発することができます。また JavaScript ベースのアプリケーションを開発するためのさまざまな統合開発環境を利用することも可能です。主な開発環境：  テキストエディタ（例：Windows 付属のメモ帳）  無償で利用可能な JavaScript 統合開発環境  Aptana Studio

 Visual Studio Expression  Eclipse

ArcGIS API for JavaScript がサポートする最新の動作環境につきましては下記をご参照ください。

http://www.esrij.com/products/arcgis/developer/arcgis-web-mapping/arcgis -api-for-javascript/environments/

(7)

Web マッピングアプリケーションの開発

ArcGIS API for JavaScript によるアプリケーションの作成

ここでは、ArcGIS API for JavaScript を使用して、Web マッピングアプリケーションを作成する手順を解説します。作成するアプリケーションには 1 つのマップの中に 2 つのレイヤが追加され、さらにレイヤのプロパティを設定します。開発環境は Windows に付属するメモ帳を使用します。

(8)

開発環境を起動し、HTML の基本部分を記述する まず、開発環境であるメモ帳を起動することから開始します。 1. Windows の [スタート] > [すべてのプログラム] > [アクセサリ] > [メモ帳] とたどり、メモ帳を起動します。 2. テキスト入力部分に以下のコードを記述します。これは HTML ページの基本部分です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

(9)

スタイルと API の参照を宣言する

HTML ページの基本部分を記述したら、スタイルシートおよび API への参照設定を行います。

1. <HEAD> タグ内の <TITLE> タグの下に以下のコードを記述して、スタイルシートを参照します。

href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo /dijit/themes/tundra/tundra.css">

(10)

参照するスタイルシートは Dojo のテーマで、主にマップの <DIV> タグ内に配置するグラフィックエレメントのために使用されますが、HTML ページのいたるところで使用することもできます。”tundra” スタイルに加えて、”claro”, ”soria”, “nihilo” スタイルを使用することもできます。この場合、”tundra” の部分を希望のスタイルに置き換えます。

2. 以下のコードを記述して、ArcGIS API for JavaScript ファイルの場所を参照します。

src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"> </script>

末尾に記述されているバージョン番号は ArcGIS API for JavaScript の現在のバージョン（最新バージョン）に更新する必要があります。

(11)

マップを作成し、レイヤを追加する 次にマップやタスクとともに動作する JavaScript コードを記述します。このサンプルでは、マップが初期化され、レイヤが追加されています。記述するコード量にかかわらず、このスクリプトは常に以下の 3 つのセクションを順番に含みます。 A) パッケージを参照する B) 初期化およびその他関数を追加する C) ready イベント中に実行する関数を指定する 1. 以下のコードを記述して、”esri.map” パッケージを参照します。 <script type="text/javascript"> dojo.require("esri.map"); </script>

“dojo.require()” は <script> タグのインクルードに相当し、JavaScript ページ内にリソースをインポートします。マップを表示する際に必要となるパッケージは “esri.map” です。パッケージ名は常に小文字となります。

(12)

2. 次に、dojo.require(“esri.map”) の下に以下のコードを記述して 2 つの変数を初期化し、続いて ”init” という名前の初期化関数を作成します。変数は初期化関数の中でマップとレイヤを定義するために使用します。

var myMap, myTiledMapServiceLayer; function init() {

}

3. 次に、初期化関数の中で Map クラスおよびそのコンストラクタを使用して新規マップを作成します。

(13)

 “esri.Map” は Map クラスへの参照です。クラス名は常に先頭が大文字です  “mapDiv” は HTML ページ内のマップを含む <DIV> タグ内の参照名です 4. 次に、ArcGISTiledMapServiceLayer コンストラクタを使用して、ArcGIS Online から提供されている世界道路地図サービスを参照するキャッシュマップサービスレイヤを作成します。引数として指定する URL はこのサービスの REST エンドポイントです。このエンドポイントは ArcGIS for Server の Services Directory を使用して生成できるサービスへの固有の参照です。 myTiledMapServiceLayer = new

esri.layers.ArcGISTiledMapServiceLayer

("http://server.arcgisonline.com/ArcGIS/rest/services/World_Stre et_Map/MapServer");

※Services Directory についてはトピックス「マップサービスの REST エ

(14)

5. レイヤが初期化されたら、addLayer メソッドを使用してマップに追加します。 myMap.addLayer(myTiledMapServiceLayer);

これで初期化関数が完成しました。このサンプルコードには init() という名前のただ一つの関数のみが含まれていますが、別の HTML ページでは init() 関数に加えていくつかの関数を含んでいる可能性があります。

6. 最後に ready イベントを初期化関数の後に for Server 指定します。そのイベントへ渡す引数は初期化関数の名前で、今回の場合は “init” になります。 dojo.ready(init);

(15)

この関数は HTML が完全にロードされるまでスクリプトの実行を保留します。これは重要なコンセプトです。なぜなら、マップはそのプロパティを取得したりイベントを正しく動作させたりさせる前にそのオブジェクトを取得しておく必要があるためです。 HTML BODY コードを作成する 処理の部分が完成したら、次に HTML ページの外観を作成します。この例では、マップの表示のみが行われます。 1. <BODY> タグ内に以下のコードを記述してマップを定義します。 <div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"></div>

<DIV> タグの id である “mapDIV” は Map コンストラクタ内で設定した同じ変数を参照します。また class=”tundra” への参照も <DIV> タグ内に追加されていることが分かります。これは <HEAD> セクションから

(16)

アプリケーションを実行する 以上でアプリケーションが完成しました。実際に Web ブラウザを起動して実行してみます。 1. メモ帳の [ファイル] > [名前をつけて保存] をクリックし、拡張子を “.html” としてファイルを保存します。その際にファイルの種類を ”すべてのファイル” 、文字コードを “UTF-8” に変更します。 2. 保存したファイルを Web サーバのルートディレクトリ（IIS の初期設定では「C:\inetpub\wwwroot」-フォルダ）に配置します。

(17)

3. Web ブラウザを起動し、http://<サーバ名>/<ファイル名>.html と入力してアプリケーションを実行します。 4. Web マッピングアプリケーションが正常に開始します。この時点でマウスによるドラッグやマウスホイール、およびキーの組み合わせで地図の操作が可能です。また左端にあるスライダバーで表示縮尺を変更することもできます。

(18)

マップ操作に関する主なショートカット機能：ドラッグ移動マウスホイールを前方に回転拡大マウスホイールを後方に回転縮小 SHIFT + ドラッグ拡大 SHIFT + CTRL + ドラッグ縮小 SHIFT + クリッククリックした位置を中心に表示ダブルクリッククリックした位置を中心に拡大矢印キー（上下左右）キーの方向へ移動 5. Web マッピングアプリケーションが正常に実行されていることが確認できたら Web ブラウザを閉じます。

(19)

ローカルの ArcGIS for Server サービスを追加する

ArcGIS for Server ユーザは、ArcGIS Online から提供されている背景地図のマップサービスの上に、自身で公開している ArcGIS for Server マップサービスを重ね合わせることができます。ここでは、ローカルの ArcGIS for Server マップサービスを追加する手順を説明します。

ローカルの ArcGIS for Server サービスを追加するにはまず ArcGIS for Server の REST サービスにアクセスする必要があります。

1. Windows の [スタート] メニューから [すべてのプログラム] > [ArcGIS] > [ArcGIS 10.1 for Server] とたどり、 [Services Directory] をクリックします。

(20)

2. [サービス：] セクションに、公開している GIS サービスが一覧表示されます。この中からダイナミックマップサービスとして公開しているものを選択します。今回のサンプルでは “japan_web” をクリックします。選択したマップサービスに関する情報が表示されます。 3. ここでアドレスバーの URL に着目します。この URL が現在公開しているマップサービスの REST サービスのエンドポイントとなります。この URL をクリップボードにコピーします。 4. URL をクリップボードにコピーしたら、HTML ファイルのソースコードに戻ります。

(21)

5. 「マップを作成し、レイヤを追加する」のステップ３, ４と同様に、レイヤ変数（この例では myDynamicMapServiceLayer）を宣言し、宣言した変数に新規 ArcGISDynamicMapServiceLayer コンストラクタを割り当てます。引数にはステップ 3 でコピーした REST サービスのエンドポイントの URL を指定します。そしてレイヤが初期化されたら、addLayer メソッドを使用してマップに追加します（赤字がコード追加部分です）。 dojo.require("esri.map");

var myMap, myTiledMapServiceLayer, myDynamicMapServiceLayer; function init() {

myMap = new esri.Map("mapDiv");

myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer ("http://server.arcgisonline.com/ArcGIS/rest/services/World_Stre et_Map/MapServer"); myDynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer ("http://ej000388/ArcGIS/rest/services/japan_web/MapServer"); myMap.addLayer(myTiledMapServiceLayer); myMap.addLayer(myDynamicMapServiceLayer); }

(22)

 公開しているマップサービスの種類によっては別のレイヤクラスを使用する必要があります。公開できるマップサービスの種類およびクラス

については、後述の「マップサービスレイヤ」をご覧ください。

6. HTML ファイルを上書き保存し、再度実行します。ArcGIS Online の世界道路地図サービスと、ローカルの ArcGIS for Server で公開されたマップサービスが重ね合わさって（マッシュアップされて）表示されます。

7. ローカルの ArcGIS for Server で公開されたマップサービスレイヤ付近を拡大表示します。

8. 2 つのレイヤが重なって表示されていることが確認できたら Web ブラウザを閉じます。

(23)

ローカルの ArcGIS for Server サービスのプロパティを変更する

次にローカルの ArcGIS for Server マップサービスレイヤのプロパティを変更します。ここではレイヤの透過率を変更します。 1. myDynamicMapServiceLayer を定義している行を以下のように変更します（赤字がコード追加部分です）。 myDynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer ("http://ej000388/ArcGIS/rest/services/japan_web/MapServer", {opacity:0.3}); 2. HTML ファイルを上書き保存し、再度実行します。ローカルの ArcGIS for Server で公開されたマップサービスレイヤ付近を拡大表示すると、指定した透過率でレイヤが透過表示されているのが確認できます。

(24)

以上でサンプルアプリケーションの開発は終了です。より高度なアプリケーションの開発に関する参考ドキュメントやサンプルの詳細については次のステップをご参照ください。

(25)

次のステップ

本スタートアップガイドでは ArcGIS API for JavaScript を用いた Web マッピングアプリケーションを開発するための最も基本的な開発手順について紹介しました。今後、より高度なアプリケーションを開発するためにはまず ArcGIS Resources をご参照ください。ArcGIS Resources には API の開発に必要となる参考ドキュメントやサンプルがすべて集約されています。

ArcGIS Resources：ArcGIS API for JavaScript

(26)

Concepts API の概要、地図の追加や ArcGIS サービスの利用方法などの各種開発手法をまとめた開発者ヘルプです。 Samples API を用いたライブサンプルとその開発コードです。はじめて API による開発を行う場合はまずこのサンプルと同じ Web マッピングアプリケーションを作成してみることをお勧めします。

(27)

API Reference API のリファレンスです。API に含まれるクラスの各種プロパティ、メソッド等を確認することができます。 Code Gallery Esri 社の開発チームや全世界のユーザが公開したサンプルコードをダウンロードしたり、公開されている Web アプリケーションにアクセスし実際に使用したりすることができます。

(28)

トピックス

レイヤの種類

Map に追加できるレイヤはそのデータソースの違いから、マップサービスレイヤとフィーチャレイヤの 2 種類に分けることができます。 Map 内のレイヤのデータソースの多くは、GIS サーバが提供するマップサービスです。マップサービス自身もほとんどの場合、複数のレイヤから構成されており、あらかじめサーバ管理者によって各マップサービス内のレイヤがどのようなシンボルや色を使用して地図上に表示されるかが定義されています。マップサービスはこの定義に従い、サーバ上で地図画像を生成しクライアントに配信します。マップサービスレイヤではこのサーバ側で生成された地図画像をデータソースとして Map に表示します。 Map GIS サーバ マップサービス 地図画像の生成 地図画像の配信

(29)

マップサービスレイヤでは、あらかじめサーバ側で生成された地図画像をデータソースとして使用するため、サーバ側で定義されたシンボルや色と異なる方法で地図を表現することができません。一方で、フィーチャレイヤではクライアントアプリケーション上で動的にシンボルや色を設定することができます。フィーチャレイヤはマップサービスを構成する複数のレイヤの 1 つに直接アクセスし、そのレイヤ内の地物の座標および属性情報を取得して、アプリケーション上で動的に描画を行います。

ArcGIS API for JavaScript のアプリケーションでは多くの場合において、シンボル情報等の変更が必要ない背景地図にマップサービスレイヤを使用し、ユーザの操作に応じて表示を対話的に変更する必要がある主題図にフィーチャレイヤを使用します。 GIS サーバ マップサービス Map フィーチャレイヤ 特定のレイヤから、 座標、属性情報を取得 クライアント側で 動的に描画

(30)

マップサービスレイヤ

マップサービスレイヤが利用する GIS サーバのマップサービスは、REST 形式で公開されており、マップサービスレイヤはこの REST サービスのエンドポイントにアクセスすることで、GIS サーバが生成したマップサービスの画像を表示することができます。マップサービスレイヤには、ArcGIS for Server が公開する様々なマップサービスや Bing Maps サービスなど様々なサービスに対応するために、以下のようなマップサービスレイヤクラスが用意されています。 マップサービスレイヤクラス：

ArcGISTiledMapServiceLayer ArcGIS for Server のキャッシュマップサービスをデータ ソースとして使用します。

ArcGISDynamicMapServiceLayer ArcGIS for Server のダイナミックマップサービスをデー タソースとして使用します。

ArcGISImageServiceLayer ArcGIS for Server のイメージサービスをデータソースとし て使用します。

VETiledLayer Microsoft Bing Maps のマップイメージサービスをデータ ソースとして使用します。 OpenStreetMapLayer OpenStreetMap のマップイメージサービスをデータソー スとして使用します。 マップサービスレイヤクラスのデータソースを指定するには、クラスの URL 属性にマップサービスの REST エンドポイントを指定します。本スタートアップガイドで紹介したコードでは、新規作成した ArcGISTiledMapServiceLayer の URL 属性に、Esri 社がホストしている ArcGIS Online の世界道路地図サービスの REST エンドポイントを指定しています。

(31)

マップサービスレイヤの REST エンドポイント

マップサービスレイヤが利用する ArcGIS for Server のマップサービスの REST エンドポイントは ArcGIS for Server をインストールするとサーバに構成される ArcGIS REST Services Directory と呼ばれる簡易 Web アプリケーションから確認することができます。以下の URL より Esri 社が公開している ArcGIS for Server のマップサービスの REST エンドポイントを確認することができます。

ArcGIS Online ArcGIS Services Directory

http://server.arcgisonline.com/ArcGIS/Rest/Services

「Services:」セクションに表示されるサービスの一覧から使用したいサービスをクリックします。例えば世界道路地図の REST エンドポイントを確認するには、 Home ページにて、[World_Street_Map] をクリックします。

(32)

World_Street_Map サービスの詳細が表示されます。サービスの REST エンドポイントはブラウザに表示される URL です。

ローカルの ArcGIS for Server の ArcGIS REST Services Directory は Windows の [スタート] メニューより [すべてのプログラム] > [ArcGIS] > [ArcGIS 10.1 for Server] とたどり、 [Services Directory] を選択することでアクセスできます。

(33)

フィーチャレイヤ 前述した通り、フィーチャレイヤはマップサービスレイヤと異なり、マップサービス内の 1 つのレイヤから座標と属性情報を取得し、クライアント側で動的に描画を行います。以下は衛星写真（Bing Maps) のマップサービスレイヤ上にポイントフィーチャレイヤを描画した例です。フィーチャレイヤを使用することで、上図のようなグラフィック表現に加えて、レイヤ上の地物の動的な選択、ArcGIS for Server のサービスと連携した Web 編集、時間遷移によるアニメーション表現などを実装することができます。以下はマップサービスレイヤ上のフィーチャレイヤの選択された地物（ポリゴン）のシンボルを動的に変更した例です。

(34)

フィーチャレイヤの REST エンドポイント

フィーチャレイヤもマップサービスレイヤと同様に ArcGIS for Server の REST サービスを利用します。しかしマップサービスレイヤと異なり、サービス内の個別のレイヤをリソースとして指定します。以下では、Esri 社が公開しているサンプルサーバからマップサービスの個別のレイヤの REST エンドポイントを確認します。 1. Esri 社のサンプルサーバに接続し、[Specialty] フォルダをクリックします。 http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/

(35)

2. Specialty フォルダ内の [ESRI_StatesCitiesRivers_USA] マップサービスをクリックします。

3. ESRI_StatesCitiesRivers_USA のマップサービス詳細が表示されます。このマップサービスには、Cities (都市)、Rivers （河川）、States （州）の 3 つのレイヤが含まれていることがわかります。[Cities] レイヤをクリックします。

(36)

4. Cities レイヤの詳細が表示されます。Cities サービスの REST エンドポイントはブラウザに表示される URL です。マップサービスレイヤが使用する REST エンドポイントと異なり、URL の最後にマップサービス内のレイヤ ID （/0）が指定されている点に注目してください。

5. 以下の例では、上記手順で確認した、Cities レイヤを ArcGIS Online の世界道路地図の上に重ねています。フィーチャレイヤクラス（FeatureLayer）の Url 引数に REST エンドポイントを指定しています。その他に、

FeatureLayer の setDefinitionExpression プロパティを使用して Cities レイヤの POP1990 列の値が 100000 よりも大きいレコード（人口が 10 万人以上）のみを取得するという条件句を設定しています。

(37)

var map = new esri.Map("map");

var baseMapLayer = new

esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonli ne.com/ArcGIS/rest/services/World_Street_Map/MapServer");

map.addLayer(baseMapLayer);

var featureLayer = new

esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapSe rver/0");

featureLayer.setDefinitionExpression("POP1990 > 100000"); map.addLayer(featureLayer);

(38)

FeatureLayer クラスにはその他にもサーバからのデータの取得方式を設定する mode プロパティや、個別値分類や数値分類などレイヤを色分け表示するための renderer プロパティなどが用意されています。詳細は API Reference をご参照ください。 API Reference：FeatureLayer http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/feat urelayer.htm

ローカルの ArcGIS for Server の ArcGIS REST Services Directory は Windows の [スタート] メニューより [すべてのプログラム] > [ArcGIS] > [ArcGIS 10.1 for Server] とたどり、 [Services Directory] を選択することでアクセスできます。

(39)

・本書の一部または全部を無断で転用または複製することを禁じます。

・本書に記載されている社名、商品名は､各社の商標および登録商標です。

・本書に記載されている内容は改良のため、予告なく変更される場合があります。

・本書の内容は参考情報の提供を目的としており、本書に含まれる情報はその使用

ArcGIS API for JavaScript スタートアップガイド ArcGIS API for JavaScriptTM 用

2012 年 11 月第 5 版発行/編集所 ESRI ジャパン株式会社

ArcGIS API for JavaScript スタートアップ ガイド