Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of map overlay in openlayers6. The introduction in this article is very detailed and has certain reference value. Interested friends must read it!

1. overlay brief description

Overlay is the meaning of overlay, as the name implies, it appears on the map in another form. Many students here will be confused with layer layers, mainly to place some elements related to map location. Common map overlays are these three types, such as: Popup pop-up window, label label information, text information, etc., and these overlays are equivalent to the element in html. Set the coordinate parameters at the same time through the overlay attribute element and html element binding-to reach the position where the html element is placed on the map. When translating and zooming, the html element will also move with the map movement.

Below we are looking at the description of Xiaguan.com. In fact, map defaults to this attribute, which is the same as the previous articles, layers, controls, and interactions. It is allowed to set the default overlay overlay when the map is loaded by default. It can also be added separately when triggered by an event or method. Here you can see the previous article description, not detailed.

2. overlay attribute

Overlay initialization can accept a lot of configuration parameters, these configuration parameters are a key value pair, together constitute an object literal (options), and then passed to its "constructor", such as new ol.Overlay(options), where options is the object literal composed of parameter key value pairs. Configurable key-value pairs, defined as follows: (red for common attributes)

id, setting an id for the corresponding overlay, so as to obtain the corresponding overlay by using the getOverlayById method of ol.Map.

element, DOM element contained in overlay;offset, offset, pixel is unit, offset of overlay relative to position, default value is [0, 0], positive value is offset to right and downward respectively;position, position of overlay in the coordinate system frame where map is located;

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, default is top-left, that is, the upper left corner of the element coincides with position;

stopEvent: Whether the event propagation of the map stops. The default is true, that is, it prevents propagation. It may not be easy to understand. For example, when the mouse wheel scrolls on the map, the map zoom event will be triggered. If the mouse wheel scrolls on the overlay, the zoom event will not be triggered. If you want the mouse to support zooming on the overlay, then set this attribute to false.

insertFirst, whether overlay should be added to the container where it is located first. When stopEvent is set to true, overlay and openlayers controls are placed in a container. In this case, insertFirst is set to true, overlay will be added to the container first. In this way, overlay defaults to the next layer of the control (CSS z-index). Therefore, when stopEvent and insertFirst both adopt default values, overlay defaults to the next layer of the control.

autoPan, triggered when the overlay setPosition method is triggered, and when the overlay exceeds the map boundary, the map automatically moves to ensure that all overlays are visible;

autoPan Animation, set the effect animation of autoPan, parameter type is olx.animation.panOptions

autoPanMargin, when the map is automatically translated, the margin of the map and the overlay are blank (gap), the unit is pixels, the default is 20 pixels;

Used in later cases.

2. overlay event

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

change, triggered when the reference counter is incremented;

change:element, triggered when the element corresponding to overlay changes;

change:map, triggered when the map corresponding to overlay changes;

change:offset, triggered when the offset corresponding to overlay changes;

change:position, triggered when the position corresponding to overlay changes;

change:positioning, triggered when the positioning corresponding to overlay changes;

propertychange, triggered when the property corresponding to overlay changes;

So how do you bind the corresponding events? Openlayers event binding follows the general DOM event binding rules, including DOM level 2 event binding. Here is an example of outputting strings to the browser console when the overlay position changes.

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

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

getElement, get DOM element containing overlay;

getId, get the id of overlay;

getMap, get the map object associated with overlay;

getOffset, get offset attribute;

getPosition, get the position attribute;

getPositioning, get the positioning attribute;

setElement; Set overlay element;

setMap, set map object with overlay;

setOffset, set offset;

setPosition, set position attribute;

setPositioning sets the positioning attribute.

That's all for "sample analysis of map overlay in openlayers6." Thanks for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.