SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Infragistics NetAdvantageチュートリアル(AD)

Silverlightで地図アプリを構築する

  • X ポスト
  • このエントリーをはてなブックマークに追加

WCFサービスに、データベースから情報を取得するメソッドを定義する

 追加したWCFサービスに、データベースから情報を取得するメソッドを定義します。先ほど作成したWCFサービス(=XamMapService.svc)を、次のように編集します。

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ファイルを編集し、次のように定義します。

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へ追加する手順

  1. Silverlightアプリケーションプロジェクト(=XamMapSample)のMainPage.xamlを開く
  2. ツールボックスからXamMapをMainPage.xamlのデザイナへドラッグ&ドロップする

 以上で、XamMapを追加することができました。

XamMapにWCFサービスから取得した都道府県境データをレイヤーとして表示する

 MainPage.xamlに追加したXamMapを修正し、都道府県境データをレイヤーとしてを表示させます。

サービス参照の追加

 まずは、Silverlightアプリケーションプロジェクト(=XamMapSample)に、先ほど作成したWCFサービス(=XamMapService.svc)をサービス参照として追加します。

  1. Silverlightアプリケーションプロジェクト(=XamMapSample)の参照で右クリックしサービス参照の追加を選択する
  2. サービス参照の追加画面で探索ボタンをクリックし先ほど作成したWCFサービス(=XamMapService.svc)を表示する
  3. 名前空間に任意の名前(本稿ではXamMapServiceReference)を入力し、OKボタンをクリックする

 以上でサービス参照の追加が完了しました。

画面側(XAML)の修正

 都道府県境データを表示するレイヤーを定義するために、MainPage.xamlのXamMapを次のように修正します。

MainPage.xaml
<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を次のように修正します。

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サービスから取得した都道府県境データをレイヤーとして表示できるようになりました。さっそく実行してみましょう。次の画像のように都道府県の地図が表示されれば成功です。

 また、画面の右側には、マップのナビゲーションが表示されているはずです。これを利用して地図の拡大縮小、パンなどの操作することもできます。

次のページ
まとめ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Infragistics NetAdvantageチュートリアル連載記事一覧

もっと読む

この記事の著者

菅原 英治(スガワラ エイジ)

シグマコンサルティング株式会社 取締役副社長。SIerでのSE勤務を経て起業。「ジョイ・オブ・プログラミング」をモットーにIT業界を明るく楽しくしたい。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5902 2011/05/09 11:30

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング