SHOEISHA iD

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

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

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)

ComponentOne Studioの地図コンポーネント+オープンデータでマッシュアップしよう

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

C1Mapsコンポーネントの配置

 ツールボックスからC1MapsコンポーネントをWPFウィンドウ上にドラッグ&ドロップします。これだけで必要な参照設定とライセンスファイルのプロジェクトファイルへの追加が行われます。

画面デザイン

 サンプル画面の構成は、左に地図、右に一覧表の2カラム構成になっていて、検索ボタンをクリックすると特定市区町村のAED情報を検索表示します。

図4 画面デザイン
図4 画面デザイン
リスト2 MainWindow.xaml
        :
      (中略)
        :
<Grid Grid.Row="1" Margin="15,0,0,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0" Margin="20,0,20,0">
        <Custom:C1Maps x:Name="C1Maps1" 
                       VerticalAlignment="Top"
                       HorizontalAlignment="Left"
                       Zoom="13"
                       Width="480" Height="600">
            <Custom:C1Maps.Resources>
                <DataTemplate x:Key="PinStyle">              …(2)'
                    <Custom:C1VectorPlacemark 
                        Fill="Red" Stroke="Red"
                        LabelPosition="Top"
                        Foreground="Red"
                        GeoPoint="{Binding LatLng}">         …(3)
                        <Custom:C1VectorPlacemark.Geometry>  …(4)
                            <EllipseGeometry                                                                             RadiusX="2"
                                RadiusY="2" />
                            </Custom:C1VectorPlacemark.Geometry>
                    </Custom:C1VectorPlacemark>
                </DataTemplate>
            </Custom:C1Maps.Resources>
            <Custom:C1Maps.Source>
                <Custom:VirtualEarthRoadSource ApplicationId="{x:Null}"/>
            </Custom:C1Maps.Source>
            <Custom:C1VectorLayer ItemsSource="{Binding City.Items}"           …(1)
                                  ItemTemplate="{StaticResource PinStyle}"/>   …(2)
        </Custom:C1Maps>
    </StackPanel>
        :
      (中略)
        :

 C1Mapsコンポーネントで緯度経度に合わせてマークを描画するには、

  • (1)緯度経度が含まれたコレクションをItemsSourceプロパティにBindingする
  • (2)マーク描画用スタイルをItemTemplateに指定する
  • (3)マーク描画用スタイルの中で、C1VectorPlacemarkのGeoPointに緯度経度をBindingする
  • (4)マーク自体はC1VectorPlacemarkのGeometryで形を指定する

という手順で行います。今回はEllipseGeometryを指定しているので●を描画します。

 コードビハインド側でループを回して1点1点位置を指定して描画する必要はありません。

検索イベント時のコードの記述

 MainWindow.xamlのコードビハインド側に検索用のロジックを一部記載してますが、検索ボタンのCommandプロパティにViewModelのメソッドをBindingする方法の方がより結合度が疎になります。

リスト3 MainWindow.xaml.vb
Imports C1.WPF.Maps.ImageryService

Namespace Views
    Public Class MainWindow

        Public Sub New()
            ' この呼び出しはデザイナーで必要です。
            InitializeComponent()
            ' InitializeComponent() 呼び出しの後で初期化を追加します。
            Me.DataContext = Application.MainVM
        End Sub

        Private Async Sub Search_Click(sender As Object, e As RoutedEventArgs)
            Await Application.MainVM.GetItems("愛知県", "豊田市")
            SetCenterPos()
        End Sub

        Private Sub SetCenterPos()
            Try
                Dim centerLoc = New Point(0, 0)
                Dim counter = 0
                Dim items = Application.MainVM.City.Items
                '/* 地図の中心位置表示 */
                For Each item In items
                    Dim loc = New Point(item.Longitude, item.Latitude)
                    centerLoc.Y = Math.Abs(centerLoc.Y * counter + loc.Y) / (counter + 1)
                    centerLoc.X = Math.Abs(centerLoc.X * counter + loc.X) / (counter + 1)
                    counter += 1
                Next
                Me.C1Maps1.Center = centerLoc
            Catch ex As Exception
            End Try
        End Sub
    End Class
End Namespace

 あとはMainViewModelクラスを記述すれば出来上がりです。

サンプル実行

図5 サンプル実行
図5 サンプル実行

 なお、ライセンス認証しているのにもかかわらず実行時にトライアル版の表示が出る場合は、Propertiesフォルダがプロジェクトに自動追加されていない可能性があります。その場合は、ソリューションエクスプローラーですべてのファイルを表示してPropertiesフォルダごとライセンスファイルをプロジェクトに追加すれば表示が消えますので、もし、トライアル版表示に悩まされている方は一度確認してみるとよいでしょう。

次のページ
マーカーのカスタマイズ

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

  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)連載記事一覧

もっと読む

この記事の著者

初音玲(ハツネアキラ)

 国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。 個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。 Microsoft MVP for Windows Development ブログ:http://hatsune.hatenablog.jp/

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

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8118 2014/11/07 15:23

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング