WCFサービスに、データベースから情報を取得するメソッドを定義する
追加したWCFサービスに、データベースから情報を取得するメソッドを定義します。先ほど作成したWCFサービス(=XamMapService.svc)を、次のように編集します。
//追加 using System.Configuration; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; namespace XamMapSample.Web { [ServiceContract(Namespace = "")] [SilverlightFaultBehavior] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class XamMapService { [OperationContract] public IEnumerable<Dictionary<string, string>> GetPrefecturePopulation() { using (var con = new SqlConnection()) { con.ConnectionString = ConfigurationManager .ConnectionStrings["XamMapDB"] .ConnectionString; var cmd = new SqlCommand() { Connection = con, CommandType = CommandType.StoredProcedure, CommandText = "GetPrefecturePopulation" }; con.Open(); var reader = cmd.ExecuteReader(); var rows = new List<Dictionary<string, string>>(); if (reader != null) { while (reader.Read()) { var row = new Dictionary<string, string>(); for (int i = 0; i < reader.FieldCount; i++) row.Add(reader.GetName(i), reader.GetValue(i).ToString()); rows.Add(row); } } con.Close(); return rows; } } } }
このコードの目的は、データベースに定義したGetPrefecturePopulationストアド プロシージャを実行し、その実行結果(=都道府県境および都道府県別の人口)を取得することです。その処理を、WCFサービスのメソッドとしてGetPrefecturePopulationという名前で定義しています。データベースにアクセスする処理などのコード詳細については、本稿の範囲ではないので解説を避けます。
続いて、データベースへの接続文字列を、Webサイトプロジェクト(=XamMapSample.Web)のWeb.configファイルを編集し、次のように定義します。
<configuration> <connectionStrings> <add name="XamMapDB" connectionString="Data Source=(local);Initial Catalog=XamMapDB;Integrated Security=True" /> </connectionStrings> <!-- 省略 --> </configuration>
以上で、Silverlight対応WCFサービスを追加し、そのサービスからデータベースにアクセスする処理を定義することができました。
SilverlightアプリケーションにXamMapを追加する
ここまで、都道府県境および都道府県別の人口を格納したサンプル用のデータベースを取込み、そのデータベースにSiverlightアプリケーションからアクセスするためのWCFサービスを作成し、準備が整いました。
それではいよいよ、SilverlightアプリケーションにXamMapを追加し、地図アプリケーションを開発していきます。次の手順で、XamMapをMainPage.xamlへ追加します。
XamMapをMainPage.xamlへ追加する手順
- Silverlightアプリケーションプロジェクト(=XamMapSample)のMainPage.xamlを開く
- ツールボックスからXamMapをMainPage.xamlのデザイナへドラッグ&ドロップする
以上で、XamMapを追加することができました。
XamMapにWCFサービスから取得した都道府県境データをレイヤーとして表示する
MainPage.xamlに追加したXamMapを修正し、都道府県境データをレイヤーとしてを表示させます。
サービス参照の追加
まずは、Silverlightアプリケーションプロジェクト(=XamMapSample)に、先ほど作成したWCFサービス(=XamMapService.svc)をサービス参照として追加します。
- Silverlightアプリケーションプロジェクト(=XamMapSample)の参照で右クリックしサービス参照の追加を選択する
- サービス参照の追加画面で探索ボタンをクリックし先ほど作成したWCFサービス(=XamMapService.svc)を表示する
- 名前空間に任意の名前(本稿ではXamMapServiceReference)を入力し、OKボタンをクリックする
以上でサービス参照の追加が完了しました。
画面側(XAML)の修正
都道府県境データを表示するレイヤーを定義するために、MainPage.xamlのXamMapを次のように修正します。
<UserControl x:Class="XamMapSample.MainPage" (略)> <Grid x:Name="LayoutRoot" Background="White"> <ig:XamMap Name="xamMap"> <ig:XamMap.Layers> <ig:MapLayer Name="Japan"> <ig:MapLayer.Reader> <ig:SqlShapeReader DataMapping="Data=Geom"/> </ig:MapLayer.Reader> </ig:MapLayer> </ig:XamMap.Layers> <ig:MapNavigationPane x:Name="navi" Margin="10" VerticalAlignment="Top" ig:XamDock.Edge="InsideRight" /> </ig:XamMap> </Grid> </UserControl>
コードビハインド側の修正
都道府県境データを取得するWCFサービスを呼び出し、先ほど作成したレイヤーにバインドするため、MainPage.xaml.csを次のように修正します。
//追加 using Infragistics.Controls.Maps; using XamMapSample.XamMapServiceReference; namespace XamMapSample { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); var client = new XamMapServiceClient(); client.GetPrefecturePopulationCompleted += (sender, e) => { var jLayer = xamMap.Layers["Japan"]; if (jLayer.Reader != null) { (jLayer.Reader as SqlShapeReader).DataSource = e.Result; jLayer.ImportAsync(); } }; client.GetPrefecturePopulationAsync(); } } }
以上でXamMapにWCFサービスから取得した都道府県境データをレイヤーとして表示できるようになりました。さっそく実行してみましょう。次の画像のように都道府県の地図が表示されれば成功です。
また、画面の右側には、マップのナビゲーションが表示されているはずです。これを利用して地図の拡大縮小、パンなどの操作することもできます。