バージョン

地図画像マップをナビゲート

始める前に

xamMap コントロールの MapTileSource プロパティは、地理的画像がロードされるソースを構成するために使用されます。サポートされる地理的画像のソースの完全なリストについては、 「サポートされる地理的画像」セクションを参照してください。ただし、このセクションは、地理的画像のソースとして OpenStreetMap だけに焦点を当てます。さらに、以下のコントロールは、主要な地図座標を表示し、現在の場所を割り当てるために MapLayer オブジェクトを使用します。

達成すること

地理的画像および地図ナビゲーション コントロールと共に XamMap コントロールを含むユーザー コントロールを作成します。このコントロールを使用すれば、ナビゲーション コントロールおよびマウス ドラッグ操作を使用することで、地理的画像の地図をナビゲートすることができます。

地図コントロールでマウス ドラッグ アンド ドロップを使用してナビゲート:

XamMap Navigate Geo Imagery Map 01.png

都市の地図コントロールを使用してナビゲート:

XamMap Navigate Geo Imagery Map 02.png

以下の手順を実行します。

  1. Microsoft® WPF® プロジェクトを作成し新しい Web サイトでホストします。

  2. 以下の NuGet パッケージ参照をプロジェクトに追加します。

    • Infragistics.WPF.Controls.Map.XamMap

    NuGet フィードのセットアップと NuGet パッケージの追加の詳細については、NuGet フィード ドキュメントを参照してください。

  1. MainPage.xaml で XamMap の以下の名前空間宣言を追加します。

XAML の場合:

xmlns:igMap="http://schemas.infragistics.com/xaml"
  1. 以下のタグをユーザー コントロールのリソース ディクショナリに追加します。

XAML の場合:

<UserControl.Resources >
    <!--TODO: 背景のために LinearGradientBrush を追加します -->
    <!--TODO: 通常のフォントのためにスタイルを追加します -->
    <!--TODO: ボールド フォントのためにスタイルを追加します -->
</UserControl.Resources>
  1. コントロールの背景のために LinearGradientBrush リソースを追加します。

XAML の場合:

<LinearGradientBrush x:Key="rscBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="Black" Offset="1"/>
    <GradientStop Color="Black" Offset="0.2"/>
    <GradientStop Color="Gray" Offset="0.1"/>
    <GradientStop Color="LightGray" Offset="0"/>
</LinearGradientBrush>
  1. ナビゲーション コントロールのフォントのために 2 つのスタイルを追加します。

XAML の場合:

<Style x:Name="rscFontStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Courier New"></Setter>
    <Setter Property="FontSize" Value="12"></Setter>
    <Setter Property="VerticalAlignment" Value="Center"></Setter>
    <Setter Property="Foreground" Value="White"></Setter>
</Style>
<Style x:Name="rscBoldFontStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Verdana"></Setter>
    <Setter Property="FontSize" Value="12"></Setter>
    <Setter Property="FontWeight" Value="Bold"></Setter>
    <Setter Property="VerticalAlignment" Value="Center"></Setter>
    <Setter Property="Foreground" Value="White"></Setter>
</Style>
  1. コントロールの背景リソースにグリッドの Background プロパティを設定します。

XAML の場合:

<Grid x:Name="LayoutRoot"  Background="{StaticResource rscBackgroundBrush}" >
        <!--TODO: すべての地図コントロールで StackPanel を追加します -->
</Grid>
  1. 以下のプロパティでメインの StackPanel コントロールを追加します。

XAML の場合:

<StackPanel Margin="5" Width="1100" Orientation="Horizontal" >
        <!--TODO: 地理的画像の地図でグリッドを追加します -->
        <!--TODO: 地図ナビゲーション コントロールで StackPanel を追加します -->
</StackPanel>
  1. XamMap コントロールでグリッドを追加します。

XAML の場合:

<Grid >
        <igMap:XamMap Name="xamMap" Width="800" Height="500" Margin="5"
                     Loaded="XamMap_Loaded"
                     WindowRectChanged="XamMap_WindowRectChanged"
                     IsAutoWorldRect="
                     WindowZoomMaximum="40"
                     MapProjectionType="SphericalMercator">
            <!--TODO: 地理的画像のソースで MapTileSource を追加します -->
            <!--TODO: 地図座標の線のために MapLayer を追加します -->
        </igMap:XamMap>
</Grid>
  1. 地理的画像のソースとして OpenStreetMap で MapTileSource を追加します。

XAML の場合:

<igMap:XamMap.MapTileSource>
        <igMap:OpenStreetMapTileSource />
</igMap:XamMap.MapTileSource>
  1. 地図座標の線のために MapLayer を追加します。

XAML の場合:

<igMap:XamMap.Layers>
    <igMap:MapLayer x:Name="mapLayer" Brushes="Transparent">
    </igMap:MapLayer>
</igMap:XamMap.Layers>
  1. 地図ナビゲーション コントロールで StackPanel を追加します。

XAML の場合:

<StackPanel Margin="5" >
      <!--TODO: 座標ナビゲーション コントロールを追加します -->
        <!--TODO: 都市ナビゲーション コントロールを追加します -->
</StackPanel>
  1. 都市ナビゲーションのために以下のコントロールを追加します。

XAML の場合:

<TextBlock Text=" Map Location Pane:"  Margin="5"
           Style="{StaticResource rscBoldFontStyle}" ></TextBlock>
<StackPanel  Orientation="Vertical" Margin="5">
    <!-- Latitude コントロールのある StackPanel -->
    <StackPanel Orientation="Horizontal" Margin="5" >
        <TextBlock Text=" Latitude:  " VerticalAlignment="Center"
                   Style="{StaticResource rscFontStyle}" >
        </TextBlock>
        <Slider  x:Name="sldLatd" Minimum="-90" Maximum="90"
                 Width="60" Value="0" SmallChange="1" LargeChange="5"
                 ValueChanged="sldLatd_ValueChanged">
        </Slider>
        <TextBlock x:Name="txtLatd" Text="00.00 (00.00 W)" Margin="10,0,0,0"
                   Style="{StaticResource rscFontStyle}" >
        </TextBlock>
    </StackPanel>
    <!-- Longitude コントロールのある StackPanel -->
    <StackPanel Orientation="Horizontal" Margin="5">
        <TextBlock Text=" Longitude: " Style="{StaticResource rscFontStyle}" ></TextBlock>
        <Slider  x:Name="sldLong" Minimum="-180" Maximum="180"
                 Width="60" Value="0" SmallChange="1" LargeChange="5"
                 ValueChanged="sldLong_ValueChanged">
        </Slider>
        <TextBlock x:Name="txtLong" Text="00.00 (00.00 N)" Margin="10,0,0,0"
                   Style="{StaticResource rscFontStyle}" >
        </TextBlock>
    </StackPanel>
</StackPanel>
  1. 都市ナビゲーションのために以下のコントロールを追加します。

XAML の場合:

<TextBlock Text=" Known Map Cities:" VerticalAlignment="Center"
           Margin="0,10,0,0"
           Style="{StaticResource rscBoldFontStyle}" >
</TextBlock>
<!--都市ナビゲーション コントロールは、この StackPanel に動的に追加されることに注意してください-->
<StackPanel x:Name="pnlCities" Margin="5" >
  1. City クラスを WPF プロジェクトに追加します。

C# の場合:

// 地図の都市のためにデータを保存するためのクラス
public class City
{
    public string Name = string.Empty;
    public double Latitude = 0.0;
    public double Longitude = 0.0;
    public City()
    {
        Name = string.Empty;
        Latitude = 0.0;
        Longitude = 0.0;
    }
    public City(City newCity)
    {
        Name = newCity.Name;
        Latitude = newCity.Latitude;
        Longitude = newCity.Longitude;
    }
    public City(string newName, double newLatd, double newLong)
    {
        Name = newName;
        Latitude = newLatd;
        Longitude = newLong;
    }
}

Visual Basic の場合:

' 地図の都市のためにデータを保存するためのクラス
Public Class City
    Public Name As String = String.Empty
    Public Latitude As Double = 0.0
    Public Longitude As Double = 0.0
    Public Sub New()
        Name = String.Empty
        Latitude = 0.0
        Longitude = 0.0
    End Sub
    Public Sub New(ByVal newCity As City)
        Name = newCity.Name
        Latitude = newCity.Latitude
        Longitude = newCity.Longitude
    End Sub
    Public Sub New(ByVal newName As String, ByVal newLatd As Double, ByVal newLong As Double)
        Name = newName
        Latitude = newLatd
        Longitude = newLong
    End Sub
End Class
  1. WPF プロジェクトに既知の都市のリストで Cities 静的クラスを追加します。

C# の場合:

// コレクションとして既知の地図座標で都市を保存するためのクラス
public static class Cities
{
    static Cities()
    {
        _List = new List<City>() {
            Washington, Toronto, Mexico, Montevideo,
            London, Madrid, Rome,
            Paris, Warsaw, Moscow, Sydney, Johannesburg,
            Tokyo, Beijing, Seoul, HongKong,
            Cairo, Casablanca
         };
    }
    private static List<City> _List;
    public static List<City> List
    {
        get { return _List; }
    }
    // アジア
    public static City Tokyo = new City("Tokyo", 35.67, 139.74);
    public static City Beijing = new City("Beijing", 39.90, 116.38);
    public static City Seoul = new City("Seoul", 37.55, 126.97);
    public static City HongKong = new City("Hong Kong", 22.28, 114.12);
    // アメリカ
    public static City Washington = new City("Washington", 38.89, -77.03);
    public static City Mexico = new City("Mexico", 19.43, -99.13);
    public static City Toronto = new City("Toronto", 43.64, -79.38);
    public static City Montevideo = new City("Montevideo", -34.88, -56.16);
    // ヨーロッパ
    public static City Moscow = new City("Moscow", 55.75, 37.61);
    public static City London = new City("London", 51.51, -0.13);
    public static City Madrid = new City("Madrid", 40.42, -3.70);
    public static City Rome = new City("Rome", 41.90, 12.49);
    public static City Paris = new City("Paris", 48.85, 2.34);
    public static City Warsaw = new City("Warsaw", 52.23, 21.0);
    // オーストラリア
    public static City Sydney = new City("Sydney", -33.86, 151.20);
    // アフリカ
    public static City Johannesburg = new City("Johannesburg", -26.20, 28.04);
    public static City Cairo = new City("Cairo", 30.14, 31.74);
    public static City Casablanca = new City("Casablanca", 33.60, -7.63);
}

Visual Basic の場合:

' コレクションとして既知の地図座標で都市を保存するためのクラス
Public Module Cities
    Public ReadOnly Property List() As List(Of City)
        Get
            Return New List(Of City)(New City() {Washington, _
                                                 Toronto, Mexico, Montevideo, _
                                                 London, Madrid, Rome, _
                                                 Paris, Warsaw, Moscow, Sydney, _
                                                 Johannesburg, Tokyo, Beijing, _
                                                 Seoul, HongKong, _
                                                 Cairo, Casablanca})
        End Get
    End Property
    ' アジア
    Public Tokyo As New City("Tokyo", 35.67, 139.74)
    Public Beijing As New City("Beijing", 39.9R, 116.38)
    Public Seoul As New City("Seoul", 37.55, 126.97)
    Public HongKong As New City("Hong Kong", 22.28, 114.12)
    ' アメリカ
    Public Washington As New City("Washington", 38.89, -77.03)
    Public Mexico As New City("Mexico", 19.43, -99.13)
    Public Toronto As New City("Toronto", 43.64, -79.38)
    Public Montevideo As New City("Montevideo", -34.88, -56.16)
    ' ヨーロッパ
    Public Moscow As New City("Moscow", 55.75, 37.61)
    Public London As New City("London", 51.51, -0.13)
    Public Madrid As New City("Madrid", 40.42, -3.7R)
    Public Rome As New City("Rome", 41.9R, 12.49)
    Public Paris As New City("Paris", 48.85, 2.34)
    Public Warsaw As New City("Warsaw", 52.23, 21.0R)
    ' オーストラリア
    Public Sydney As New City("Sydney", -33.86, 151.2R)
    ' アフリカ
    Public Johannesburg As New City("Johannesburg", -26.2R, 28.04)
    Public Cairo As New City("Cairo", 30.14, 31.74)
    Public Casablanca As New City("Casablanca", 33.6R, -7.63)
End Module
  1. MainPage.xaml.cs ファイルで、以下の名前空間を追加します。

C# の場合:

using Infragistics.Controls.Maps;
using Infragistics;

Visual Basic の場合:

Imports Infragistics.Controls.Maps
Imports Infragistics
  1. 以下のローカル変数を追加します。

C# の場合:

private double _MapLatitude = 0;
private double _MapLongitude = 0;

Visual Basic の場合:

Private _MapLatitude As Double = 0
Private _MapLongitude As Double = 0
  1. xamMap コントロールの Loaded イベントを処理します。

C# の場合:

private void xamMap_Loaded(object sender, RoutedEventArgs e)
{
    Point winTopLeft = this.xamMap.MapProjection.ProjectToMap(new Point(-180, 90));
    Point winBottomRight = this.xamMap.MapProjection.ProjectToMap(new Point(180, -90));
    Rect winRect = new Rect();
    winRect.X = Math.Min(winTopLeft.X, winBottomRight.X);
    winRect.Y = Math.Min(winTopLeft.Y, winBottomRight.Y);
    winRect.Width = Math.Abs(winTopLeft.X - winBottomRight.X);
    winRect.Height = Math.Abs(winTopLeft.Y - winBottomRight.Y);
    this.xamMap.WindowRect = this.xamMap.WorldRect = winRect;
    this.xamMap.Layers[0].WorldRect = this.xamMap.WorldRect;
    AddMapCoordinateLines();
    AddMapLocationTracker();
    AddMapCityButtons();
    MoveMapToLocation(0, 0);
}

Visual Basic の場合:

Private Sub xamMap_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim winTopLeft As Point = Me.xamMap.MapProjection.ProjectToMap(New Point(-180, 90))
    Dim winBottomRight As Point = Me.xamMap.MapProjection.ProjectToMap(New Point(180, -90))
    Dim winRect As Rect = New Rect()
    winRect.X = Math.Min(winTopLeft.X, winBottomRight.X)
    winRect.Y = Math.Min(winTopLeft.Y, winBottomRight.Y)
    winRect.Width = Math.Abs(winTopLeft.X - winBottomRight.X)
    winRect.Height = Math.Abs(winTopLeft.Y - winBottomRight.Y)
    Me.xamMap.WorldRect = winRect
    Me.xamMap.WindowRect = Me.xamMap.WorldRect
    Me.xamMap.Layers(0).WorldRect = Me.xamMap.WorldRect
    AddMapCoordinateLines()
    AddMapLocationTracker()
    AddMapCityButtons()
    MoveMapToLocation(45, 0)
End Sub
  1. 地図の位置トラッカーを追加するためにメソッドを追加します。

C# の場合:

private void AddMapLocationTracker()
{
    Point mapLocation = this.xamMap.WindowCenter;
    // デカルト座標から測地座標への投影を使用して worldLocation を取得します
    Point worldLocation = this.xamMap.MapProjection.UnprojectFromMap(mapLocation);
    String elemCaption = Environment.NewLine + Environment.NewLine +
                         Environment.NewLine + Environment.NewLine +
                         String.Format("Long: {0:0.00}", worldLocation.X) +
                         Environment.NewLine +
                         String.Format("Lat:  {0:0.00}", worldLocation.Y);
    Point elemLocation = mapLocation;
    // Symbol 要素を作成します
    SymbolElement mapTracker = new SymbolElement()
    {
        Name = "mapTracker",
        Caption = elemCaption,
        FontSize = 16,
        Foreground = new SolidColorBrush(Colors.Green),
        Stroke = new SolidColorBrush(Colors.Green),
        StrokeThickness = 4,
        SymbolOrigin = elemLocation,
        SymbolType = MapSymbolType.Bubble,
        SymbolSize = 20
    };
    // Symbol 要素を地図コントロールに追加します
    this.xamMap.Layers[0].Elements.Add(mapTracker);
}

Visual Basic の場合:

Private Sub AddMapLocationTracker()
    Dim mapLocation As Point = Me.xamMap.WindowCenter
    ' デカルト座標から測地座標への投影を使用して worldLocation を取得します
    Dim worldLocation As Point = Me.xamMap.MapProjection.UnprojectFromMap(mapLocation)
    Dim elemCaption As String = Environment.NewLine + Environment.NewLine + _
                                Environment.NewLine + Environment.NewLine + _
                                String.Format("Long: {0:0.00}", worldLocation.X) + _
                                Environment.NewLine + _
                                String.Format("Lat:  {0:0.00}", worldLocation.Y)
    Dim elemLocation As Point = mapLocation
    ' Symbol 要素を作成します
    Dim mapTracker As New SymbolElement()
    mapTracker.Name = "mapTracker"
    mapTracker.Caption = elemCaption
    mapTracker.FontSize = 16
    mapTracker.Foreground = New SolidColorBrush(Colors.Green)
    mapTracker.Stroke = New SolidColorBrush(Colors.Green)
    mapTracker.StrokeThickness = 4
    mapTracker.SymbolOrigin = elemLocation
    mapTracker.SymbolType = MapSymbolType.Bubble
    mapTracker.SymbolSize = 20
    ' Symbol 要素を地図コントロールに追加します
    Me.xamMap.Layers(0).Elements.Add(mapTracker)
End Sub
  1. 地図の座標線を追加するためのメソッドを追加します。

C# の場合:

 private void AddMapCoordinateLines()
{
    // 地図の主経度線を追加します
    for (int i = -180; i < 180; i += 5)
    {
        if (i%15 == 0)
            AddMapLongitudeLine(i, Colors.Black, 0.5);
        else
            AddMapLongitudeLine(i, Colors.LightGray, 0.5);
    }
    // 地図の主緯線を追加します
    for (int i = -90; i < 90; i += 5)
    {
        if (i % 15 == 0)
            AddMapLatitudeLine(i, Colors.Black, 0.5);
        else
            AddMapLatitudeLine(i, Colors.LightGray, 0.5);
    }
    // 癌株の地図屈性を追加します
    AddMapLatitudeLine(23, Colors.Yellow, 1);
    // カプリコン線の地図屈性を追加します
    AddMapLatitudeLine(-23, Colors.Yellow, 1);
}

Visual Basic の場合:

Private Sub AddMapCoordinateLines()
    ' 地図の主経度線を追加します
    For i As Integer = -180 To 179 Step 5
        If i Mod 15 = 0 Then
            AddMapLongitudeLine(i, Colors.Black, 0.5)
        Else
            AddMapLongitudeLine(i, Colors.LightGray, 0.5)
        End If
    Next
    ' 地図の主緯線を追加します
    For i As Integer = -90 To 89 Step 5
        If i Mod 15 = 0 Then
            AddMapLatitudeLine(i, Colors.Black, 0.5)
        Else
            AddMapLatitudeLine(i, Colors.LightGray, 0.5)
        End If
    Next
    ' 癌株の地図屈性を追加します
    AddMapLatitudeLine(23, Colors.Yellow, 1)
    ' カプリコン線の地図屈性を追加します
    AddMapLatitudeLine(-23, Colors.Yellow, 1)
End Sub
  1. 経度線を追加するためにメソッドを追加します。

C# の場合:

private void AddMapLongitudeLine(int longitude, Color clr, double stroke)
{
    List<Point> coordPoints = new List<Point>();
    coordPoints.Add(new Point(longitude, -90));
    coordPoints.Add(new Point(longitude, 90));
    // 線の終点の線分群コレクション
    MapPolylineCollection coordLine = new MapPolylineCollection();
    // 測地座標をデカルト座標に変換します
    coordLine.Add(this.xamMap.MapProjection.ProjectToMap(coordPoints));
    // 線分群を使用してパス要素を作成して点を設定します
    PathElement lineElement = new PathElement() { Polylines = coordLine };
    lineElement.Fill = new SolidColorBrush(clr);
    lineElement.StrokeThickness = stroke;
    lineElement.ToolTip = "Longitude: " + LongitudeToString(longitude);
    lineElement.Caption = LongitudeToString(longitude);
    // パス要素のために worldRect を設定します
    Rect worldRect = lineElement.WorldRect;
    worldRect = coordLine.GetWorldRect();
    lineElement.WorldRect = worldRect;
    // パス要素を地図コントロールに追加します
    this.xamMap.Layers[0].Elements.Add(lineElement);
}

Visual Basic の場合:

Private Sub AddMapLongitudeLine(ByVal longitude As Integer, ByVal clr As Color, ByVal stroke As Double)
    Dim coordPoints As New List(Of Point)()
    coordPoints.Add(New Point(longitude, -90))
    coordPoints.Add(New Point(longitude, 90))
    ' 線の終点の線分群コレクション
    Dim coordLine As New MapPolylineCollection()
    ' 測地座標をデカルト座標に変換します
    coordLine.Add(Me.xamMap.MapProjection.ProjectToMap(coordPoints))
    ' 線分群を使用してパス要素を作成して点を設定します
    Dim lineElement As New PathElement()
    lineElement.Fill = New SolidColorBrush(clr)
    lineElement.StrokeThickness = stroke
    lineElement.ToolTip = "Longitude: " & LongitudeToString(longitude)
    lineElement.Caption = LongitudeToString(longitude)
    ' パス要素のために worldRect を設定します
    Dim worldRect As Rect = lineElement.WorldRect
    worldRect = coordLine.GetWorldRect()
    lineElement.WorldRect = worldRect
    ' パス要素を地図コントロールに追加します
    Me.xamMap.Layers(0).Elements.Add(lineElement)
End Sub
  1. 緯度線を追加するためのメソッドを追加します。

C# の場合:

private void AddMapLatitudeLine(int latitude, Color clr, double stroke)
{
    List<Point> coordPoints = new List<Point>();
    coordPoints.Add(new Point(-180, latitude));
    coordPoints.Add(new Point(180, latitude));
    // 線の終点の線分群コレクション
    MapPolylineCollection coordLine = new MapPolylineCollection();
    // 測地座標をデカルト座標に変換します
    coordLine.Add(this.xamMap.MapProjection.ProjectToMap(coordPoints));
    // 線分群を使用してパス要素を作成して点を設定します
    PathElement lineElement = new PathElement() { Polylines = coordLine };
    lineElement.Fill = new SolidColorBrush(clr);
    lineElement.StrokeThickness = stroke;
    lineElement.ToolTip = "Latitude: " + LatitudeToString(latitude);
    lineElement.Caption = LatitudeToString(latitude);
    // パス要素のために worldRect を設定します
    Rect worldRect = lineElement.WorldRect;
    worldRect = coordLine.GetWorldRect();
    lineElement.WorldRect = worldRect;
    // パス要素を地図コントロールに追加します
    this.xamMap.Layers[0].Elements.Add(lineElement);
}

Visual Basic の場合:

Private Sub AddMapLatitudeLine(ByVal latitude As Integer, ByVal clr As Color, ByVal stroke As Double)
    Dim coordPoints As New List(Of Point)()
    coordPoints.Add(New Point(-180, latitude))
    coordPoints.Add(New Point(180, latitude))
    ' 線の終点の線分群コレクション
    Dim coordLine As New MapPolylineCollection()
    ' 測地座標をデカルト座標に変換します
    coordLine.Add(Me.xamMap.MapProjection.ProjectToMap(coordPoints))
    ' 線分群を使用してパス要素を作成して点を設定します
    Dim lineElement As New PathElement()
    lineElement.Fill = New SolidColorBrush(clr)
    lineElement.StrokeThickness = stroke
    lineElement.ToolTip = "Latitude: " & LatitudeToString(latitude)
    lineElement.Caption = LatitudeToString(latitude)
    ' パス要素のために worldRect を設定します
    Dim worldRect As Rect = lineElement.WorldRect
    worldRect = coordLine.GetWorldRect()
    lineElement.WorldRect = worldRect
    ' パス要素を地図コントロールに追加します
    Me.xamMap.Layers(0).Elements.Add(lineElement)
End Sub
  1. 地図の市ナビゲーション ボタンを追加するためにメソッドを追加します。

C# の場合:

private void AddMapCityButtons()
{
    // すべての既知の都市のボタンを追加します
    for (int i = 0; i < Cities.List.Count; i++)
    {
        Button btn = new Button();
        btn.Content = Cities.List[i].Name;
        btn.Margin = new System.Windows.Thickness(5, 2, 5, 0);
        btn.Click += new RoutedEventHandler(btnCity_Click);
        this.pnlCities.Children.Add(btn);
    }
}

Visual Basic の場合:

Private Sub AddMapCityButtons()
    ' すべての既知の都市のボタンを追加します
    For i As Integer = 0 To Cities.List.Count - 1
        Dim btn As New Button()
        btn.Content = Cities.List(i).Name
        btn.Margin = New System.Windows.Thickness(5, 2, 5, 0)
        AddHandler btn.Click, AddressOf btnCity_Click
        Me.pnlCities.Children.Add(btn)
    Next
End Sub
  1. すべての地図の都市ナビゲーション ボタンのために Click イベントを実装します。

C# の場合:

private void btnCity_Click(object sender, RoutedEventArgs e)
{
    Button btn = (Button)sender;
    // 地図で都市の名前を検索して拡大します
    for (int i = 0; i < Cities.List.Count; i++)
    {
        if (btn.Content.Equals(Cities.List[i].Name))
        {
            ZoomMapToCity(Cities.List[i]);
            break;
        }
    }
}

Visual Basic の場合:

Private Sub btnCity_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim btn As Button = DirectCast(sender, Button)
    ' 名前を検索して地図で都市を拡大します
    For i As Integer = 0 To Cities.List.Count - 1
        If btn.Content.Equals(Cities.List(i).Name) Then
            ZoomMapToCity(Cities.List(i))
            Exit For
        End If
    Next
End Sub
  1. 地図で拡大するためのメソッドを都市に追加します。

C# の場合:

private void ZoomMapToCity(City mapCity)
{
    // ズーム ボックスの座標を作成します
    Point worldTopLeft = new Point(mapCity.Longitude - 2,
                                   mapCity.Latitude + 2);
    Point worldBottomRight = new Point(mapCity.Longitude + 2,
                                       mapCity.Latitude - 2);
    // 測地座標をデカルト座標に変換します
    Point winTopLeft = this.xamMap.MapProjection.ProjectToMap(worldTopLeft);
    Point winBottomRight = this.xamMap.MapProjection.ProjectToMap(worldBottomRight);
    Rect winRect = new Rect();
    winRect.X = Math.Min(winTopLeft.X, winBottomRight.X);
    winRect.Y = Math.Min(winTopLeft.Y, winBottomRight.Y);
    winRect.Width = Math.Abs(winTopLeft.X - winBottomRight.X);
    winRect.Height = Math.Abs(winTopLeft.Y - winBottomRight.Y);
    this.xamMap.WindowRect = winRect;
}

Visual Basic の場合:

Private Sub ZoomMapToCity(ByVal mapCity As City)
    '  ズーム ボックスの座標を作成します
    Dim worldTopLeft As New Point(mapCity.Longitude - 2, mapCity.Latitude + 2)
    Dim worldBottomRight As New Point(mapCity.Longitude + 2, mapCity.Latitude - 2)
    ' 測地座標をデカルト座標に変換します
    Dim winTopLeft As Point = Me.xamMap.MapProjection.ProjectToMap(worldTopLeft)
    Dim winBottomRight As Point = Me.xamMap.MapProjection.ProjectToMap(worldBottomRight)
    Dim winRect As New Rect()
    winRect.X = Math.Min(winTopLeft.X, winBottomRight.X)
    winRect.Y = Math.Min(winTopLeft.Y, winBottomRight.Y)
    winRect.Width = Math.Abs(winTopLeft.X - winBottomRight.X)
    winRect.Height = Math.Abs(winTopLeft.Y - winBottomRight.Y)
    Me.xamMap.WindowRect = winRect
End Sub
  1. 地図を移動するためのメソッドを測地場所に追加します。

C# の場合:

private void MoveMapToLocation(double longitude, double latitude)
{
    Point worldLocation = new Point(longitude, latitude);
    // 測地座標をデカルト座標に変換します
    Point winCenter = this.xamMap.MapProjection.ProjectToMap(worldLocation);
    this.xamMap.WindowCenter = winCenter;
}

Visual Basic の場合:

Private Sub MoveMapToLocation(ByVal longitude As Double, ByVal latitude As Double)
    Dim worldLocation As New Point(longitude, latitude)
    ' 測地座標をデカルト座標に変換します
    Dim winCenter As Point = Me.xamMap.MapProjection.ProjectToMap(worldLocation)
    Me.xamMap.WindowCenter = winCenter
End Sub
  1. xamMap コントロールの WindowRectChanged イベントを処理します。

C# の場合:

private void xamMap_WindowRectChanged(object sender, MapWindowRectChangedEventArgs e)
{
    Point mapLocation = this.xamMap.WindowCenter;
    // デカルト座標を測地座標に変換します
    Point worldLocation = this.xamMap.MapProjection.UnprojectFromMap(mapLocation);
    _MapLongitude = worldLocation.X;
    _MapLatitude = worldLocation.Y;
    UpdateMapLocationPane();
    UpdateMapLocationTracker();
}

Visual Basic の場合:

Private Sub xamMap_WindowRectChanged(ByVal sender As Object, ByVal e As MapWindowRectChangedEventArgs)
    Dim mapLocation As Point = Me.xamMap.WindowCenter
    ' デカルト座標を測地座標に変換します
    Dim worldLocation As Point = Me.xamMap.MapProjection.UnprojectFromMap(mapLocation)
    _MapLongitude = worldLocation.X
    _MapLatitude = worldLocation.Y
    UpdateMapLocationPane()
    UpdateMapLocationTracker()
End Sub
  1. 地図の場所ペインを更新するためのメソッドを追加します。

C# の場合:

private void UpdateMapLocationPane()
{
    // 地図の場所ペインの座標をフォーマットします
    this.txtLong.Text = LongitudeToString(_MapLongitude);
    this.txtLatd.Text = LatitudeToString(_MapLatitude);
}

Visual Basic の場合:

Private Sub UpdateMapLocationPane()
    ' 地図の場所ペインの座標をフォーマットします
    Me.txtLong.Text = LongitudeToString(_MapLongitude)
    Me.txtLatd.Text = LatitudeToString(_MapLatitude)
End Sub
  1. 座標をフォーマットするために以下の 2 つのメソッドを文字列に追加します。

C# の場合:

private string LongitudeToString(double longitude)
{
    string str = String.Format("{0:0.00}", longitude);
    if (longitude < 0)
        str += String.Format(" ({0:0.00} W)", longitude);
    if (longitude > 0)
        str += String.Format(" ({0:0.00} E)", longitude);
    return str;
}
private string LatitudeToString(double latitude)
{
    string str = String.Format("{0:0.00}", latitude);
    if (latitude < 0)
        str += String.Format(" ({0:0.00} S)", latitude);
    if (latitude > 0)
        str += String.Format(" ({0:0.00} N)", latitude);
    return str;
}

Visual Basic の場合:

Private Function LongitudeToString(ByVal longitude As Double) As String
    Dim str As String = String.Format("{0:0.00}", longitude)
    If longitude < 0 Then str += String.Format(" ({0:0.00} W)", longitude)
    If longitude > 0 Then str += String.Format(" ({0:0.00} E)", longitude)
    Return str
End Function
Private Function LatitudeToString(ByVal latitude As Double) As String
    Dim str As String = String.Format("{0:0.00}", latitude)
    If latitude < 0 Then str += String.Format(" ({0:0.00} S)", latitude)
    If latitude > 0 Then str += String.Format(" ({0:0.00} N)", latitude)
    Return str
End Function
  1. 地図の場所トラッカーを更新するためのメソッドを追加します。

C# の場合:

private void UpdateMapLocationTracker()
{
    // 地図トラッカーの座標をフォーマットします
    String trackerCaption = Environment.NewLine + Environment.NewLine +
                            Environment.NewLine + Environment.NewLine +
                            LatitudeToString(_MapLatitude) +
                            Environment.NewLine +
                            LongitudeToString(_MapLongitude);
    Point trackerLocation = this.xamMap.WindowCenter;
    // 地図トラッカーを検索および更新します (Symbol 要素)
    for (int i = 0; i < this.xamMap.Layers[0].Elements.Count; i++)
    {
        if (this.xamMap.Layers[0].Elements[i].Name != null)
        {
            if (this.xamMap.Layers[0].Elements[i].Name.Equals("mapTracker"))
            {
                this.xamMap.Layers[0].Elements[i].SymbolOrigin = trackerLocation;
                this.xamMap.Layers[0].Elements[i].Caption = trackerCaption;
                break;
            }
        }
    }
}

Visual Basic の場合:

Private Sub UpdateMapLocationTracker()
    ' 地図トラッカーの座標をフォーマットします
    Dim trackerCaption As String = Environment.NewLine + Environment.NewLine + _
                                    Environment.NewLine + Environment.NewLine + _
                                    LatitudeToString(_MapLatitude) + _
                                    Environment.NewLine + _
                                    LongitudeToString(_MapLongitude)
    Dim trackerLocation As Point = Me.xamMap.WindowCenter
    ' 地図トラッカーを検索および更新します (Symbol 要素)
    For i As Integer = 0 To Me.xamMap.Layers(0).Elements.Count - 1
        If Me.xamMap.Layers(0).Elements(i).Name IsNot Nothing Then
            If Me.xamMap.Layers(0).Elements(i).Name.Equals("mapTracker") Then
                Me.xamMap.Layers(0).Elements(i).SymbolOrigin = trackerLocation
                Me.xamMap.Layers(0).Elements(i).Caption = trackerCaption
                Exit For
            End If
        End If
    Next
End Sub
  1. 緯度スライダーの ValueChanged イベントを処理します。

C# の場合:

private void sldLatd_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    _MapLatitude = e.NewValue;
    this.txtLatd.Text = String.Format("Lat:  {0:0.00}", e.NewValue);
    MoveMapToLocation(_MapLongitude, _MapLatitude);
}

Visual Basic の場合:

Private Sub sldLong_ValueChanged(ByVal sender As Object, ByVal e As RoutedPropertyChangedEventArgs(Of Double))
    _MapLongitude = e.NewValue
    Me.txtLong.Text = String.Format("Long: {0:0.00}", e.NewValue)
    MoveMapToLocation(_MapLongitude, _MapLatitude)
End Sub
  1. 経度スライダーの ValueChanged イベントを処理します。

C# の場合:

private void sldLong_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    _MapLongitude = e.NewValue;
    this.txtLong.Text = String.Format("Long: {0:0.00}", e.NewValue);
    MoveMapToLocation(_MapLongitude, _MapLatitude);
}

Visual Basic の場合:

Private Sub sldLong_ValueChanged(ByVal sender As Object, ByVal e As RoutedPropertyChangedEventArgs(Of Double))
    _MapLongitude = e.NewValue
    Me.txtLong.Text = String.Format("Long: {0:0.00}", e.NewValue)
    MoveMapToLocation(_MapLongitude, _MapLatitude)
End Sub
  1. アプリケーションを実行します。xamMap コントロールは、主地図座標および地図ナビゲーション コントロールと共に地理的画像の地図を表示します。