このトピックは、 XamGeographicMap™ コントロールの背景コンテンツで Map Quest からカスタムの地理的画像を作成および表示する方法を提供します。
以下の表に、このトピックを理解するための前提条件として求められるトピックをリストします。
Map Quest の地理的画像は、MapQuest 社が作成した無料の地図サービスです。この地理的画像サービスは、 http://www.mapquest.com に直接アクセスして利用できます。
デフォルトでは、XamGeographicMap コントロールは、Map Quest サービスからの地理的画像をサポートしていません。ただし、 GeographicMapImagery クラスは、他の地理的画像ソースから地理的画像タイルの実装を提供するように拡張できます。
以下の画像は、Map Quest サービスからの地理的画像タイルがある XamGeographicMap コントロールのプレビューです。
以下の手順は、 MapTileSource および GeographicMapImagery クラスを拡張して、 XamGeographicMap コントロールの背景コンテンツで Map Quest から地理的画像を作成および表示する方法を示します。
MapTileSource クラスを継承することによって、Map Quest 地理的画像のマルチスケール タイル ソースを作成します。
Visual Basic の場合:
Namespace IGGeographicMap.Extensions
''' <summary>
''' Map Quest サービスからの地理的画像のタイル ソースを表します
''' </summary>
Public Class MapQuestTileSource
Inherits Infragistics.Controls.Maps.MapTileSource
Public Sub New()
MyBase.New(134217728, 134217728, 256, 256, 0)
End Sub
#Region "TileMapStyle"
''' <summary>
''' MapQuest 地理的画像のタイル ソースのマップ スタイルを取得または設定します
''' </summary>
Public Property TileMapStyle() As MapQuestImageryStyle
Get
Return _TileMapStyle
End Get
Set
_TileMapStyle = Value
End Set
End Property
Private _TileMapStyle As MapQuestImageryStyle
#End Region
Private Const TileStreetPath As String = "http://otile4.mqcdn.com/tiles/1.0.0/osm/{Z}/{X}/{Y}.png"
Private Const TileAerialPath As String = "http://oatile3.mqcdn.com/naip/{Z}/{X}/{Y}.png"
''' <summary>
''' 地理的画像タイルの種類のパスを取得します
''' </summary>
''' <returns></returns>
Private Function GetTileType() As String
Return If(Me.TileMapStyle = MapQuestImageryStyle.SatelliteMapStyle, TileAerialPath, TileStreetPath)
End Function
''' <summary>
''' マップの特定の位置で、地理的画像タイルを取得するためにオーバーライドされたメソッド
''' </summary>
Protected Overrides Sub GetTileLayers(tileLevel As Integer, tilePositionX As Integer, tilePositionY As Integer, tileImageLayerSources As System.Collections.Generic.IList(Of Object))
Dim tilePath = GetTileType()
Dim zoom As Integer = tileLevel - 8
If zoom > 0 Then
Dim uriString As String = tilePath
uriString = uriString.Replace("{Z}", zoom.ToString())
uriString = uriString.Replace("{X}", tilePositionX.ToString())
uriString = uriString.Replace("{Y}", tilePositionY.ToString())
tileImageLayerSources.Add(New Uri(uriString))
End If
End Sub
End Class
''' <summary>
''' MapQuest 地理的画像のスタイルを定義します。
''' </summary>
Public Enum MapQuestImageryStyle
''' <summary>
''' Map Quest サービスからの地理的画像の通りのスタイルを指定します
''' </summary>
StreetMapStyle
''' <summary>
''' Map Quest サービスからの地理的画像の衛星スタイルを指定します
''' </summary>
SatelliteMapStyle
End Enum
End NamespaceC# の場合:
using System;
namespace IGGeographicMap.Extensions
{
/// <summary>
/// Map Quest サービスからの地理的画像のタイル ソースを表します
/// </summary>
public class MapQuestTileSource : Infragistics.Controls.Maps.MapTileSource
{
public MapQuestTileSource()
: base(134217728, 134217728, 256, 256, 0)
{ }
#region TileMapStyle
/// <summary>
/// MapQuest 地理的画像のタイル ソースのマップ スタイルを取得または設定します
/// </summary>
public MapQuestImageryStyle TileMapStyle { get; set; }
#endregion
private const string TileStreetPath = "http://otile4.mqcdn.com/tiles/1.0.0/osm/{Z}/{X}/{Y}.png";
private const string TileAerialPath = "http://oatile3.mqcdn.com/naip/{Z}/{X}/{Y}.png";
/// <summary>
/// 地理的画像タイルの種類のパスを取得します
/// </summary>
/// <returns></returns>
private string GetTileType()
{
return this.TileMapStyle == MapQuestImageryStyle.SatelliteMapStyle ?TileAerialPath : TileStreetPath;
}
/// <summary>
/// マップの特定の位置で、地理的画像タイルを取得するためにオーバーライドされたメソッド
/// </summary>
protected override void GetTileLayers(int tileLevel, int tilePositionX, int tilePositionY, System.Collections.Generic.IList<object> tileImageLayerSources)
{
var tilePath = GetTileType();
int zoom = tileLevel - 8;
if (zoom > 0)
{
string uriString = tilePath;
uriString = uriString.Replace("{Z}", zoom.ToString());
uriString = uriString.Replace("{X}", tilePositionX.ToString());
uriString = uriString.Replace("{Y}", tilePositionY.ToString());
tileImageLayerSources.Add(new Uri(uriString));
}
}
}
/// <summary>
/// MapQuest 地理的画像のスタイルを定義します
/// </summary>
public enum MapQuestImageryStyle
{
/// <summary>
/// Map Quest サービスからの地理的画像の通りのスタイルを指定します
/// </summary>
StreetMapStyle,
/// <summary>
/// Map Quest サービスからの地理的画像の衛星スタイルを指定します
/// </summary>
SatelliteMapStyle,
}
}GeographicMapImagery クラスから継承し、Map Quest の画像ソースを提供することによって、Map Quest サービスのサポートされている種類のマップ スタイルに対して地理的画像クラスを作成します。
Visual Basic の場合:
Imports Infragistics.Controls.Maps
Namespace IGGeographicMap.Extensions
''' <summary>
''' Map Quest サービスからの street map スタイルと共に地理的画像を表します
''' </summary>
Public Class MapQuestStreetImagery
Inherits GeographicMapImagery
Public Sub New()
MyBase.New(New MapQuestTileSource() With { .TileMapStyle = MapQuestImageryStyle.StreetMapStyle })
End Sub
End Class
''' <summary>
''' Map Quest サービスからの satellite map スタイルと共に地理的画像を表します
''' </summary>
Public Class MapQuestSatelliteImagery
Inherits GeographicMapImagery
Public Sub New()
MyBase.New(New MapQuestTileSource() With { .TileMapStyle = MapQuestImageryStyle.SatelliteMapStyle })
End Sub
End Class
End NamespaceC# の場合:
using Infragistics.Controls.Maps;
namespace IGGeographicMap.Extensions
{
/// <summary>
/// Map Quest サービスからの street map スタイルと共に地理的画像を表します
/// </summary>
public class MapQuestStreetImagery : GeographicMapImagery
{
public MapQuestStreetImagery()
: base(new MapQuestTileSource { TileMapStyle = MapQuestImageryStyle.StreetMapStyle })
{ }
}
/// <summary>
/// Map Quest サービスからの satellite map スタイルと共に地理的画像を表します
/// </summary>
public class MapQuestSatelliteImagery : GeographicMapImagery
{
public MapQuestSatelliteImagery()
: base(new MapQuestTileSource { TileMapStyle = MapQuestImageryStyle.SatelliteMapStyle })
{ }
}
}MapQuestStreetImagery オブジェクトのインスタンスを作成し、XamGeographicMap コントロールの Map Background コンテンツに設定します。
XAML の場合:
<ig:XamGeographicMap x:Name="GeoMap">
<ig:XamGeographicMap.BackgroundContent>
<custom:MapQuestStreetImagery />
</ig:XamGeographicMap.BackgroundContent>
</ig:XamGeographicMap>Visual Basic の場合:
Dim geoImagery = New MapQuestStreetImagery()
Me.GeoMap.BackgroundContent = geoImageryC# の場合:
var geoImagery = new MapQuestStreetImagery();
this.GeoMap.BackgroundContent = geoImagery;結果を確認するために、プロジェクトをビルドおよび実行します。手順を正しく実装した場合、XamGeographicMap は上記のプレビュー セクションで示したように表示されるはずです。
以下のトピックでは、このトピックに関連する情報を提供しています。