15. Design and implementation of translation function in WebGIS¶
15.1. Preface¶
In this chapter, we’ll cover in detail another basic tool in the WebGIS toolbar, the Pan tool. When we introduced the command pattern, we already knew that this tool is Tool type.
This tool has two main functions:
A.When you switch to this tool, you can drag the map when you move the mouse.
B.When you switch to this tool, clicking the mouse (the mouse does not pan) can pan the map to the point of click center.
15.2. Design¶
15.2.1. Principle¶
We already know that the nature of layers in WebGIS is Canvas. The realization of the translation effect is essentially to change the upper-left coordinates of each Canvas.
Here I show the intention:
15.2.2. Ask a question¶
When I translate the canvas corresponding to the raster layer (in fact, all the raster canvas is a child in a parent container (mapCanvas), the translation is directly on the mapCanvas), then we will then screen the geographic extent When the inner tile request comes back, it is pasted on the canvas that has been translated, will there be any tile display disorder?
The answer is: no. Let me give you a general idea of why.
When we do translation, we don’t simply pan the origin of the canvas, we also convert the real geographic translation more pan size, and then change the actual screen geographic range accordingly. This results in the result that the canvas origin of the grid layer is A, which becomes A1 after translation, and the tile that is rerequested after translation, which corresponds to A1 instead of A. In this way, we solve the problem of tile insanity caused by re-requesting tiles after panning the grid layer.
15.2.3. Pan formula¶
mapCanvas.y=mapCanvas.y+moveY;
mapCanvas.x=mapCanvas.x+moveX;
screenGeoBounds.bottom=screenGeoBounds.bottom+(sliceLevelLength/tileSize)*(moveY);
screenGeoBounds.top=screenGeoBounds.top+(sliceLevelLength/tileSize)*(moveY);
screenGeoBounds.left=screenGeoBounds.left-(sliceLevelLength/tileSize)*(moveX);
screenGeoBounds.right=screenGeoBounds.right-(sliceLevelLength/tileSize)*(moveX);
Where mapCanvas represents (grid or vector) layers, screenGeoBounds represents the geographic extent of the screen, slieceLevelLength represents the actual geographic length represented by a tile in the current level of the map, and tileSize represents a tile screen pixel.
15.3. Implementation¶
15.3.1. Implementation of drag translation¶
A．When the mouse triggers the mouseDown event, the global variable flag is assigned true, indicating that the mouse has clicked and recorded the startPoint.
B．When the mouse triggers the mouseMove event, determine whether flag is true, and if so, call the translation formula to move the layer, calculating the moving mouseX and mouseY of the screen pixels.
Here you can also continue to expand, if there are other layers or features need to listen to the map translation time, you can throw a map translation event, throw the parameters can be set to the geographic coordinates where the mouse is located (converted by the mouse’s screen coordinates), and the geographic length of the mouse pan (converted by mouseX and mouseY). The conversion of screen coordinates to geographic coordinates can refer to Chapter 10 of this series.
C．When the mouse triggers the mouseUp event, determine whether the screen geographic range plus the geographic length of the movement is within the tolerance of the entire tile request, if the tile request is not triggered; The request parameter is the current screen geographic range plus the tolerance range.
15.3.2. Click on the implementation of panning¶
A.When the mouse triggers the mouseDown event, the global variable is click assigned true, and the other actions are the same.
B.This isclick parameter is assigned false when the mouse triggers the mouseMove event.
C.When the mouse triggers the mouseClick event, determine whether is click true and, if true, pan the map to a startPoint-centric location.
15.4. Ask two questions¶
A．After the map pans, the XY of the canvas of the vector layer changes, and can the features be displayed correctly on the canvas by converting the screen coordinates from the geo-coordinate stomorphic formula?
B．Does the vector layer canvas’s origin coordinate XY need to be restored to the initial (0,0)?
15.5. Summary¶
For the two questions in section 4, the answers I give are: can’t and needs. To answer these two questions, we must combine the previously given geo-coordinates with the screen coordinates interconversion formula and the translation formula we talked about today before we can do a good answer. We’ll cover this in the next chapter. Welcome to the continued attention.