Detailed explanation of map overlay in openlayers6

1. Overlay Overview

Overlay means covering, as the name suggests, it appears on the map in another form. Many students confuse it with layers. It is mainly used to place some elements related to the map location. Common map overlays are of three types, such as: popup 彈窗, label標注信息, text文本信息, etc., and these overlays are equivalent to elements in HTML. The overlay attribute element is bound to the HTML element and the coordinate parameters are set at the same time - the HTML element is placed on the map. When panning and zooming, the HTML element will also move with the movement of the map.

Let's take a look at the description on the official website. In fact, this attribute exists in the map by default. It is the same as the layers, controls, and interactions in the previous article.默認加載地圖的情況下是允許設置默認的overlay覆蓋物. You can also add a separate coverage when a certain event or method is triggered. You can refer to the description in the previous article here, which will not be elaborated in detail.

2. Overlay property

Overlay can accept many configuration parameters when it is initialized. These configuration parameters are key-value pairs that together form an object literal (options), which are then passed to its "constructor", such as new ol.Overlay(options) , where options is an object literal consisting of parameter key-value pairs. The configurable key-value pairs are defined as follows: (red indicates common properties)

• id , set an id for the corresponding overlay, so that you can use the getOverlayById method of ol.Map to get the corresponding overlay;
• element , the DOM element contained in the overlay; offset , the offset, in pixels, the offset of the overlay relative to the placement position (position), the default value is [0, 0], positive values ​​offset to the right and downward respectively; position , the position of the overlay in the coordinate system of the map;
• positioning , overlay For the relative position of position, possible values ​​include bottom-left, bottom-center, bottom-right, center-left, center-center, center-right, top-left, top-center, top-right. The default is top-left, which means that the upper left corner of the element coincides with the position.
• stopEvent , whether to stop the event propagation of the map. The default value is true, which means to stop the propagation. It may not be easy to understand. For example, when the mouse wheel is rolled on the map, the map zoom event will be triggered. If the wheel is rolled on the overlay, the zoom event will not be triggered. If you want the mouse to support zooming on the overlay, just set this property to false;
• insertFirst, whether the overlay should be added to its container first. When stopEvent is set to true, the overlay and openlayers controls are placed in a container. At this time, set insertFirst to true, and the overlay will be added to the container first. In this way, the overlay is in the next layer of the control by default (CSS z-index). Therefore, when stopEvent and insertFirst both use the default values, the overlay is in the next layer of the control by default.
• autoPan , triggered when the overlay setPosition method is triggered. When the overlay exceeds the map boundary, the map automatically moves to ensure that the overlay is fully visible;
• autoPanAnimation, set the autoPan effect animation, the parameter type is olx.animation.panOptions
• autoPanMargin, the space between the map edge and the overlay when the map is automatically panned, in pixels, the default is 20 pixels;

Used in the following cases.

2. Overlay Event

The supported events are mainly the change events inherited from ol.Object , which are triggered when overlay related properties or objects change:

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

So how do you bind the corresponding events? Openlayers binding events follow the general DOM event binding rules, including DOM level 2 event binding. The following is an example of outputting a string in the browser console when the overlay position changes.

var overlay = new ol.Overlay({
    // Create overlay ...omitted});
// event overlay.on("change:position", function(){
    console.log("Position changed!");
})

4. Overlay Method

Supported methods Here we only introduce the methods specific to overlay, and not the inherited methods. They are mainly get and set methods for overlay properties and their associated objects.

• getElement, get the DOM element containing the overlay;
• getId, get the overlay id;
• getMap, get the map object associated with the overlay;
• getOffset, get the offset attribute;
• getPosition, get the position attribute;
• getPositioning, get the positioning attribute;
• setElement; set the overlay element;
• setMap, set the map object with overlay;
• setOffset, set offset;
• setPosition, set the position property;
• setPositioning, sets the positioning property.

5. Write to the end

At the beginning, we mentioned that overlay has three common uses: popup 彈窗, label標注信息, and text文本信息

For more details, please refer to this article openlayers6 [Eight] Map overlay three common uses of overlay popup window, marker annotation, text text

This is the end of this article about the detailed explanation of openlayers6 map overlay. For more relevant openlayer overlay map coverage content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!