(vi) The mosaic display principle of map tiles on canvas in Webgis

1. Preface

In the previous five chapters, we introduced the basic framework and techniques of Webgis in the first chapter, the second section describes what is the tile row number and the reason for calculating it, and the third section describes how to calculate the number of tiles in this range by geographic range, The IV and fifth chapters describe how to get the URL for offline and online maps after getting the tile row number, and in this chapter we will show how to display the tiles in the browser at the corresponding location after the tile is obtained through the URL, stitching up the whole map.

2. Calculation of screen coordinates of tile starting point in upper left corner

In the third chapter, I introduce the principle and method of converting the screen coordinates of the tile starting point in the upper left corner, here I give the formula again:

OffSetX = ((Realminx-minx)/resolution);

OffSetY = ((Maxy-realmaxy)/resolution);

The English language represents the following meanings:

Realminx, Realmaxy: true geographic coordinates (GEOX,GEOY) corresponding to the top left corner tile of the request.

MinX, Maxy: The real geographic coordinates (GEOSCREENX,GEOSCREENY) corresponding to the upper-left corner of the screen's viewable range.

Resolution: The actual geographic unit length represented by the screen one pixel in the current map level.

Because the visual range, the upper-left corner of the screen coordinates (0,0).

So OffSetX and OffSetY are the starting point screen coordinates (offsetx,offsety) of the upper left corner tile.

Here if you have no idea of the conversion of the above parameters, please see the third chapter in this series-the geographical range to convert the row number.

3. Calculation of screen coordinates of arbitrary tiles

Again, I first give the relevant formula:

Coord.x = OffSetX + (clipx-fixedtilelefttopnumx) * tilesize;

Coord.y = OffSetY + (clipy-fixedtilelefttopnumy) * tilesize;

The English language represents the following meanings:

OffSetX, OffSetY: The screen coordinates of the top left corner tile

CLIPX, clipy: The current number of tiles

Fixedtilelefttopnumy, Fixedtilelefttopnumy: The top left corner of the tile row number

Tilesize: Tile size (pixels of a tile)

Coord: Current screen coordinates of tiles

Here Fixedtilelefttopnumy and Fixedtilelefttopnumy, in the third chapter I also introduced how to get.

4. Tile splicing Process

As you can see from the flowchart, tiling needs to be done by traversing the X and Y axes. Get tile screen coordinates followed by stitching. The number of loops involved in the X-and Y-axes is, in fact, the number of tiles requested, on the x-axis, and on the y-axis. Similarly, in the third chapter I have a more detailed explanation of the conversion of this number, here no longer described.

5. Front-end map shows the overall process

The resulting map is as follows:

6. Summary

At this point, the Webgis in the front-end map display series is over. I believe everyone in this series, more or less have a new understanding of Webgis. We know that the image is divided into raster images and vector images, here I just introduced the raster image loading in Webgis, then how to load the vector image? Similarly, with these principles, how do we design raster image classes, and later vector image classes, and so on? In the next series, we'll start exploring the design of core classes in Webgis. I hope you will continue to pay attention.

When I was in high school, watching people smoke, I always thought it was to pretend
College, roommates sometimes hide on the Yang terrace smoke, then feel that smokers may have a story in mind
At the time of the study, a friend often in the dead of night, while knocking on the code while smoking, began to feel that smoking to refresh is understandable
Work to the present, see the friends around to smoke, no longer think this is to dispel suffering, release music, relieve tired, play deep. Smoking is just a simple thing.

----Welcome reprint, but retain the copyright, please mark the obvious source: HTTP://WWW.CNB Logs.com/naaovegis