読者です 読者をやめる 読者になる 読者になる

いろいろ備忘録日記

主に .NET 絡みのメモを公開しています。

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

C# DevExpress


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


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


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


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


アカウントを作成したら、サインインします。
左のメニューリストの「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を
追加します。

<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>


これで検索できるようになりました。日本語で打ち込んでもちゃんと検索できます。



余談ですが、CenterPointに指定している座標は、「世界一孤立した有人島」として
ギネス認定されているトリスタンダクーニャ島を指しています。

================================
過去の記事については、以下のページからご参照下さい。

サンプルコードは、以下の場所で公開しています。