DevExpress奮闘記-119 (Map Control for WPFをちょっと使ってみた, DXMap, Bing Maps, BingSearchDataProvider)

v12.1から追加されたWPFのMap Controlを今頃ちょっと触ってみたのでメモです。

DXMap for WPF
- http://www.devexpress.com/Products/NET/Controls/WPF/Map/index.xml

名前の通り、マップを扱うコントロールです。
Bing MapsとOpenStreetMapにデフォルトで対応しています。
カスタムプロバイダーを作成すれば、他の地図にも対応出来る模様。

使い方は、いつも通りツールボックスから貼り付けて、プロパティを設定したら
オッケイなのですが、Bing Mapsを利用する場合、予めキーを取得しておく必要があります。
(OpenStreetMapはそのまま利用できる)

キーを取得するには、まずアカウントを作成しておく必要があります。
以下のサイトでアカウントを作ります。

bing Maps Account Center
- http://www.bingmapsportal.com/

アカウントを作成したら、サインインします。
左のメニューリストの「My Account」に「Create or view keys」っていうのが
あるので、クリックしてキーを取得。（サンプルで試す場合はTrialでいいと思います。）

キーが取得できたら、後はMapControlに指定するDataProvider.BindKeyに
設定するだけです。ZoomLevelでズームの倍率を、CenterPointで位置を指定します。

MapControlは、Layerを保持するようになっていて
必要な数だけLayerを追加します。単純に地図を表示するだけなら
BingMapDataProviderを設定したImageTilesLayerを追加すれば表示されます。

以下、サンプルです。

<dxr:DXRibbonWindow
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:sys="clr-namespace:System;assembly=mscorlib"
  xmlns:local="clr-namespace:DXWPFApplication1"
  xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
  xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon"
  xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
  x:Class="DXWPFApplication1.MainWindow"
  Title="BingMap TEST" 
  Height="700" 
  Width="1100"
  SnapsToDevicePixels="True" 
  UseLayoutRounding="True"
  dx:ThemeManager.ThemeName="MetropolisLight"
  >
  
  <dxr:DXRibbonWindow.Resources>
    <sys:String x:Key="MyBingMapKey">xxxxx your bing map key xxxxx</sys:String>
  </dxr:DXRibbonWindow.Resources>

  <Grid>

    <dxm:MapControl Margin="0" ZoomLevel="9" CenterPoint="-37.1,-12.3">
      <dxm:ImageTilesLayer>
        <dxm:ImageTilesLayer.DataProvider>
          <dxm:BingMapDataProvider BingKey="{StaticResource MyBingMapKey}"/>
        </dxm:ImageTilesLayer.DataProvider>
      </dxm:ImageTilesLayer>
    </dxm:MapControl>

  </Grid>

</dxr:DXRibbonWindow>

表示するとちゃんと地図が表示されて、マウスで動いてズームも出来るのですが
検索は出来ません。やっぱり地図を使っている時は検索が出来た方がいいです。
検索機能を追加するには、BingSearchDataProviderを設定したInformationLayerを
追加します。

How to programmatically search using the Bing Map Search service
- http://www.devexpress.com/Support/Center/e/E4268.aspx

<dxr:DXRibbonWindow
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:sys="clr-namespace:System;assembly=mscorlib"
  xmlns:local="clr-namespace:DXWPFApplication1"
  xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
  xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon"
  xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map"
  x:Class="DXWPFApplication1.MainWindow"
  Title="BingMap TEST" 
  Height="700" 
  Width="1100"
  SnapsToDevicePixels="True" 
  UseLayoutRounding="True"
  dx:ThemeManager.ThemeName="MetropolisLight"
  >
  
  <dxr:DXRibbonWindow.Resources>
    <sys:String x:Key="MyBingMapKey">xxxxx your bing map key xxxxx</sys:String>
  </dxr:DXRibbonWindow.Resources>

  <Grid>

    <dxm:MapControl Margin="0" ZoomLevel="9" CenterPoint="-37.1,-12.3">
      <dxm:ImageTilesLayer>
        <dxm:ImageTilesLayer.DataProvider>
          <dxm:BingMapDataProvider BingKey="{StaticResource MyBingMapKey}"/>
        </dxm:ImageTilesLayer.DataProvider>
      </dxm:ImageTilesLayer>
      <dxm:InformationLayer>
        <dxm:InformationLayer.DataProvider>
          <dxm:BingSearchDataProvider BingKey="{StaticResource MyBingMapKey}"/>
        </dxm:InformationLayer.DataProvider>
      </dxm:InformationLayer>
    </dxm:MapControl>

  </Grid>

</dxr:DXRibbonWindow>