Learning to use Bing Maps Silverlight Control (8): custom Tile System

10. custom Tile System

This article describes how to build your own Tile system and use it in Bing Maps.

Here the Tile data is obtained using the MapCruncher tool, see: http://www.cnblogs.com/xwgli/archive/2013/04/27/3046166.html

After obtaining Tile data, you can start. Because the custom Tile System is using Bing Maps Tile System, So aside from the basic principles of the Tile System (for details about Bing Maps Tile System, refer to: http://www.cnblogs.com/xwgli/archive/2013/04/12/3016345.html ), what needs to be done is a processing page that can return the corresponding Tile according to the request.

1. Add a file.

The Web application of the previous project is used for development. First, copy the generated Tile data to the website directory. The root directory \ Layers \ ChinaLayer exists, so that more Tile data can be added later. Create a general processing program: GetTile. ashx, which is used to process requests to Tile. The final directory is as follows:

The newly added ChinaLayer and GetTile. ashx are selected in blue.

2. GetTile. ashx

1) define the Request Path format:

/// <Summary> /// Request Path format: http: // {0}/GetTile. ashx? Type = {1} & format = {2} & quadkey = {3} // (0: server address; 1: Map type [china]; 2: image Format: [png]; 3: quadkey of the requested tile;) // </summary> public class GetTile: IHttpHandler {}

The request Tile is determined by passing three parameters to GetTile. ashx.

2) process parameters in ProcessRequest and return results:

Public void ProcessRequest (HttpContext context) {// obtain the request parameter string type = context. request ["type"]; string format = context. request ["format"]; // check the map type switch (type) {case "china": {// check the map format if (format! = "Png") goto default; // returns the map tile context in png format. response. contentType = "image/png"; // obtain the map tile parameters string quadkey and fileName; // check the validity of the parameters quadkey = context. request ["quadkey"]; // spliced file name fileName = quadkey + ". png "; // obtain the server path string ImgPath = context. server. mapPath ("~ /Layers/ChinaLayer/"+ fileName); // check whether there is a tile if (File. exists (ImgPath) {// return the corresponding tile data context. response. writeFile (ImgPath); return;} // The error jumps to default goto default;} default: // no image context is returned by default. response. clear (); context. response. close (); return ;}}

This is just a simple solution, just to implement the function, without considering other content, so please optimize the actual application as needed.

At this point, the custom Tile System is complete, and the following is the usage in the Bing Maps control.

3. Create TileSource

/// <Summary> /// Tile System of map of China /// </summary> public class ChinaTileSource: LocationRectTileSource {public ChinaTileSource () {string server = "localhost: 58591 "; // sets the Uri format of the Tile source Tile system, the {quadkey} is the corresponding position of the quadkey of each Tile. // here, the Tile system UriFormat = string of the map generated by the custom slicing is used. format ("http: // {0}/GetTile. ashx? Type = china & format = png & quadkey = {quadkey} ", server );}}

Note: The development server address used here is the address of the Tile system. You can flexibly customize the server address as needed.

(For details, refer to: renew .)

4. Use TileSource

You can customize a MapMode for special use, or overlay layers on other mapmodes. Here, you can create a MapMode to carry this TileSource:

/// <Summary> // China Map Mode 2 /// </summary> public class ChinaMode2: CustomModeBase {public ChinaMode2 () {// initialize ChinaTileSource TileSource = new ChinaTileSource (); // Add the tile source base to the tile layer. tileLayer. tileSources. add (TileSource); // Add the restricted range base to the map. latitudeRange = new Range <double> (0, 50); base. longitudeRange = new Range <double> (70,140); base. mapZoomRange = new Range <double> (1, 5 );}}

Then add a button for this mode on the toolbar:

ChangeMapModeButton btnChina2 = new ChangeMapModeButton (new ChinaMode2 (), "map of China 2", "map of China 2"); navBar. HorizontalPanel. Children. Add (btnChina2 );

Final effect: