Openlayers 3 Overlay (cover) detailed

Overlay from the name, is covered by the map, covering the meaning, the main purpose is to cover a layer above the maps, to show the additional visible elements, visible elements are generally HTML elements, using Overlay, you can place the visible elements in any location of the map, forming a map on the effect of floating layer. For example, the corresponding coordinates on the map to place a logo, label, using overlay can do, specifically, click on a map location, pop-up pop-up box in the click location is the use of overlay.

Because overlay is a visible element that is fixed at a specific coordinate, moving the map (pan operation) and zooming, the overlay will not change relative to the map coordinates, and then move with the map. Overlay directly inherits ol.Object , many ol.Object objects ' methods and listening events are inherited directly into overlay.

Note: This time the title is different from the previous title, because overlay does not have a standard name, which is common in GIS. In this case, the Chinese name is not standard.

Initialize Properties

Overlay can accept many configuration parameters when initializing, which is a key-value pair that together form an object literal (options) and then pass it to its "constructor", such as ' new OL. Overlay (Options), the options here are the object literals of the parameter key-value pairs. A configurable key-value pair, defined as follows:

/** * Object literal with config options for the overlay. * @typedef{{ID: ( Number|string|undefined), *element: (Element|undefined), *Offset: (Array.< Number>|undefined), *position: (ol. Coordinate|undefined), *positioning: (ol. Overlaypositioning|string|undefined), *stopevent: (Boolean|undefined), *Insertfirst: (Boolean|undefined), *Autopan: (Boolean|undefined), *autopananimation: (olx.animation.PanOptions|undefined), *Autopanmargin: ( Number|undefined)}}* @api stable */olx. overlayoptions;

The meanings are as follows:

• ID, for the corresponding overlay set an ID, easy to use ol.Map the getOverlayById method to obtain the corresponding overlay;
• Element,overlay contains the DOM element;
• Offset, offsets, pixels, overlay relative to the drop position (position), the default value is [0, 0], positive values are shifted right and downward respectively;
• Position, where the overlay is placed under the frame of the coordinate system where the map is located;
• Positioning,overlay the relative position of the position, the possible values include,,,,,,,, and, bottom-left bottom-center bottom-right center-left center-center center-right top-left top-center top-right by default top-left , The upper left corner of element is coincident with position;
• Stopevent, the Map event propagation is stopped, by default true , that is, blocking propagation, may not be very good to understand, for example, when the mouse wheel scrolling on the map, will trigger the map zoom event, if the scroll wheel on the overlay, does not trigger the zoom event, if you want the mouse in the Scaling is also supported on the overlay, so set this property to True false ;
• Whether the Insertfirst,overlay should be added first to its container (container), and when Stopevent is set to true, the controls for overlay and openlayers are placed in a container, at which point Insertfirst is set to true, overlay is first added to the container, so that overlay defaults to the next layer (CSS) of the control, z-index so when Stopevent and Insertfirst both adopt default values, overlay defaults to the control The next layer of the piece;
• Autopan, triggered when the overlay setPosition method is triggered, when the overlay outside the map boundary, the map automatically moves to ensure that the overlay are all visible;
• Autopananimation, sets the Autopan effect animation, the parameter type is olx.animation.panOptions ;
• Autopanmargin, when the map is automatically translated, the edges of the map and the overlay (void) are in pixels, and the default is 20 pixels;

Supported events

Supported events are primarily inherited ol.Object change events that are triggered when overlay related properties or objects change:

• Change, triggered when the reference counter increases;
• Change:element,overlay the corresponding element of the change is triggered;
• Change:map,overlay the corresponding map changes when triggered;
• Change:offset,overlay the corresponding offset changes when triggered;
• Change:position,overlay the corresponding position changes when triggered;
• Change:positioning,overlay the corresponding positioning changes when triggered;
• Propertychange,overlay the corresponding property changes when triggered;

So how do you bind the corresponding event? Openlayers binding Events follow the General DOM event binding rules, including DOM Level 2 event binding, here is an example of an example of the overlay's position change when the console output string in the browser.

// example overlay event bindingvar overlay = new ol.Overlay({    ...});overlay.on("change:position"function(){    console.log("位置改变！");})

Method

Supported methods here we only introduce overlay-specific methods, and do not introduce their inherited methods, mainly for the properties of overlay and its associated object's get and set method.

• GetElement, gets the DOM element containing the overlay;
• GetId, obtain the ID of overlay;
• Getmap, gets the map object associated with the overlay;
• GetOffset, gets the offset property;
• GetPosition, gets the position attribute;
• Getpositioning, gets the positioning attribute;
• setElement; Set the element of overlay;
• Setmap, set the map object with the overlay;
• SetOffset, set offset;
• SetPosition, set the Position property;
• Setpositioning, set the positioning property.

Summarize

Using Overlay can make a lot of great results, any HTML element effect can be added to the map by Overlay, to form a covering effect, such as in the disaster point to place the dynamic point spread effect of the article to achieve the effect, and click on the map, the corresponding location pop-up information box, are using the overlay.

OK, just write here, what's the problem, you can leave a message under the article.

Openlayers 3 Overlay (cover) detailed