いろいろ備忘録日記

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

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


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に指定している座標は、「世界一孤立した有人島」として
ギネス認定されているトリスタンダクーニャ島を指しています。

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

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