Openlayers learning-layer system (2)

In openlayers learning-layer system (1), draw the entire openlayers UML architecture diagram.

Here we will focus on the process of drawing the network tile map of openlayers. Here we will use the XYZ layer as an example for debugging and learning.

Before the discussion, we should first clarify some basic concepts:
Resolution (resolution ):The map distance represented by each pixel on the tile (unit: Map unit ).
Maxextent): The maximum range of a map or layer.
Tileorigincorner ):"TL" (upper left corner), "TR", "Bl", and "Br ".
Rowsign ):You do not need to call it directly. If tileorigincorner is set to "TL", this value is 1, which indicates that the row number is from top to bottom and the column number is from left to right, the default value is-1.

Ratio): The ratio of the map resolution to the corresponding level of tile resolution.

Debug the code and view the layer plotting mechanism, for example:

Is the whole process of creating a map.

(1) When any map view changes, the map moveTo method is executed. In this method, the baselayer method is used to determine whether or not baselayer exists. If yes, the baselayer moveTo method is executed.

(2) In the moveTo method of baselayer, the row and column numbers (initgridtiles) of the tiles to be drawn are calculated first ), the purpose is to calculate the storage address (URL) of the tile on the server ).

To calculate the row and column number of a tile, five parameters are required: tilebound, origin tileorigin, Resolution resolution, tilesize, and orientation of the map.

Assume that the direction of the map is from left to right, from top to bottom, thenCalculation of tile row and column numbersAs follows:

Colnum = math. Ceil (tilebound. getcenter (). Lon-tileorigin. Lon)/(tilesize. Width * Resolution ));

Rownum = math. Ceil (tileorigin. Lat-tilebound. getcenter (). LAT)/(tilesize. Height * Resolution ));

(3) In the initgridtiles () method, in addition to calculating the row and column numbers of each tile, the position of the tile on the map page (control Coordinate System) is also calculated ), the purpose is to display the map on the foreground page.

The method for calculating the drawing position is to first obtain the geographical coordinates of the layer in the upper-left corner of the MAP:

        var layerContainerDivLeft = this.map.layerContainerOriginPx.x;        var layerContainerDivTop = this.map.layerContainerOriginPx.y;

Then, use the geographical coordinates of the upper left corner of the tile displayed in the upper left corner of the layer container, and call getviewportpxfromlonlat () to calculate the screen coordinates of the vertex. As shown in:

The black border rectangle in the figure represents the screen of the drawing, that is, the DIV corresponding to the map, the rectangle of the red border represents the tile data, getviewportpxfromlonlat () the method calculates the screen coordinate value of a map coordinate value corresponding to the DIV reference coordinate system of the map. That is, to calculate the position where each tile is drawn, you can use this step to calculate the coordinates of the tiles in the upper left corner of the container ), other tile drawing positions can be calculated based on the positions.

In initgridtiles, an array of tiledata is obtained, which includes all the data required for the tile to be displayed on the screen, the row and column numbers of the tile, the geographic range coordinates of the tile, and the screen coordinates of the tile.

(4) After the tiledata array is initialized, you can start drawing. The drawing is the calling rendertile () method. In this method, you can call the geturl () of the layer () method to obtain the path of the tile data, initialize the DIV corresponding to the tile in the map container, add IMG data to the DIV, and point the SRC of IMG to the tile URL, complete the rendering of the map.

Conclusion:

The drawing method of tile map data is the same. initialize a div container whose size is the same as that of the tile. The Container stores an IMG, And the SRC of IMG is set to the tile URL.

The key to tile map data is to calculate the server path of the tile, that is, rewrite the geturl method.

The tile calculation method is the same. The row and column numbers of a tile can be calculated based on the source point, size, and number of the tile. The key is to understand the graph cutting protocol called by the TMS service.

Openlayers learning-layer system (2)