[UWP][MapCotrol] 表示スタイルを変更する

MapControlはStyleプロパティを使用して表示スタイルを変更することができます。

Styleプロパティには、以下の表に示すMapStyle列挙体の値を設定することができます。

メンバー 説明
 None  スタイルなし
 Road  道路地図を表示
 Aerial  航空写真地図を表示
 AerialWithRoads  航空地図&道路地図を表示
 Terrain  地形地図を表示
 Aerial3D  航空写真地図(3D)を表示
 Aerial3DWithRoads  航空地図(3D)&道路地図を表示

以下は航空地図(3D)&道路地図を表示する例です

public MainPage()
{
    this.InitializeComponent();

    // 表示位置となる緯度と経度を設定する
    BasicGeoposition cityPosition = new BasicGeoposition() { Latitude = 35.689, Longitude = 139.692 };
    Geopoint cityCenter = new Geopoint(cityPosition);

    // 地図の中心とズームレベルを設定する
    mapControl1.Center = cityCenter;
    mapControl1.ZoomLevel = 12;

    // 航空地図(3D)&道路地図を表示
    mapControl1.Style = Windows.UI.Xaml.Controls.Maps.MapStyle.Aerial3DWithRoads;
}

航空地図(3D)&道路地図を表示する例

[UWP][MapCotrol] 表示角度を設定する

MapControlは、表示時の地図の角度を設定することができます。

角度を設定するには Headingプロパティを使用します。

Headingプロパティには0~360までの値を設定することができ、0(360)=北、90=東、180=南、270=西 となります。

以下は90度(東)回転させて表示するように、Headingプロパティに90を設定しています。

<Maps:MapControl x:Name="mapControl1" HorizontalAlignment="Left" VerticalAlignment="Top"
             Margin="0"
             Width="1910"
             Height="1000"    
             ZoomInteractionMode="GestureAndControl"
             TiltInteractionMode="GestureAndControl" 
             MapServiceToken="取得したキー" 
             Heading="90"/>

90度回転させた地図の表示

[UWP][MapCotrol] 地図を表示する

今回はMapControl に地図を表示する方法を見ていきます。

MainPage.xaml に MapControl を配置したら、XAMLを以下のように編集します。

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Map_Control_Sample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
    x:Class="Map_Control_Sample.MainPage"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Maps:MapControl x:Name="mapControl1" HorizontalAlignment="Left" VerticalAlignment="Top"
        	Height="1070" Width="1910"
            Margin="0"
            ZoomInteractionMode="GestureAndControl"
            TiltInteractionMode="GestureAndControl" 
            MapServiceToken="取得したキー" />

    </Grid>
</Page>

MapControl の MapServiceTokenプロパティには「[UWP][MapCotrol] マップ認証キーの取得」の手順で取得したキーを貼り付けてください。

続いて、アプリ起動時に表示される地図の位置を設定します。

public MainPage()
{
    this.InitializeComponent();

    // 表示位置となる緯度と経度を設定する
    BasicGeoposition cityPosition = new BasicGeoposition() { Latitude = 35.689, Longitude = 139.692 };
    Geopoint cityCenter = new Geopoint(cityPosition);

    // 地図の中心とズームレベルを設定する
    mapControl1.Center = cityCenter;
    mapControl1.ZoomLevel = 12;
}

BasicGeolocationクラスとGeoPointクラスを使用して、地図に表示する位置(緯度と経度)を作成します。

続いて、MapControlのCenterプロパティに、作成しておいた地図の中心をセットします。

あとは、初期表示時のサイズをZoomLevelで設定します。

アプリを起動すると、以下のように地図が表示されます。

地図の表示