6. Stitching display principle on Canvas of map tiles in WebGIS¶
6.1. Preface¶
In the previous five chapters, we introduced the basic framework and techniques of WebGIS in the first chapter.The second chapter describes what the tile ranks number is and why it is calculated.The third chapter describes how the numbers of tiles within this range can be calculated by geographical scope.The fourth and fifth chapters describe how to get the URLs of offline and online maps after getting the tile ranks number.In this chapter, we’ll show you how to display tiles in the browser’s appropriate place and stitch up the entire map after getting tiles from the URL.
6.2. Calculation of the screen coordinates of the starting point of the tile in the upper left corner¶
In the third chapter, I introduce the conversion principle and method for the upper-left tile starting point screen coordinates, and I give this formula again here :
offSetX = ((realMinX- minX )/resolution);
offSetY = ((maxY - realMaxY )/resolution);
English means the following:
realMinX、realMaxY:True geographic coordinates of the requested top left tile（geoX,geoY）。
minX、maxY:True geographic coordinates for the top left corner of the screen’s visible range（geoScreenX,geoScreenY）。
resolution:Actual geographic unit length represented by a pixel on the screen at the current map level。
Because in the visible range, the upper left corner of the screen coordinates is（0,0）。
So offSetX and offSetY are the starting point screen coordinates of the tiles in the top left corner.（offSetX，offSetY）。
If you don’t know anything about the conversion of the above parameters, please check the third chapter in this series - convert the ranks number by geographic range.
6.3. Calculation of arbitrary tile screen coordinates¶
Again, I’ll start by giving the relevant formula：
coord.x = offSetX + ( clipX - fixedTileLeftTopNumX)* tileSize;
coord.y = offSetY + ( clipY - fixedTileLeftTopNumY)* tileSize;
English means the following:
offSetX、offSetY：Screen coordinates of the top-left tile
clipX、clipY：Current ranks number of the tile
fixedTileLeftTopNumY、fixedTileLeftTopNumY：The ranks number of the top left tile
tileSize：Tile size (pixel of a tile)
coord:Current screen coordinates of the tile
Here fixedTileLeftTopNumY and fixedTileLeftTopNumY, in the third chapter I also introduced how to get.
6.4. Tile stitching process¶
As can be seen from the flow chart, the splicing of the tiles requires traversing the X and Y axes. Splicing after acquiring the tile screen coordinates in turn.The number of traversals involved in the X and Y axes is actually the number of tiles requested, the number on the X axis, and the number on the Y axis.Similarly, in chapter three, I have a more detailed explanation of the conversion of this number, here is no longer restatement.
6.6. Summary¶
At this point, the front-end map display series in WebGIS has come to an end.I believe that in this series, you have a new understanding of WebGIS more or less.We know that images are divided into raster images and vector images,I just introduce the loading of raster images in WebGIS here, so how do vector images load?Again, with these principles, how do we design raster image classes, and later vector image classes, and so on?In the next series, we’ll begin exploring the design of the core classes in WebGIS.I hope you will continue to pay attention.