This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

What is the Overlay

Makes the HTML element appear somewhere on the map. Much like controls, they add visible elements to the map, except that it’s not fixed based on screen position, it’s tied to geographic coordinates, so paning the map moves the Overlay. There are roughly three kinds of commonly used ones: pop-ups, annotations and text messages. Each overlay generates a corresponding HTML element, so you can also style it using CSS.

Overlay Common attributes

  • id, the unique identification of the covering for conveniencegetOverlayByIdMethod to get the correspondingoverlay.
  • elementTo add to the overlay element.
  • offset, offset, pixel is the unit.overlayRelative to placement (position), the default value is[0, 0], positive values are shifted to the right and down respectively.
  • position, where the overlay is placed in the coordinate frame where the map is located.
  • positioning.overlayforpositionThe possible values of phi relative to phi'bottom-left'.'bottom-center'.'bottom-right'.'center-left'.'center-center'.'center-right'.'top-left'.'top-center', and'top-right'.
  • stopEvent, whether the event should stop propagating to the map viewport.
  • autoPanAnimationAnimation option for moving the overlay to the view. This animation is only available inautoPanUsed when enabled. Can provide AdurationandeasingCustom animation. ifautoPanProvided as an object, deprecated and ignored.
  • className, CSS class name.

Overlay common events

  • changeWhen the reference counter increases.
  • change:element.overlayTrigger when the corresponding element changes;
  • change:map.overlayTriggered when the corresponding map changes.
  • change:offset.overlayTriggered when the corresponding offset changes;
  • change:position.overlayTriggered when the corresponding position changes;
  • change:positioning.overlayTriggered when the positioning changes;
  • propertychange.overlayTriggered when the corresponding attribute changes;

Binding mode:

var overlay = new ol.Overlay({ / / create overlay});
/ / event
overlay.on("change:element".function(){ console.log("Get change"); })
Copy the code

Overlay common methods

  • getElementGets the element node passed in.
  • getIdTo obtainoverlayId.
  • getMapTo obtain andoverlayAssociated Map object.
  • getOffsetTo obtainoffsetProperties.
  • getPositionTo obtainpositionProperties.
  • getPositioningTo obtainpositioningProperties.
  • setElement, sets the element node.
  • setMapTo set the map object.
  • setOffsetTo set upoffset.
  • setPositionTo set uppositionProperties.
  • setPositioningTo set uppositioningProperties.

Using the overlay

Initialize the map

<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <style type="text/css">
    .map {
      height: 500px;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" />
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>
  <body>
    <div id="map" class="map"></div>
  </body>
  <script>
    var map = new ol.Map({
      target: 'map'
    })

    / / layer
    var layerTile = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'})})/ / view
    var view = new ol.View({
      center: ol.proj.fromLonLat([130.41.28.82]),
      zoom: 4
    })

    map.setView(view)
    map.addLayer(layerTile)
  </script>
</html>
Copy the code

Add elements

  • Directly in theOverlayTo add an element node, text, animation can be added to the map.
. .tag { width: 30px; height: 30px; background-color: aquamarine; border-radius: 100%; }...<div id="tag" class="tag"></div>. Var tag = new ol.Overlay({position: ol.proj.fromLonLat([120.41, 28.82]), positioning: 'cenor-center ', Element: document.getElementById('tag'), stopEvent: false }) map.addOverlay(tag) ...Copy the code

Add event

    document.getElementById('tag').onclick = function () {
      tag.setPosition(undefined)
      return false
    }
    map.on('singleclick'.function (evt) {
      tag.setPosition(evt.coordinate) // Display overlay to specified x,y coordinates
    })
Copy the code

  • The element is removed from the map by adding listener events to the element to change its coordinate position. Then listen to the map click event, modify the coordinate position of the element, the realization of loading elements in the click position.

conclusion

The way we use the mulch is very simple, and we can do a lot of things with it. For example, add GIF pictures of cloud moving on the map to achieve dynamic effects. However, its disadvantages are also obvious, a covering needs at least one element, when the amount of data is large, too many element nodes will lead to page loading jam. It is best to use layers for large data drawing.