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サービスから取得した都道府県境データをレイヤーとして表示できるようになりました。さっそく実行してみましょう。次の画像のように都道府県の地図が表示されれば成功です。
また、画面の右側には、マップのナビゲーションが表示されているはずです。これを利用して地図の拡大縮小、パンなどの操作することもできます。





