Development of custom texture Layers Based on ags js, agsjs

Development of custom texture Layers Based on ags js, agsjs

1. Preface

Assume that a scenic spot has multiple images to be displayed on the map and scaled as the map scales (not simply by bubbles ). If we use the traditional scheme, we will first correct the image and assign it to the geographical information, then cut the map according to the map level, and finally overlay it to the map in the form of tiles. The workload is huge. However, considering that the image itself is not too large (less than 3 M), is there any other solution. Here I will discuss several solutions with you.

2. Solution

2.1 Based on grahpic and symbol

2.1.1 Train of Thought description

In short, it is to obtain the geographic coordinates of the upper left corner and lower right corner of the image, and assign the upper left corner coordinates to grahpic geometry, the symbol of grahpic grants the url of the image and the screenwidth and screenheight between two screen coordinates obtained through geographic coordinate conversion. Pay special attention to the need for the xoffset and yoffset attribute values of symbol (+ screenwidth/2,-screenheight/2 ). Finally, listen to the scaling event of the map, and calculate the width and height of the symbol.

2.1.2 Discussion

The advantage is that the implementation is simple:

A. Use existing objects in AGS directly.

B. do not consider the coordinate changes during drag and drop.

Disadvantage: When the map is enlarged to a certain level and the length and width of the symbol are greater than the screen range of the map, the symbol will not be rendered.

2.2 add DIV + IMG directly

2.2.1 Train of Thought description

The principle of DIV + IMG is the same as that of idea. the length and width of IMG and left and top of DIV are set by converting the screen coordinates of geographic coordinates. In particular, you need to monitor and process the drag and drop events on the map.

2.2.2 Discussion

Advantage: The image can be scaled to any level.

Disadvantage: The image itself cannot respond to map events. For example, when the mouse is on the image, scaling and dragging cannot be performed.

2.3 inherit the layers of AGS to customize the development texture Layers

In addition to inheriting the Layer, there is no major difference between other ideas and thinking 2. However, you can avoid the problem that the picture in IDEA 1 cannot be displayed beyond the screen range, or the map operation cannot be performed when the mouse in idea 2 is on the image.

2.4 conclusion

Taking into account the obvious weaknesses in train of thought I and train of thought II, train of thought III is a better choice.

3. Detailed Implementation(Inherit the Layer development texture layers of AGS)

3.1 inherit layer rewriting methods

Add a new DIV in the Map DOM:

When the layer is removed from the Map, all listening events are removed:

3.2 listen to scaling events for re-painting

The width and height of each IMG must be converted according to the screen coordinates corresponding to the current four-corner coordinates:

3.3 listen to the translation event for coordinate changes

4. Notes

A. When layers are inherited, The setMap function must return the DIV generated using DOJO. If GraphicLayer is inherited, it cannot return DIV, because GrahpicLayer is constructed by SVG.

B. To improve the display efficiency, the best way to translate and redraw is to directly change the position in the upper left corner of the DIV, instead of deleting all IMG and then adding it again.

5. Result Display

Take Guanyuan temple as an example:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.