21. The realization of Hawkeye in WebGIS

21.1. Background

Hawkeye functionality is a common feature in WebGIS, and it is very convenient to implement with some open source frameworks. Of course, according to the style of the blogger from the bottom of the WebGIS series, here is a discussion with you to explore the simple implementation of the Hawkeye without the use of third-party framework.

21.2. Hawkeye function analysis

../_images/img_113.png

21.3. Implementation design

21.4. Linkage of the main image to the eagle eye

a.When the main image is panned, a map panning event is thrown after the panning is completed, and the event includes the true panning geographic length (GeoPanX, GeoPanY) parameter.

b.The hawkeye map listens to the translation event, gets the translation geographic length, converts the translation screen coordinates corresponding to the eagle’s eye map at this time (screenPanX, screenPanY), adds to the XY coordinates of the hawkeye map canvas, realizes the linkage of the eagle-eye map.

c.When the Hawkeye map panpans beyond the cache tile range, the tile needs to be reacquired.

21.5. Eagle-eye extent redraw when the main map zooms

a.The map zoom event is thrown when the main map zooms, which contains the true geographic extent parameters corresponding to the home map screen range (GeoScreenLeft, GeoScreenTop, GeoScreenRight, GeoScreenBottom and the map level at this time.

b.The Hawkeye monitors the zoom event to get the true geographic extent of the main map at this point, as well as the map level of the main map.

c.Determines whether the main map level at this point meets the parameter settings returned by drawing the main map, and if so, the main plot range at this time is drawn in the Eagle’s Eyes.

d.Convert the geoextent coordinates of the main map at this time to the screen coordinates on the Hawkeye and draw on the Hawkeye.

21.6. Hawkeye range box drag is the main chart linkage

a.The Hawkeye range box listens to mouse events in response to drag operations.

b.When the range box is dragged, the real geographic length of the drag (eagleGeoPanX, eagle GeoPanY) is triggered as a parameter along with the Hawkeye panning event.

c.The main map listens to the eagle-eye translation event, obtains the true translation geographic length of the Eagle’s eye and converts it into the screen translation coordinates corresponding to the main map, and pans the main map.

d.After the main graph pans, the main map translation event is triggered again, as described in the process in 3.1, and finally the Hawkeye will also pan the linkage.

21.7. Precautions

a.The map on the Hawkeye cannot be subject to mouse events (zoom, pan).

b.The range box color on hawkeye should be customizable.

21.8. Result Display

../_images/img_212.png