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

C1Mapsコンポーネントの配置

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

画面デザイン

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

図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　サンプル実行

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