Bing Maps advanced Series 8: integrate OpenStreetMap in Bing Maps

The OSM (OpenStreetMap-Open Street Map) service is an implementation type that allows you to publish your own map data images, the motive behind the establishment of open street maps is to create and provide geographical information (like street maps) that can be freely used to everyone who wants to use them, just as free software gives users freedom, this article describes how to use the map service released by OSM in Bing Maps Silverlight Control development.

 

It is very easy to integrate OSM Maps in Bing Maps Silverlight Control. In fact, no matter what Maps are released in the form of map services, there is a set of Tile algorithms hidden behind them, finally, when a map is displayed on the client, the algorithm of the Tile ing system determines the request for the client to load the map data. In fact, we need to integrate OSM in Bing Maps, that is, to customize TileSource, and customize a TileSource for The OSM to be integrated, which is used to load the OSM map data. For details about the TileSystem of Bing Maps, refer to another blog: [Silverlight] Bing Maps Learning Series (7): Tile System for Bing Maps. there are simple application examples for TileSystem, and two blog posts about Tile System of Bing Maps in detail.

 

In the development of Bing Maps Silverlight Controls, there are multiple ways to implement custom TileSource. You can directly inherit the TileSource built in Bing Maps Silverlight Controls to implement layer loading without any limitations, it can also inherit from the LocationRectTileSource class to implement map layer loading of custom ranges. Here we take LocationRectTileSource as an example to demonstrate how custom TileSource loads OSM (http://www.openstreetmap.org/) map data of a specified range.

Public class OpenStreetMapTileSource: LocationRectTileSource
{
Private const string TilePathMapnik = @ "http: // {S} .tile.openstreetmap.org/{z}/{x}/policy}.png ";
Private readonly Random _ Rand = new Random ();
Private readonly string [] TilePathPrefixes = new [] {"a", "B", "c", "d", "e", "f "};

Public OpenStreetMapTileSource ()
: Base (TilePathMapnik,
New LocationRect (new Location (60, 60), new Location (13,140 )),
New Range <double> (1, 17 ))
{}

Public override Uri GetUri (int x, int y, int zoomLevel)
{
String prefix = TilePathPrefixes [_ Rand. Next (6)];
String url = this. UriFormat;
Url = url. Replace ("{S}", prefix );
Url = url. Replace ("{Z}", zoomLevel. ToString ());
Url = url. Replace ("{X}", x. ToString ());
Url = url. Replace ("{Y}", y. ToString ());

Return new Uri (url );
}
}

 

The above code block is the custom TileSource for The OSM (http://www.openstreetmap.org/) map. Next, you only need to set the source of the MapTileLayer map in the program to the TileSource to load the OSM map, OSM Maps are integrated with Bing Maps.

<M: Map x: Name = "map" Margin = "0, 0, 0" CredentialsProvider = "{StaticResource MyCredentials }"
ScaleVisibility = "Visible"
CopyrightVisibility = "Collapsed">
<M: MapTileLayer x: Name = "OSMTileLayer"> </m: MapTileLayer>
</M: Map>

 

You can add a MapTileLayer directly to the Map in XAML to load the Map of the specified TileSource, or dynamically construct MapTileLayer in the program, the two methods achieve the same efficiency. The above code block is a MapTileLayer layer directly added to the XAML code. You can set the source of the Tile layer as follows to load the OSM map.

OSMTileLayer. TileSources. Add (new OpenStreetMapTileSource ());

 

After the compilation project is run, you can see that the OSM gallery is successfully added to Bing Maps, as shown in details:

　　　　　　　　

 

Note that there are also many OSM types. When you customize the OSM Tile loading algorithm, you must compile it based on the different OSM maps to be integrated, for example, the following custom TileSource definition for loading an OSM map:

/// <Summary>
/// Customize the TileSource Of The OSM map service
/// </Summary>
Public class OSMTileSource: LocationRectTileSource
{
Public OSMTileSource ()
: Base (@ "http://az1923.vo.msecnd.net/osm/%2%/%0%/%1%.png ",
New LocationRect (new Location (-19.047, 47.379), new Location (-18.733, 47.645 )),
New Range <double> (1, 17 ))
{

}

/// <Summary>
/// Rewrite the Tile Algorithm
/// </Summary>
/// <Param name = "x"> </param>
/// <Param name = "y"> </param>
/// <Param name = "zoomLevel"> </param>
/// <Returns> </returns>
Public override Uri GetUri (int x, int y, int zoomLevel)
{
Return new Uri (string. Format (this. UriFormat, x, y, zoomLevel), UriKind. RelativeOrAbsolute );
}
}

 

The TileSource algorithm integrated with the OSM () map above is different. the Tile Algorithm for loading a MAP mainly depends on the Tile ing of the released OSM map. The definition in the code block above specifies that the range of the loaded map layer is not in the China region, which is the final effect:

　　　　　　　　

 

Recently, many of my friends have asked me a question: how can I publish my own images as a map service and load them into the map component for presentation? In fact, it is possible to implement this function. Of course, it is also painful to implement this function. First, you must understand the introduction and knowledge systems related to common, common, or common GIS, after learning about the related technical principles and tools, you can publish your images as The OSM map service. The method described in this article can be loaded into Bing Maps for presentation.

 

　　Recommended resources:

Http://www.openstreetmap.org/

Http://msdn.microsoft.com/en-us/library/ee690939 (v = MSDN.10). aspx

 

Copyright description

This article is an original article. You are welcome to repost it and indicate the source of the Article. Its copyright belongs to the author and the blog Park.

Author: Beniao, Microsoft Bing Maps Development Group: 75662563

Article Source: http://beniao.cnblogs.com/or http://www.cnblogs.com/