Developing custom map layers based on AGS JS

Article copyright by the author Xiaohui Li is and the blog park, if reproduced please clearly indicate the source: http://www.cnblogs.com/naaoveGIS/

1. Preface

Suppose that a scenic area has multiple images that need to be displayed on a map and scaled as the map is scaled (not simply shown with bubbles). If we take advantage of the traditional scheme, we first assign the image correction to the geographic information, then cut the graph according to the map level, and finally overlay the tiles to the map, the work is very heavy. However, given that the picture itself is not too large (less than 3M), then there is no other way to solve it. Here I will discuss with you a few ways to solve the problem.

2. Solution Ideas 2.1 based on grahpic and symbol to solve 2.1.1 idea Description

Simply said to get the upper left and right corner of the image of the corresponding geographical coordinates, to the grahpic geometry assigned to the upper left corner coordinates,grahpic symbol to give the image URL, And the ScreenWidth and screenheight of the two-point screen coordinates obtained by geographical coordinates conversion . In particular, it is important to note that the symbol's xoffset and yoffset two attribute values (+screenwidth/2,-screenheight/2). Finally, the zoom event of the map is monitored, and the width and height of the relevant symbol are calculated.

2.1.2 discussion

The advantages are simple to achieve:

A. The direct use of AGS already has the object completed.

B. Do not consider the change of coordinates when dragging.

Disadvantage: When the map is zoomed to a certain level, symbol's width is larger than theMap screen range, and symbol will no longer render.

2.2 add div+img directly to solve 2.2.1 idea Description

The div+img created for the image directly in the parent DIV where the map is located , with the same principle as the idea, set the length and width of each IMG by converting the screen coordinates of the geographic coordinates and the left and top. In particular, it is important to note that the map drag event also needs to be monitored and processed.

2.2.2 discussion

Advantage: Map zoom to any level can also zoom the display picture.

Disadvantage: The picture itself cannot respond to map events, such as when the mouse on the picture, zooming, dragging can not be done.

2.3 inherit the layer from AGS to customize the development map layer

In addition to the need to inherit layer, other ideas and ideas of the two is not much different. But you can avoid the idea of a picture over the screen can not display the problem, but also to avoid the idea of the mouse in the picture when the problem of map operation is not possible.

2.4 Summary

Considering the obvious disadvantage of thinking one and thinking two, the third is better choice.

3. Detailed implementation (Inherit the AGS layer Development map layers) 3.1 inheritance layer Rewrite related methods

Add a DIV to the DOM of map:

Remove all listener events when the layer is removed from the map:

3.2 monitoring scaling events for redrawing

the width and height of each img are converted according to the screen coordinates corresponding to the current four-corner coordinates:

3.3 monitor translation events for coordinate changes

4. a few notes

A. When you inherit a layer,the SETMAP function needs to return a DIV that is generated with dojo . If the inheritance is Graphiclayer, the return cannot be DIV, because Grahpiclayer is the SVG construct.

B. To improve display efficiency, the best way to pan redraw is to change the upper-left corner of the div directly, instead of deleting all the img and re-adding it.

5. results show

Take the Yuan Temple as an example:

                                                                             -----Welcome reprint, but retain the copyright, please indicate the source in obvious place: http://www.cnblogs.com/naaoveGIS/

                                                                               If you feel that this article has really helped you, you can sweep it for a small reward and encouragement, thank you ^_^

Developing custom map layers based on AGS JS