Learn how to use Bing Maps Silverlight control (4): Add a custom tile layer

5. custom tile Source

1. Use locationrecttilesource to customize the BIND source with quadkey

Take the Bing online map as an example. Load the Bing map (Simplified Chinese) near Hainan in the control ).

First, analyze the URI of the tile System of Bing map. Here we will use the developer tool provided by Internet Explorer as an example:

Through analysis (how to analyze ......) We can see that the format of the tile system URI of Bing map (Simplified Chinese) is:

Http://r0.tiles.ditu.live.com/tiles/r?quadkey=.png? G = 99 & MKT = ZH-CN

The preceding http: // R numbers should refer to different servers. The key lies in the {quadkey} section. Here is the quadkey of each tile, obtain the content of each tile through the quadkey. (For more information about quadkey and tile, see: http://www.cnblogs.com/xwgli/archive/2013/04/12/3016345.html)

Then you can use the following code to load the tile layer:

Public mainpage () {initializecomponent (); // initialize a locationrecttilesource tile source object to obtain the tile content locationrecttilesource tilesource = new locationrecttilesource {// set the display range of the tile source, restricted by the longitude and latitude of the east-west north-south boundingrectangle = new locationrect () {East = 112, West = 107, South = 17, North = 20 }, // set the URI format of the tile source tile system. The {quadkey} is the corresponding position of each tile quadkey. // here the Bing map (Simplified Chinese) is used) tile system uriformat = "http://r0.tiles.ditu.live . Com/tiles/r?quadkey=.png? G = 99 & MKT = ZH-CN ", // sets the available level of the tile source. // Note: if the value is smaller than the specified range, it is not displayed, if the range is greater than this, the largest level image in the range is displayed and zoomrange = new range <double> (7, 19)} is enlarged; // A maptilelayer object is initialized, used to display the tile to the interface maptilelayer tilelayer = new maptilelayer (); // Add tilesource tile source tilelayer to the layer. tilesources. add (tilesource); // overlay the layer on the map control. children. add (tilelayer); // For the convenience of viewing the effect, set the map as a satellite map mode and direct the view to Hainan map. mode = new aerialmode (true); map. setview (new location (19,110), 7 );}

Effect after running:

In this way, you can set the mode of the map control to mercatormode if you only want to display the custom layer without displaying other content:

map.Mode = new MercatorMode();

This method requires the tile system to use quadkey as the tile index. tile systems in other formats are not supported. It seems that Microsoft is using this tile system... However, the official Microsoft does not recommend loading maps like this, because the URI of the tile system is likely to change, but it can be changed at any time .... You have to watch it at any time.

Another purpose is to download the data of the Bing map offline, which can be easily used to load the map.

In addition, mapcruncher, an auxiliary tool for cutting map tiles, can convert your images into Bing's tile system format. After conversion, you can also use this method for convenient loading. (The simple usage of the tool later written, first attached to the official website link: http://research.microsoft.com/en-us/um/redmond/projects/mapcruncher)

2. Load other map data

You can inherit tilesource and rewrite related methods to load map data of other non-bing map tile systems, such as Google...

First, analyze the URI of the tile System of Google map:

Through analysis (how to analyze ...), The URI of the Google map tile system is obtained:

Bytes

The URI of the tile System on Google maps seems to be complicated. I will not study it here. I just want to use it for the time being. I will study it in detail when using it...

Here we mainly focus on X, Y, and Z, which are coordinates and zooming.

In this way, you can override a googletilesource class by inheriting tilesource:

Public class googletilesource: tilesource {public googletilesource () {// URI of the tile System on Google map. Google's tile seems complicated, here we will simply select one to see the effect uriformat = "regular";} public override URI geturi (int x, int y, int zoomlevel) {// format the URI of the custom tile system, and obtain the URI return New uri (string. format (this. uriformat, X, Y, zoomlevel ));}}

The URI of the Google map tile system is set during initialization, And the geturi method is rewritten. (You can also use this method to overwrite locationrecttilesource to load data of different map services)

Then you can use the new tilesource:

Public mainpage () {initializecomponent (); // create a custom tile layer object maptilelayer customtilelayer = new maptilelayer (); // create a new Google tile source Class Object googletilesource gtilesource = new googletilesource (); // Add customtilelayer to the tile layer. tilesources. add (gtilesource); // Add the tile layer to the map control map. children. add (customtilelayer); // In this case, all layers are superimposed, and the following layers are removed from the map. mode = new mercatormode ();}

The following figure shows the running effect (specifically flat the Bing logo. This is the Bing map control ...) :

By now, the custom tile layer is over. Use it flexibly...

(For the above content, refer to: Workshop .)