Algorithm analysis of the client map puzzle

Overview: The main idea is how to stitch tiles map pictures into a complete map of some concepts and related algorithms.

Basic concepts:

• Map Tile Address : http://mt2.google.cn/vt/[email protected]&hl=zh-cn&gl=cn&x=420&y=193 &z=9&s=galil

　　　　　　

Now it's time to add a map tile of this type to a complete map on the client side.

The tile size is: 256x256.

Key parameter parsing in URL:

Parameters	Describe
mt2.google.cn	Google Tile Service server, you can try mt1.google.cn still valid. Google provides more than one tile server, reduce server load, improve network access efficiency.
X	The horizontal index of the tile, starting at the leftmost position, the value is 0, and the right +1 increments.
Y	The vertical index of the tile, starting at the top, the value is 0, and the downward +1 increments.
Z	The level of the map, take Google as an example, the top level is 0, and then increments down.

• Map Projection: Web Mercator-the general map projection of the Internet map, the oval map projection Narihira surface of the body shape, for more information please Baidu, if no special instructions in this article is the Web Mercator projection.
• Bounds (Map range): [-20037508.3427892,-20037508.3427892, 20037508.3427892, 20037508.3427892], in meters, 20037508.3427892 means half the perimeter of the map, Take the map center point as the (0,0) coordinate.
• levels: The level of the map, for example: 0 ... 22.
• resolutions: an array of resolutions that corresponds to a level, that is, one level for one resolution, and a resolution that represents the geographic length represented by a single pixel under the current level.

•  Resolutions[n] = 20037508.3427892  * 2 /256 /(2  ^n) 

  • The Center: Map Displays the center point.
  • Level: map display levels.
  • viewsize: the size of the Map control window.

  Calculates the extent of the map display based on a known map center point, display level:

•  viewbounds = [Center.x-resolutions[l]*viewsize.width/2 , Center.y- Resolutions[l]*viewsize.height/2 , center.x + resolutions[l].viewsize.width/w, Center.y + resolutions[l].viewsize.height/h] 

  map graph:

  A map consists of a square of 4^n 256, and n is the level

  For example: The No. 0 level is 4^0, that is, the world map is represented by a 256 image. The

  1th-level world map should consist of 4^1 (4) of 256 images, which will divide the world map (a single image above) into 4 256 images.

  Down each level and so on ...

  Anatomy of the

  puzzle algorithm:

  1, Calculate tile URL

  You need to know the map control visual range starting point Tile index, the end tile index, the middle area of the tile index loop traversal can be drawn.

  Look below if you calculate the starting point, the End Tile URL index:

  Known: L (zoom level), bounds (map extent--[-20037508.3427892,-20037508.3427892, 20037508.3427892, 20037508.3427892]), Viewbounds (visual range of the map control), resolution (Resolutions[l]), Tile pixel width (256).

  Unknown: StartX (view start tile x-direction index), Starty (view start tile y-direction index), EndX (view non-trailing tile x-direction index), EndY (view non-trailer tile y-direction index).

  Solver:

• (a);

  Firsttileurl (starting tile URL) = http://**********?x=startx&y=starty&z=l;

  Endtileurl (end tile URL) = http://**********?x=endx&y=starty&z=l;

  The middle part of the URL loops through.

  All right! The URLs for all tiles that make up the view are already drawn. Here is the question of where to put these tiles.

  2. Calculate where tiles are placed on the map control

  First analysis: In fact, as long as the starting position of the tile pixel location to calculate it, because the tile pixel size of 256, the back of the tile location is clear.

  So here's just a look at the pixel position of the starting tile.

  Known: StartX (view start tile x-direction index), Starty (view starting tile y-direction index), resolution (Resolutions[l]), Tile pixel width (256), bounds (map extent--[-20037508.3427892,- 20037508.3427892, 20037508.3427892, 20037508.3427892]), Viewbounds (visual range of the map control).

  Unknown: Starttilex (x-direction geographical coordinates of the top left corner of the tile), Starttiley (the Y-direction geographical coordinates of the top left corner of the tile), Distancex (the pixel distance from the left of the tile to the left of the map control), Distancey (the pixel distance between the top of the tile and the top of the map control).

  Solving:

•  * * *= (viewbounds.leftbottom.x-starttilex)/= (Starttiley- VIEWBOUNDS.RIGHTTOP.Y)/resolutions[l]

  The formula is not the simplest, to facilitate understanding, I believe crossing now know the starting tile in the map control placement position-set the map control starting pixel position is (0,0), then the location of the tile pixels is (-distancex,-distancey). Other tiles are based on a 256-pixel-wide relationship.

  To this has been calculated the URL of each tile and where they should be placed, the preparation has been completed, direct map to complete the drawing work.

  The algorithm can be applied to Google, Baidu, Yahoo, Bing and other web Mercator projection map tiles.

Original link: Client map puzzle Algorithm analysis

Algorithm analysis of the client map puzzle