ArcGIS API for JavaScript スタートアップ ガイド
目次 はじめに... 2 このスタートアップガイドについて... 2 ArcGIS API for JavaScript とは... 2 ArcGIS API for JavaScript の開発環境... 3 WEB マッピングアプリケーションの開発... 4 ArcGIS API for JavaScript によるアプリケーションの作成... 4 開発環境を起動し HTML の基本部分を記述する... 5 スタイルと API の参照を宣言する... 6 マップを作成し レイヤを追加する... 8 HTML BODY コードを作成する... 12 アプリケーションを実行する... 13 ローカルの ArcGIS for Server サービスを追加する... 16 ローカルの ArcGIS for Server サービスのプロパティを変更する... 20 次のステップ... 22 ArcGIS Resources:ArcGIS API for JavaScript... 22 トピックス... 25 レイヤの種類... 25 マップサービスレイヤ... 27
マップサービスレイヤの REST エンドポイント... 28 フィーチャレイヤ... 30 フィーチャレイヤの REST エンドポイント... 31
ArcGIS API for JavaScript スタートアップガイド pg. 1
はじめに このスタートアップガイドについて このスタートアップガイドは初めて 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 の詳細は下記をご参照ください http://www.esrij.com/products/arcgis/developer/arcgis-web-mapping/ pg. 2
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/ pg. 3
Web マッピングアプリケーションの開発 ArcGIS API for JavaScript によるアプリケーションの作成 ここでは ArcGIS API for JavaScript を使用して Web マッピングアプリケーションを作成する手順を解説します 作成するアプリケーションには 1 つのマップの中に 2 つのレイヤが追加され さらにレイヤのプロパティを設定します 開発環境は Windows に付属するメモ帳を使用します pg. 4
開発環境を起動し HTML の基本部分を記述する まず 開発環境であるメモ帳を起動することから開始します 1. Windows の [ スタート ] > [ すべてのプログラム ] > [ アクセサリ ] > [ メモ 帳 ] とたどり メモ帳を起動します 2. テキスト入力部分に以下のコードを記述します これは HTML ページの基本 部分です <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html"; charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=7" /> <title> はじめての Web マッピングアプリケーション </title> </head> <body> </body> </html> pg. 5
スタイルと API の参照を宣言する HTML ページの基本部分を記述したら スタイルシートおよび API への参照設 定を行います 1. <HEAD> タグ内の <TITLE> タグの下に以下のコードを記述して スタイ ルシートを参照します <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo /dijit/themes/tundra/tundra.css"> pg. 6
参照するスタイルシートは Dojo のテーマで 主にマップの <DIV> タグ内に配置するグラフィックエレメントのために使用されますが HTML ページのいたるところで使用することもできます tundra スタイルに加えて claro, soria, nihilo スタイルを使用することもできます この場合 tundra の部分を希望のスタイルに置き換えます 2. 以下のコードを記述して ArcGIS API for JavaScript ファイルの場所を参照 します <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"> </script> 末尾に記述されているバージョン番号は ArcGIS API for JavaScript の現在 のバージョン ( 最新バージョン ) に更新する必要があります pg. 7
マップを作成し レイヤを追加する 次にマップやタスクとともに動作する JavaScript コードを記述します このサンプルでは マップが初期化され レイヤが追加されています 記述するコード量にかかわらず このスクリプトは常に以下の 3 つのセクションを順番に含みます A) パッケージを参照する B) 初期化およびその他関数を追加する C) ready イベント中に実行する関数を指定する 1. 以下のコードを記述して esri.map パッケージを参照します <script type="text/javascript"> dojo.require("esri.map"); </script> dojo.require() は <script> タグのインクルードに相当し JavaScript ペ ージ内にリソースをインポートします マップを表示する際に必要となるパ ッケージは esri.map です パッケージ名は常に小文字となります pg. 8
2. 次に dojo.require( esri.map ) の下に以下のコードを記述して 2 つの変数 を初期化し 続いて init という名前の初期化関数を作成します 変数は初 期化関数の中でマップとレイヤを定義するために使用します var mymap, mytiledmapservicelayer; function init() { } 3. 次に 初期化関数の中で Map クラスおよびそのコンストラクタを使用して 新規マップを作成します mymap = new esri.map("mapdiv"); pg. 9
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 エ ンドポイント で説明します pg. 10
5. レイヤが初期化されたら addlayer メソッドを使用してマップに追加します mymap.addlayer(mytiledmapservicelayer); これで初期化関数が完成しました このサンプルコードには init() という名 前のただ一つの関数のみが含まれていますが 別の HTML ページでは init() 関数に加えていくつかの関数を含んでいる可能性があります 6. 最後に ready イベントを初期化関数の後に for Server 指定します そのイ ベントへ渡す引数は初期化関数の名前で 今回の場合は init になります dojo.ready(init); pg. 11
この関数は 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> セクションから tundra スタイルシートを参照することを意味します 2. その他 必要に応じて HTML コードを記述します pg. 12
アプリケーションを実行する 以上でアプリケーションが完成しました 実際に Web ブラウザを起動して実行 してみます 1. メモ帳の [ ファイル ] > [ 名前をつけて保存 ] をクリックし 拡張子を.html としてファイルを保存します その際にファイルの種類を すべてのファイ ル 文字コードを UTF-8 に変更します 2. 保存したファイルを Web サーバのルートディレクトリ (IIS の初期設定で は C:\inetpub\wwwroot - フォルダ ) に配置します pg. 13
3. Web ブラウザを起動し http://< サーバ名 >/< ファイル名 >.html と入力し てアプリケーションを実行します 4. Web マッピングアプリケーションが正常に開始します この時点でマウスによるドラッグやマウスホイール およびキーの組み合わ せで地図の操作が可能です また左端にあるスライダバーで表示縮尺を変更 することもできます pg. 14
マップ操作に関する主なショートカット機能 : ドラッグ 移動 マウスホイールを前方に回転マウスホイールを後方に回転 SHIFT + ドラッグ SHIFT + CTRL + ドラッグ SHIFT + クリックダブルクリック矢印キー ( 上下左右 ) 拡大縮小拡大縮小クリックした位置を中心に表示クリックした位置を中心に拡大キーの方向へ移動 5. Web マッピングアプリケーションが正常に実行されていることが確認でき たら Web ブラウザを閉じます pg. 15
ローカルの 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] をクリック します ArcGIS REST Services Directory アプリケーションが起動します pg. 16
2. [ サービス :] セクションに 公開している GIS サービスが一覧表示されま す この中からダイナミックマップサービスとして公開しているものを選 択します 今回のサンプルでは japan_web をクリックします 選択したマップサービスに関する情報が表示されます 3. ここでアドレスバーの URL に着目します この URL が現在公開している マップサービスの REST サービスのエンドポイントとなります この URL をクリップボードにコピーします 4. URL をクリップボードにコピーしたら HTML ファイルのソースコードに戻 ります pg. 17
5. マップを作成し レイヤを追加する のステップ3, 4と同様に レイヤ変数 ( この例では 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); } pg. 18
公開しているマップサービスの種類によっては別のレイヤクラスを使 用する必要があります 公開できるマップサービスの種類およびクラス については 後述の マップサービスレイヤ をご覧ください 6. HTML ファイルを上書き保存し 再度実行します ArcGIS Online の世界道 路地図サービスと ローカルの ArcGIS for Server で公開されたマップサ ービスが重ね合わさって ( マッシュアップされて ) 表示されます 7. ローカルの ArcGIS for Server で公開されたマップサービスレイヤ付近を 拡大表示します 8. 2 つのレイヤが重なって表示されていることが確認できたら Web ブラウザ を閉じます pg. 19
ローカルの 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 で公開されたマップサービスレイヤ付近を拡大表示すると 指定し た透過率でレイヤが透過表示されているのが確認できます pg. 20
以上でサンプルアプリケーションの開発は終了です より高度なアプリケーショ ンの開発に関する参考ドキュメントやサンプルの詳細については次のステップを ご参照ください pg. 21
次のステップ 本スタートアップガイドでは ArcGIS API for JavaScript を用いた Web マッピングアプリケーションを開発するための最も基本的な開発手順について紹介しました 今後 より高度なアプリケーションを開発するためにはまず ArcGIS Resources をご参照ください ArcGIS Resources には API の開発に必要となる参考ドキュメントやサンプルがすべて集約されています ArcGIS Resources:ArcGIS API for JavaScript http://help.arcgis.com/en/webapi/javascript/arcgis/ pg. 22
ArcGIS API for JavaScript スタートアップ ガイド Concepts API の概要 地図の追加や ArcGIS サービスの利用方法などの各種開発手法をま とめた開発者ヘルプです Samples API を用いたライブ サンプルとその開発コードです はじめて API による開発 を行う場合はまずこのサンプルと同じ Web マッピング アプリケーションを作 成してみることをお勧めします pg. 23
API Reference API のリファレンスです API に含まれるクラスの各種プロパティ メソッド等 を確認することができます Code Gallery Esri 社の開発チームや全世界のユーザが公開したサンプルコードをダウンロー ドしたり 公開されている Web アプリケーションにアクセスし実際に使用した りすることができます pg. 24
トピックス レイヤの種類 Map に追加できるレイヤはそのデータソースの違いから マップサービスレ イヤとフィーチャレイヤの 2 種類に分けることができます Map 内のレイヤのデータソースの多くは GIS サーバが提供するマップサービスです マップサービス自身もほとんどの場合 複数のレイヤから構成されており あらかじめサーバ管理者によって各マップサービス内のレイヤがどのようなシンボルや色を使用して地図上に表示されるかが定義されています マップサービスはこの定義に従い サーバ上で地図画像を生成しクライアントに配信します 地図画像の生成 地図画像の配信 マップサービス GIS サーバ マップサービスレイヤではこのサーバ側で生成された地図画像をデータソー スとして Map に表示します Map マップサービスレイヤ GIS サーバ pg. 25
マップサービスレイヤでは あらかじめサーバ側で生成された地図画像をデータソースとして使用するため サーバ側で定義されたシンボルや色と異なる方法で地図を表現することができません 一方で フィーチャレイヤではクライアントアプリケーション上で動的にシンボルや色を設定することができます フィーチャレイヤはマップサービスを構成する複数のレイヤの 1 つに直接アクセスし そのレイヤ内の地物の座標および属性情報を取得して アプリケーション上で動的に描画を行います 特定のレイヤから Map 座標 属性情報を取得 マップサービス フィーチャレイヤ クライアント側で 動的に描画 GIS サーバ ArcGIS API for JavaScript のアプリケーションでは多くの場合において シンボル情報等の変更が必要ない背景地図にマップサービスレイヤを使用し ユーザの操作に応じて表示を対話的に変更する必要がある主題図にフィーチャレイヤを使用します pg. 26
マップサービスレイヤ マップサービスレイヤが利用する 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 エンドポイントを指定しています pg. 27
マップサービスレイヤの 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] をクリックします pg. 28
World_Street_Map サービスの詳細が表示されます サービスの REST エンド ポイントはブラウザに表示される URL です ローカルの ArcGIS for Server の ArcGIS REST Services Directory は Windows の [ スタート ] メニューより [ すべてのプログラム ] > [ArcGIS] > [ArcGIS 10.1 for Server] とたどり [Services Directory] を選択することでアクセスできます pg. 29
フィーチャレイヤ 前述した通り フィーチャレイヤはマップサービスレイヤと異なり マップサービス内の 1 つのレイヤから座標と属性情報を取得し クライアント側で動的に描画を行います 以下は衛星写真 (Bing Maps) のマップサービスレイヤ上にポイントフィーチャレイヤを描画した例です フィーチャレイヤを使用することで 上図のようなグラフィック表現に加えて レイヤ上の地物の動的な選択 ArcGIS for Server のサービスと連携した Web 編集 時間遷移によるアニメーション表現などを実装することができます 以下はマップサービスレイヤ上のフィーチャレイヤの選択された地物 ( ポリゴン ) のシンボルを動的に変更した例です pg. 30
フィーチャレイヤの REST エンドポイント フィーチャレイヤもマップサービスレイヤと同様に ArcGIS for Server の REST サービスを利用します しかしマップサービスレイヤと異なり サービス内の個別のレイヤをリソースとして指定します 以下では Esri 社が公開しているサンプルサーバからマップサービスの個別のレイヤの REST エンドポイントを確認します 1. Esri 社のサンプルサーバに接続し [Specialty] フォルダをクリックします http://sampleserver1.arcgisonline.com/arcgis/rest/services/ pg. 31
2. Specialty フォルダ内の [ESRI_StatesCitiesRivers_USA] マップサービ スをクリックします 3. ESRI_StatesCitiesRivers_USA のマップサービス詳細が表示されます このマップサービスには Cities ( 都市 ) Rivers ( 河川 ) States ( 州 ) の 3 つのレイヤが含まれていることがわかります [Cities] レイヤをクリックします pg. 32
4. Cities レイヤの詳細が表示されます Cities サービスの REST エンドポイントはブラウザに表示される URL です マップサービスレイヤが使用する REST エンドポイントと異なり URL の最後にマップサービス内のレイヤ ID (/0) が指定されている点に注目してください 5. 以下の例では 上記手順で確認した Cities レイヤを ArcGIS Online の世界道路地図の上に重ねています フィーチャレイヤクラス (FeatureLayer) の Url 引数に REST エンドポイントを指定しています その他に FeatureLayer の setdefinitionexpression プロパティを使用して Cities レイヤの POP1990 列の値が 100000 よりも大きいレコード ( 人口が 10 万人以上 ) のみを取得するという条件句を設定しています pg. 33
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); pg. 34
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] を選択することでアクセスできます pg. 35
ArcGIS API for JavaScript TM 用 2012 年 11 月第 5 版 発行 / 編集所 ESRI ジャパン株式会社 本書の一部または全部を無断で転用または複製することを禁じます 本書に記載されている社名 商品名は 各社の商標および登録商標です 本書に記載されている内容は改良のため 予告なく変更される場合があります 本書の内容は参考情報の提供を目的としており 本書に含まれる情報はその使用 先の自己の責任において利用して頂く必要があります