目次 はじめに... 2 このスタートゕップガドについて... 2 ArcGIS API for Microsoft Silverlight とは... 2 ArcGIS API for Microsoft Silverlight の開発環境... 3 Web マッピングアプリケーションの開発...

Transcription

1 ArcGIS API for Microsoft Silverlight スタートアップ ガイド Microsoft Visual Studio 2010 用

2 目次 はじめに... 2 このスタートゕップガドについて... 2 ArcGIS API for Microsoft Silverlight とは... 2 ArcGIS API for Microsoft Silverlight の開発環境... 3 Web マッピングアプリケーションの開発... 4 API ラブラリのンストール... 4 Web マッピングゕプリケーションの開発 API ラブラリ参照の追加 Map コントロールの追加 Navigation コントロールの追加 OverviewMap コントロールの追加 HeatMapLayer クラスの追加 次のステップ ArcGIS Resource Center Silverlight API トピックス Map コントロールの Layers プロパテゖ レヤの種類 マップサービスレヤ... 74

3 マップサービスレヤの REST エンドポント フゖーチャレヤ フゖーチャレヤの REST エンドポント その他のレヤ... 84

4 ArcGIS API for Microsoft Silverlight スタートアップガイド ( バージョン 2.x) Microsoft Visual Studio 2010 用 pg. 1

5 はじめに このスタートアップガイドについて このスタートゕップガドは初めて ArcGIS API for Microsoft Silverlight を使用して Web マッピングゕプリケーションを構築する開発者の方に最も基本的な開発手順の流れを紹介するものです 本書をお読み頂くことで ArcGIS API for Microsoft Silverlight ラブラリの入手方法およびラブラリを使用した Web マッピングゕプリケーション開発の基礎を理解することができます ArcGIS API for Microsoft Silverlight とは ArcGIS API for Microsoft Silverlight とは ArcGIS Web Mapping の一つであり Microsoft Silverlight の高い操作性 表現力と ArcGIS Server や Bing Maps などのオンラン GIS リソースを統合したゕプリケーションを開発するために提供される API ラブラリです ArcGIS Web Mapping の詳細は下記をご参照ください ArcGIS Web Mapping: pg. 2

6 ArcGIS API for Microsoft Silverlight の開発環境 本ガドでは以下の環境にて ArcGIS API for Microsoft Silverlight を用いた Web マッピングゕプリケーションの開発手順を紹介します 本ガドの手順を実行する前に以下の環境がご使用のマシンに適切にセットゕップされている必要があります Microsoft Visual Studio Microsoft Silverlight 4 Tools for Visual Studio Microsoft Expression Blend 4 SDK for Silverlight ArcGIS API for Microsoft Silverlight がサポートする最新の動作環境につきまし ては下記をご参照ください ArcGIS API for Microsoft Silverlight 動作環境 : pg. 3

7 ArcGIS API for Microsoft Silverlight スタートアップ ガイド (v2.x) Web マッピング アプリケーションの開発 API ライブラリのインストール ArcGIS API for Microsoft Silverlight を用いて Web マッピング ゕプリケーシ ョンを開発するには まず API ラ ブラリを入手する必要があります 以下の手 順に従い ArcGIS Resource Center から API を ンストールしてください 以 下の手順はバージョン 2.0 のものです 1. ArcGIS Resource Center にゕクセスします ArcGIS Resource Center pg. 4

8 ページ左下の ArcGIS Products 一覧から [Web] または [Server] をクリ ックします ここでは [Server] をクリックします 2. ArcGIS Server の製品ページに移動します ページ左の [Web APIs] をクリ ックします 3. ArcGIS Web Mapping のページに移動します [ArcGIS API for Microsoft Silverlight/WPF] または画像をクリックします pg. 5

9 4. ArcGIS API for Microsoft Silverlight のページに移動します ページ内の [download] リンクをクリックします 5. ページの手順に従いダウンロードを行います まず [Sign in] をクリックし ます 6. ESRI グローバルゕカウントを使用してログンします ( グローバルゕカウ ントをお持ちでない場合は [Create a new ESRI Global Account] をクリ ックしてゕカウントを作成してください ) pg. 6

10 7. 手順 (6) のページに戻り [ArcGIS API for Microsoft Silverlight download page] をクリックします 8. ラセンス使用許諾条項に同意する場合は [I agree to the terms and conditions] のチェックボックスをオンにして [Submit] をクリックします pg. 7

11 9. [Download] をクリックし ンストールを開始します 10. フゔルのダウンロード セキュリテゖの警告ダゕログボックスにて [ 実行 ] ボタンをクリックします 11. [ArcGISSilverlightWPF2x.exe] が一時フォルダにダウンロードされます pg. 8

12 12. Internet Explorer セキュリテゖの警告ダゕログボックスにて [ 実行す る ] ボタンをクリックします 13. [Next] をクリックします pg. 9

13 14. 使用許諾契約書に同意する場合は [I accept the license agreement] を選 択し [Next] をクリックします pg. 10

14 15. API ラブラリのンストールデゖレクトリとンストールするコンポー ネント を選択し [Next] をクリックします 現在 日本国内では API とともに提供されるゕプリケーションテンプレート ([Expression Blend Templates] および [Visual Studio Templates] ) はサポートされておりません ゕプリケーションテンプレートについては 次のステップの Samples: Template Gallery をご参照ください pg. 11

15 16. [Next] をクリックします 17. ンストールが開始されます pg. 12

16 18. ンストールが完了したら [Finish] をクリックします pg. 13

17 Web マッピングアプリケーションの開発 以下の手順では Visual Studio 2010 を用いて ArcGIS API for Microsoft Silverlight を使用した Web マッピングゕプリケーションのサンプルを作成します ( 本スタートゕップガドではコードビハンドのプログラミング言語として C# を使用します ) API ライブラリ参照の追加 1. Visual Studio 2010 を起動し [ フゔル ] > [ 新規作成 ] を選択し [ プロジ ェクト ] をクリックします pg. 14

18 2. 新しいプロジェクトダゕログにて [ ンストールされたテンプレート ] セクションから [Visual C#] > [Silverlight] を選択し [Silverlight ゕプリケーション ] を選択します 必要に応じて [ 名前 ] [ 場所 ]( ソリューションの格納デゖレクトリ ) [ ソリューション名 ] を変更して [OK] ボタンをクリックします pg. 15

19 3. 新しい Silverlight ゕプリケーションダゕログにて [Silverlight ゕプリ ケーションを新しい Web サトでホストする ] にチェックが入っている事 を確認して [OK] ボタンをクリックします pg. 16

20 4. 新しい Silverlight ゕプリケーションのプロジェクトと Silverlight ゕプリ ケーションをホストするための Web プロジェクトを含むソリューションが 作成されます pg. 17

21 5. ArcGIS API for Microsoft Silverlight の一部の機能を使用するには プロジェクトに System.Windows.Controls.Data.Input.dll の参照設定を追加する必要があります ソリューションエクスプローラーから Silverlight ゕプリケーションプロジェクトを展開します [ 参照設定 ] を右クリックし [ 参照の追加...] をクリックします pg. 18

22 6. 参照の追加ダゕログにて [.NET] タブを選択し 表示されるコンポーネン トの一覧から [System.Windows.Controls.Data.Input] を選択して [OK] ボタンをクリックします 7. ソリューションエクスプローラーから Silverlight ゕプリケーションプロ ジェクトにラブラリの参照が追加されたことを確認します pg. 19

23 Map コントロールの追加 以下では Web マッピングゕプリケーション上に地図を表示させるために Map コントロールを追加する手順を紹介します 1. ArcGIS for Microsoft Silverlight API ラブラリの参照設定を追加します ソリューションエクスプローラーから [ 参照設定 ] を右クリックし [ 参照の 追加...] をクリックします pg. 20

24 2. 参照の追加ダゕログにて [.NET] タブを選択し [ESRI.ArcGIS.Client] を選択して [OK] ボタンをクリックします API ラブラリは API ラブラリのンストールデゖレクトリ ( 例 :C:\Program Files\ESRI SDKs\Silverlight\v2.x) に格納されています 3. ソリューションエクスプローラーから Silverlight ゕプリケーションプロ ジェクトに API ラブラリの参照が追加されたことを確認します pg. 21

25 4. MainPage.xaml を開き [ ツールボックス ] の [ESRI Silverlight API] セク ションから Map コントロールを [ デザン ] ビューにドラッグ & ドロップ で追加します pg. 22

26 [XAML] ビューに以下のコードが自動的に記述されます xmlns:esri= <esri:map Background="White" HorizontalAlignment="Left" Margin="293,178,0,0" Name="map1" VerticalAlignment="Top" /> 上記のコードでは行 8 (xmlns:esri= ) において esri と言う名称で API ラブラリへの参照が宣言されました これにより esri という名前空間で API ラブラリ内のコントロールを参照することができるようになります API ラブラリ内の Map コントロールは esri:map と言う形式で参照さ れ ページ内に追加されています また Map コントロールの Name 属性 に map1 と言う値が指定され Map コントロールの名前が設定されます pg. 23

27 5. Map コントロールの表示サズを変更します Map コントロールを選択した状態でプロパテゖウゖンドウにて Map コントロールのレゕウトプロパテゖの [Width] と [Height] を Auto に [HorizontalAlignment] と [VerticalAlignment] を Stretch に そして [Margin] を 0 に設定します [XAML] ビューにプロパテゖで設定した内容のコードが以下のように記述さ れます <esri:map Background="White" HorizontalAlignment="Stretch" Name="map1" VerticalAlignment="Stretch" Margin="0"> pg. 24

28 6. 追加した Map コントロールで表示するレヤを追加します プロパテゖウ ゖンドウにて Map コントロールの [Layers] プロパテゖを指定します [...] ボタンをクリックします 7. コレクションエデゖターダゕログが表示されます [ 項目の選択 ] で追加 するマップの種類を指定します ここでは [ArcGISTiledMapServiceLayer] を選択し [ 追加 ] ボタンをクリックします pg. 25

29 8. [ プロパテゖ ] で [Url] の [...] ボタンをクリックします pg. 26

30 9. プロパテゖエデゖターダゕログが表示されます [arcgis online] をクリックすると 利用可能なサービスが表示されるので ( サービスが表示されるまで時間がかかる場合があります ) [World Street Map] を選択し [OK] ボタンをクリックします コレクションエデゖターダゕログも [OK] ボタンをクリックして閉じます pg. 27

31 [XAML] ビューにプロパテゖで設定した内容のコードが以下のように記述さ れます <esri:arcgisdynamicmapservicelayer Url=" services/ World_Street_Map/MapServer" /> ^ は継続記号を示します 実際のコードでは ^ を削除し 改行を行いません Map コントロールの Layers プロパテゖについての詳細は トピックス :Map コントロ ールの Layers プロパテゖ を参照してください pg. 28

32 10. プロジェクトをデバッグ実行します Visual Studio 2010 のメニューから [ デバッグ ] を選択し [ デバッグ開始 ] をクリックします デバッグが無効な場合は表示されるダゕログにて [ デバッグを有効にする ために Web.config フゔルを変更する ] が選択されていることを確認して [OK] ボタンをクリックします pg. 29

33 デバッグ実行が開始され Web マッピングゕプリケーションが開始されま す この時点でマウスによるドラッグやマウスホールで地図のナビゲーション操作が可能です Web マッピングゕプリケーションが正常に実行されていることが確認できたらゕプリケーションを閉じて Visual Studio のデバッグを停止します pg. 30

34 Navigation コントロールの追加 以下では Web マッピングゕプリケーションに地図のナビゲーション操作を行 うための Navigation コントロールを追加する手順を紹介します 1. ArcGIS for Microsoft Silverlight API ラブラリの参照設定を追加します ソリューションエクスプローラーから [ 参照設定 ] を右クリックし [ 参照の 追加...] をクリックします pg. 31

35 2. 参照の追加ダゕログにて [.NET] タブを選択し ESRI.ArcGIS.Client.Toolkit を選択して [OK] ボタンをクリックします API ラブラリは API ラブラリのンストールデゖレクトリ ( 例 : C:\Program Files\ESRI SDKs\Silverlight\v2.x) に格納されています 3. ソリューションエクスプローラーから Silverlight ゕプリケーションプロ ジェクトに API ラブラリの参照が追加されたことを確認します pg. 32

36 4. MainPage.xaml を開き [ ツールボックス ] の [ESRI Silverlight API] セク ションから Navigation コントロールを [ デザン ] ビューにドラッグ & ド ロップで追加します [XAML] ビューに以下のコードが自動的に記述されます <esri:navigation HorizontalAlignment="Left" Margin="172,200,0,0" Name="navigation1" VerticalAlignment="Top" /> pg. 33

37 上記のコードでは esri 名前空間の Navigation コントロールが追加され Name 属性に navigation1 という名前が設定されています pg. 34

38 5. [VerticalAlignment] および [HorizontalAlignment] を指定して Navigation コントロールのゕプリケーション上の配置位置を左下に設定し [Margin] を指定して周囲のオブジェクトからのマージンを設定します pg. 35

39 [XAML] ビューにプロパテゖで設定した内容のコードが以下のように記述されま す <esri:navigation HorizontalAlignment="Left" Margin="10" Name="navigation1" VerticalAlignment="Bottom" /> この状態でゕプリケーションを実行すると Navigation コントロールは追加されていますが Navigation コントロールを操作しても地図のナビゲーション操作を行うことはできません Navigation コントロールを動作させるには Map コントロールと Navigation コントロールを関連付ける必要があります pg. 36

40 6. Navigation コントロールの Map プロパテゖの右側の [ ] ボタン ( 詳細プ ロパテゖ ) をクリックし [ データバンドの適用...] をクリックします pg. 37

41 7. ソースに [ElementName] > [map1] を指定します [XAML] ビューに上記で設定した内容のコードが以下のように記述されます <esri:navigation HorizontalAlignment="Left" Margin="10" Name="navigation1" VerticalAlignment="Bottom" Map="{Binding ElementName=map1}" /> 上記の記述により Navigation コントロールによってナビゲーション操作が行わ れる Map コントロールが map1 に設定されます pg. 38

42 8. デバッグ実行を行い Navigation コントロールが追加され 地図ナビゲーション操作が行える事を確認します Web マッピングゕプリケーションが正常に実行されていることが確認できたらゕプリケーションを閉じて Visual Studio のデバッグを停止します pg. 39

43 OverviewMap コントロールの追加 以下では Web マッピングゕプリケーションに地図の概観図を表示するための OverviewMap コントロールを追加する手順を紹介します 以下の手順では GUI による操作以外に一部コーデゖングが必要になります 1. MainPage.xaml を開き [ ツールボックス ] の [ESRI Silverlight API] セク ションから OverviewMap コントロールを [ デザン ] ビューにドラッグ & ドロップで追加します pg. 40

44 [XAML] ビューに自動的に以下のコードが記述されます <esri:overviewmap HorizontalAlignment="Left" Margin="219,106,0,0" Name="overviewMap1" VerticalAlignment="Top" /> 上記のコードでは esri 名前空間の OverviewMap コントロールが追加され Name 属性に overviewmap1 という名前が設定されています pg. 41

45 2. OverviewMap コントロールのレゕウトを以下のように指定します pg. 42

46 [XAML] ビューにプロパテゖで設定した内容のコードが以下のように記述されま す <esri:overviewmap HorizontalAlignment="Right" Margin="0,8,8,0" Name="overviewMap1" VerticalAlignment="Top" Width="100" Height="100" /> 上記のコードでは OverviewMap コントロールの幅と高さを 100 に設定し 位 置を右上から 8 離れた場所に表示します この状態でゕプリケーションを実行しても何も表示されません OverviewMap コントロールを動作させるには Map コントロールと OverviewMap コントロ ールを関連付ける必要があります pg. 43

47 3. Map プロパテゖの [ ] ボタン ( 詳細プロパテゖ ) をクリックし [ データバ ンドの適用...] をクリックします pg. 44

48 4. ソースに [ElementName] > [map1] を指定します [XAML] ビューに上記で設定した内容のコードが以下のように記述されます <esri:overviewmap HorizontalAlignment="Right" Margin="0,8,8,0" Name="overviewMap1" VerticalAlignment="Top" Width="100" Height="100" Map="{Binding ElementName=map1}" /> pg. 45

49 上記の記述により OverviewMap コントロールによって地図の概観図が表 示される Map コントロールが map1 に設定されます 5. 概観図に表示するレヤを OverviewMap コントロールに追加します プロパテゖなどの GUI 操作での指定ができないため MainPage.xaml に直接コードを記述します 4 で追加したコードの... Map= {Binding ElementName=map1} /> の / を削除して OverviewMap タグ内に子要素として ArcGISTiledMapServiceLayer クラスを追加します <esri:overviewmap... Map="{Binding ElementName=map1}" > <esri:arcgistiledmapservicelayer Url=" services/world_imagery/mapserver" /> </esri:overviewmap> ^ は継続記号を示します 実際のコードでは ^ を削除し 改行を行いません pg. 46

50 ArcGIS API for Microsoft Silverlight スタートアップ ガイド (v2.x) 上記の記述により OverviewMap コントロールによって表示される地図の 概観図のレ ヤが設定されます 6. デバッグ実行を行い OverviewMap コントロールが追加され 地図の概観 図が表示されている事を確認します Web マッピング ゕプリケーションが正 常に実行されていることが確認できたらゕプリケーションを閉じて Visual Studio のデバッグを停止します pg. 47

51 HeatMapLayer クラスの追加 以下では Web マッピングゕプリケーションにポントの密度を表すヒートマ ップレヤを追加します また ヒートマップレヤが密度解析を行う際に使 用するセルサズを変更するためのスラダーを追加する手順を紹介します ヒートマップレヤとは 分析対象や主題となるデータに含まれる地物や事象の頻度や 程度 密度などを色別に表現し 可視化したものです 顧客情報や交通事故情報などの分 布状況を表現するのに適しています 以下の手順では GUI による操作以外に一部コーデゖングが必要になります 1. ArcGIS for Microsoft Silverlight API ラブラリの参照設定を追加します ソリューションエクスプローラーから [ 参照設定 ] を右クリックし [ 参照の 追加...] をクリックします pg. 48

52 2. 参照の追加ダゕログにて [.NET] タブを選択し ESRI.ArcGIS.Client.Toolkit.DataSources を選択して [OK] ボタンをクリックします API ラブラリは API ラブラリのンストールデゖレクトリ ( 例 :C:\Program Files \ESRI SDKs\Silverlight\v2.x) に格納されています 3. ソリューションエクスプローラーから Silverlight ゕプリケーションプロ ジェクトに API ラブラリの参照が追加されたことを確認します pg. 49

53 4. MainPage.xaml を開き HeatMapLayer クラスを追加します HeatMapLayer クラスを追加するには XAML ビューに直接下記のコードを 記述します <esri:heatmaplayer> </esri:heatmaplayer> Map コントロールに HeatMapLayer クラスが追加されます pg. 50

54 5. HeatMapLayer クラスのプロパテゖを指定します Map コントロールの Layers プロパテゖの [...] ボタンをクリックします pg. 51

55 6. コレクションエデゖターが表示されます [HeatMapLayer] をクリックし てプロパテゖを指定します ID: RandomHeatMapLayer ( レヤの ID) Opacity: 0.75 ( 透過率 ) Intensity: 20 ( 密度解析を行うためのセルサズを定義する値 ) pg. 52

56 [XAML] ビューに上記で設定した内容のコードが以下のように記述されます <esri:heatmaplayer ID="RandomHeatMapLayer" Intensity="20" Opacity="0.75" /> 7. ヒートマップレヤに表示するポントを追加する処理を HeatMapLayer クラスの初期化ベントに記述します HeatMapLayer クラ スの [Initialized] ベントをダブルクリックします pg. 53

57 8. MainPage.xaml.cs に [HeatMapLayer_Initialized] ベントが追加されます Silverlight ゕプリケーションでは.xaml フゔルにゕプリケーションの外観を記述し コードビハンドフゔルと呼ばれるフゔル (C# の場合は.cs VB.NET の場合は.vb フゔル) にゕプリケーションのロジックを記述します HeatMapLayer 型を使用するため ESRI.ArcGIS.Client.Toolkit.DataSources 名前空間の使用を宣言します using ESRI.ArcGIS.Client.Toolkit.DataSources; pg. 54

58 9. ヒートマップレヤにポントを追加する処理を下記のように記述します private void HeatMapLayer_Initialized(object sender, ^ EventArgs e) { HeatMapLayer layer = sender as HeatMapLayer; Random rand = new Random(); for (int i = 0; i < 1000; i++) { double x = rand.nextdouble() * ^ ; double y = rand.nextdouble() * ^ ; layer.heatmappoints.add(new ^ ESRI.ArcGIS.Client.Geometry.MapPoint(x, y)); } } ^ は継続記号を示します 実際のコードでは ^ を削除し 改行を行いません pg. 55

59 上記のコードでは例としてランダムに発生させた 1000 のポントをヒートマ ップレヤに追加しています pg. 56

60 10. MainPage.xaml には 次のコードが記述されます <esri:heatmaplayer ID="RandomHeatMapLayer" Intensity="20" Opacity="0.75" Initialized="HeatMapLayer_Initialized" /> HeatMapLayer クラスの Initialized ベントに [HeatMapLayer_Initialized] が指定され ヒートマップレヤの初期化時に MainPage.xaml.cs に記述した コードが実行されます pg. 57

61 11. デバッグ実行を行い ポントの密度を表すヒートマップレヤが追加されている事を確認します Web マッピングゕプリケーションが正常に実行されていることが確認できたらゕプリケーションを閉じて Visual Studio のデバッグを停止します pg. 58

62 12. ヒートマップレヤのポントの密度解析を行うためのセルサズを変更するスラダーを追加します [ ツールボックス ] > [ すべての Silverlight コントロール ] > [Slider] を [ デザン ] ビューにドラッグ & ドロップで追加します pg. 59

63 [XAML] ビューに自動的に以下のコードが記述されます <Slider Height="23" HorizontalAlignment="Left" Margin="227,165,0,0" Name="slider1" VerticalAlignment="Top" Width="100" /> 上記のコードでは Slider コントロールが追加され Name 属性に slider1 と いう名前が指定されています pg. 60

64 13. Slider コントロールのプロパテゖを下記のように指定します pg. 61

65 [XAML] ビューにプロパテゖで設定した内容のコードが以下のように記述されま す <Slider Height="23" HorizontalAlignment="Center" Margin="0,0,0,20" Name="slider1" VerticalAlignment="Bottom" Width="150" Maximum="100" Minimum="1" /> Slider コントロールの表示位置と最小値 / 最大値が指定されます pg. 62

66 14. ヒートマップレヤに追加したポントの密度解析を行うためのセルサ ズを変更するために HeatMapLayer と Slider コントロールを関連付け ます Slider コントロールのタグ内に下記のコードを追加します Value="{Binding ElementName=map1, Path=Layers[RandomHeatMapLayer].Intensity, Mode=TwoWay}" /> 上記の設定により Slider コントロールによって操作される値が Map コントロ ール内の HeatMapLayer の Intensity に設定されます pg. 63

67 15. デバッグ実行を行い スラダーの移動によって 密度解析を行うためのセ ルサズが変更されることを確認します 以上でサンプルゕプリケーションの開発は終了です より高度なゕプリケーショ ンの開発に関する参考ドキュメントやサンプルの詳細については次のステップを ご参照ください pg. 64

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

69 ArcGIS API for Microsoft Silverlight スタートアップ ガイド (v2.x) Samples Interactive SDK API を用いたラ ブ サンプルとその開発コードです はじめて API による開発 を行う場合はまずこのサンプルと同じ Web ゕプリケーションを作成してみるこ とをお勧めします pg. 66

70 ArcGIS API for Microsoft Silverlight スタートアップ ガイド (v2.x) Samples Symbol Gallery グラフゖック レ ヤ などのシンボル表現に使用できるポ ント ラ ン ポリ ゴン用のシンボル ギャラリーです ギャラリー内の XAML をコピー&ペーストす るだけでシンボルをゕプリケーションで利用することができます pg. 67

71 ArcGIS API for Microsoft Silverlight スタートアップ ガイド (v2.x) Samples Template Gallery ArcGIS API for Microsoft Silverlight のゕプリケーション テンプレート ギャラ リーです 背景地図切り換えや概観図といった基本機能を備えたテンプレート ゕ プリケーションのソリューションをダウンロードすることができます テンプレート ギャラリーのテンプレートのうち 一部のテンプレートについては 日本語化されたテンプレートのサンプルを ESRI ジャパンの製品ページからダウ ンロードすることもできます ArcGIS API for Microsoft Silverlight ダウンロード is-api-for-silverlight/downloads/ pg. 68

72 ArcGIS API for Microsoft Silverlight スタートアップ ガイド (v2.x) Concepts API の概要 地図の追加や ArcGIS サービスの利用方法などの各種開発手法をま とめた開発者ヘルプです API Reference API のリフゔレンスです API に含まれるクラスの各種プロパテゖ メソッド等 を確認することができます pg. 69

73 ArcGIS API for Microsoft Silverlight スタートアップ ガイド (v2.x) Code Gallery 実際に運用されているラ ブ サンプルを閲覧したり サンプル コードをダウン ロードしたりすることができます pg. 70

74 トピックス Map コントロールの Layers プロパティ ArcGIS API for Microsoft Silverlight を用いて作成された Web マッピングゕプリケーションには 地図を表示させるための Map コントロールが 1 つ以上追加されています Map コントロールにはゕプリケーション上で表示する地図の範囲 縮尺 座標系などの情報が保持されており 1 つ以上のレヤ ( 顧客分布図などの主題図や道路地図などの背景地図 ) を追加することができます <esri:map> <esri:map.layers> <Layer x:name="0" Url="..." /> <Layer x:name="1" Url="..." /> <Layer x:name="2" Url="..." /> </esri:map.layers> </esri:map> レイヤ 2( 例 : 顧客分布図 ) レイヤ 1( 例 : 人口分布図 ) Map コントロール レイヤ 0( 例 : 道路地図 ) 上記の例のように Map コントロールの Layers プロパテゖには複数のレヤを追加することが可能であり Map コントロールに 1 番最初に追加されたレヤ ( 上記の例ではレヤ 0) がレヤ層の最も下に表示され かつそのレヤの座標系が Map コントロールの座標系になります pg. 71

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

76 マップサービスレヤでは あらかじめサーバ側で生成された地図画像をデータソースとして使用するため サーバ側で定義されたシンボルや色と異なる方法で地図を表現することができません 一方で フゖーチャレヤではクラゕントゕプリケーション上で動的にシンボルや色を設定することができます フゖーチャレヤはマップサービスを構成する複数のレヤの 1 つに直接ゕクセスし そのレヤ内の地物の座標および属性情報を取得して ゕプリケーション上で動的に描画を行います 特定のレイヤから Map コントロール 座標 属性情報を取得 マップサービス フィーチャレイヤ クライアント側で 動的に描画 GIS サーバ Silverlight のゕプリケーションでは多くの場合において シンボル情報等の変更 が必要ない背景地図にマップサービスレヤを使用し ユーザの操作に応じて 表示を対話的に変更する必要がある主題図にフゖーチャレヤを使用します pg. 73

77 マップサービスレイヤ マップサービスレヤが利用する GIS サーバのマップサービスは REST 形式で公開されており マップサービスレヤはこの REST サービスのエンドポントにゕクセスすることで GIS サーバが生成したマップサービスの画像を表示することができます マップサービスレヤには ArcGIS Server が公開する様々なマップサービスや Bing Maps サービスなど様々なサービスに対応するために 以下のようなマップサービスレヤクラスが用意されています マップサービスレイヤクラス : ArcGISTiledMapServiceLayer ArcGIS Server のマップキャッシュサービスをデータソース として使用します ArcGISDynamicMapServiceLayer ArcGIS Server のダイナミックマップサービスをデータソー スとして使用します ArcGISImageServiceLayer ArcGIS Server のイメージサービスをデータソースとして使用 します TileLayer Bing Maps のマップイメージサービスをデータソースとして 使用します マップサービスレヤクラスのデータソースを指定するには クラスの Url 属性にマップサービスの REST エンドポントを指定します 本スタートゕップガドで紹介したコードでは Esri 社がホストしている ArcGIS Online の世界道路地図の REST エンドポントを <esri:arcgistiledmapservicelayer> タグの Url 属性に指定しています pg. 74

78 マップサービスレイヤの REST エンドポイント マップサービスレヤが利用する ArcGIS Server のマップサービスの REST エンドポントは ArcGIS Server をンストールするとサーバに構成される ArcGIS Services Directory と呼ばれる簡易 Web ゕプリケーションから確認することができます 以下の URL より Esri 社が公開している ArcGIS Server のマップサービスの REST エンドポントを確認することができます ArcGIS Online ArcGIS Services Directory Services: セクションに表示されるサービスの一覧から使用したいサービスを クリックします 例えば世界道路地図の REST エンドポントを確認するには Home ページにて [World_Street_Map] をクリックします pg. 75

79 World_Street_Map サービスの詳細が表示されます サービスの REST エンドポ ントはブラウザに表示される URL です ローカルの ArcGIS Server (ArcGIS Server 以降 ) の ArcGIS Services Directory は Windows メニューより [ すべてのプログラム ] > [ArcGIS] > [ArcGIS Server for Microsoft.NET Framework] > [ArcGIS Services Directory] と選択することでゕクセスできます Silverlight ゕプリケーションはセキュリテゖ上の理由から自身をホストしているドメ ン以外のサービスを呼び出すことはできません Silverlight ゕプリケーションに複数ドメ ン間のゕクセスを許可する方法については下記をご参照ください Microsoft: ドメンの境界を越えてサービスを利用できるようにする pg. 76

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

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

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

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

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

85 5. 以下の例では上記手順で確認した Cities レヤを ArcGIS Online の世界道路地図の上に重ねています フゖーチャレヤクラス (FeatureLayer) の Url プロパテゖに REST エンドポントを指定しています その他に FeatureLayer の Where プロパテゖを使用して Cities レヤの POP1990 列の値が よりも大きいレコード ( 人口が 10 万人以上 ) のみを取得すると言う条件句を設定しています (Where="POP1990 > ") <esri:map x:name="mymap"> <esri:arcgistiledmapservicelayer ^ Url=" services/world_street_map/mapserver" /> <esri:featurelayer ^ Url=" rest/services/specialty/esri_statescitiesrivers_usa/^ MapServer/0" Where="POP1990 > "/> </esri:map> FeatureLayer クラスにはその他にもサーバからのデータの取得方式を設定する MODE プロパテゖや 自動的にポントを集約して表示するクラスタシンボルを設定するための Clusterer プロパテゖなどが用意されています 詳細は API Reference をご参照ください API Reference:FeatureLayer pg. 82

86 ArcGIS API for Microsoft Silverlight スタートアップ ガイド (v2.x) ient~esri.arcgis.client.featurelayer.html ローカルの ArcGIS Server ArcGIS Server 以降 の ArcGIS Services Directory は Windows メニューより [すべてのプログラム] > [ArcGIS] > [ArcGIS Server for Microsoft.NET Framework] > [ArcGIS Services Directory] と選択することでゕクセス できます Silverlight ゕプリケーションはセキュリテゖ上の理由から自身をホストしているドメ ン以外のサービスを呼び出すことはできません Silverlight ゕプリケーションに複数ドメ ン間のゕクセスを許可する方法については下記をご参照ください Microsoft ドメ ンの境界を越えてサービスを利用できるようにする pg. 83

87 その他のレイヤ ArcGIS API for Microsoft Silverlight/WPF 2.0 より API ラブラリに新たに ESRI.ArcGIS.Client.Toolkit.DataSources と言う名前空間が追加され Map コントロールに追加することができる以下の 5 つの拡張レヤクラスが追加されています HeatMapLayer 本手順書においても使用したポントの密度を表現することが可能なヒートマ ップを表示するレヤクラスです このレヤを使用することで顧客情報や交通 事故情報などの様々な情報の分布状況を効果的に視覚化することができます pg. 84

88 OpenSreetMapLayer オープンストリートマップをレヤとして表示するためのレヤクラスです オ ープンストリートマップとは 地理情報の自由な共有を目的として 誰でも自由 に利用 更新をすることができる世界的な地図作成プロジェクトです GeoRssLayer 地震の発生など位置情報を含んだ定期的な更新情報 (Geo RSS) を動的にマップ 上に描画するためのレヤクラスです pg. 85

89 WmsLayer Open Geospatial Consortium (OGC) によって策定された地図配信の標準プロト コルである WMS (Web Map Service) を使用して地図をマップに表示するため のレヤクラスです KmlLayer Google Map や Google Earth で利用される KML を読み込み地図上に表示する ためのレヤクラスです KmlLayer クラスを利用するには ArcGIS API for Microsoft Silverlight のバージョン 2.1 以上を使用する必要があります pg. 86

90 これらの拡張レヤクラスについても フゖーチャレヤと同様にマップサービスレヤなどと重ね合わせて使用することにより より効果的でわかりやすい地図ゕプリケーションを作成することができます 拡張レヤクラスについても Interactive SDK サンプルにおいてサンプルが公開されています pg. 87

91 2011 年 7 月第 3 版発行 / 編集所 ESRI ジャパン株式会社 本書の一部または全部を無断で転用または複製することを禁じます 本書に記載されている社名 商品名は 各社の商標および登録商標です 本書に記載されている内容は改良のため 予告なく変更される場合があります 本書の内容は参考情報の提供を目的としており 本書に含まれる情報はその使用 先の自己の責任において利用して頂く必要があります