14. Design and implementation of map zooming in and out in WebGIS

14.1. Background

In the previous chapter, we give the core of the entire toolbar design, use command patterns, and design the base class that a specific tool class inherits, the Command class. From the beginning of this chapter, we have officially entered the design and implementation of specific tool classes.

The Zoom-in and Zoom-out tools are one of the most basic and operate in three ways:

a.Click on the map to zoom in and out

b.Pull the box, zoom in and out

c.Roller Regulation Zoom-in

For these three ways of doing this, we have different code logic designs.

14.2. Analysis

a.Roller control map zoom-out is a fixed operation that should also take effect even when switching to another operation. Therefore, this feature should be put into the base class Command class.

b.When you click on a map, you should base your tool on click points, zoom inge up one level or zoom out one.

c.When you pull a frame to zoom in on a map, zoom in and out at the map level according to the size of the pull box.

However, there is a problem involved, the level of the map is fixed, if you simply turn the four-corner coordinates into a pull-box size, it is likely that there is no corresponding level of this four-corner coordinate at this time. At the same time, the four-corner coordinates do not have to be designed as the real size of the pull box, there are many systems, its real four-corner coordinates are the size of the pull box multiplied by a fixed parameter, such as 1.5 times.

d.When pulling the frame to shrink the map, there are two ways to implement it. A relatively complex, one relatively simple. Also below we will explain in detail.

14.3. How maps zoom in and out

To understand the principle of drip-in zoom-in and zoom-out, we must have a basic understanding of the acquisition of tiles and the stitching display in the grid map, and you can look back at chapters 2 through 6 in this series.

Here, I give a general explanation of the core principles of zooming in and out.

14.3.1. Flow chart

The following is a flow chart of the entire operation:

../_images/img_18.png

14.3.2. Specific explanation

The operation is divided into pull box and click, according to the two actions can obtain two parameters. The parameters obtained for the pull box include only the geographic four-corner coordinates of the screen, while the parameters obtained for clicks include the geographic four-corner coordinates of the screen and the level to display.

Depending on the parameters, the request of the tile is also divided into two kinds of request methods.

For parameters with only the four-corner coordinates of the screen geography, when the tile requests, the map level with the mildest coordinates of the four-corner coordinates on this screen is calculated first, and then the screen geographic four-corner coordinates and the true extent of the relevant tiles are calculated from the new figure.

For parameters that have both the screen geography four-corner coordinates and the display level, when tile requests, it is calculated from the new at this display level, how much the screen’s geographic four-corner coordinates should be, and the center point is the center point of the four-corner coordinates of the screen in the parameters.

4.Design of the zoom-in function

Above we mentioned two ways to zoom in on the design of the feature, click and pull the box.

a.Click, click point as the center point, give a range based on this center point (you can add or subtract a parameter by default), and then get the map level at this time, if the map is not the minimum level (0), then this Level minus 1, is the map level that needs to be displayed (Note: the smaller the level here, the smaller the scale, that is, zoom in).

b.When you pull the box, request tiles with the pull box range, or the cardinality multiplied by the range is the four-corner coordinates of the screen geography in the request parameter.

14.4. Design of zoom-out features

a.When clicking, there is no essential difference from the zoom ingest operation, but you just need to get the map level plus 1 at this time.

b.When pulling the box, as mentioned above. There are two ways to solve this, one is relatively difficult and the other is relatively simple. A little more difficult, we need to first arrive at this time the pull box range and the screen range ratio of recPercent, and then there are two ways to deal with: generally use the screen range at this time divided by recPercent to get the desired screen geographic range The complexity is to make relevant changes with this recPercent and multiply it by the geographic range of the screen. The two methods are essentially the same. The simple way is to reduce the function of the pull-frame operation designed as if the click-to-click operation can be.

14.5. Optimising the work

When you pull a frame, you can draw the rectangle of the pull box, which will make the effect beautify a lot. Only a few mouse events need to be listened to here, and the relevant logical controls can be implemented.

14.6. In-depth discussion

After we re-applied the map tile and changed the four-corner coordinates of the screen geography, we actually did a map refresh function. Here, we need to throw out a zoom event for a map after the map is zoomed in and out so that the vector layer on the map listens to the event before we can do the relevant redrawing. Otherwise, the vector layer will be superimposed with the current raster layer.

14.7. Summary

In this chapter we explain the design and implementation of map zooming in and down functions, and in the next chapter we begin to discuss the design and implementation of the translation function of the map. The panning feature relates to one of the issues I mentioned in the previous section, namely the offset of features in vector layers. We’ll also devote a chapter to the offset of coordinates. The solution to this problem, combined with the previously mentioned principle of screen coordinates and geographic coordinate conversion, can solve the problem of display of feature layers in vector layers.Welcome to the continued attention.