openlayers4.6-实现弹框

弹框1

//   添加图片，弹框和文字
  addIconMarker2(map) {
    // Vienna marker
    map.on('click', function (evt) {
      var marker = new ol.Overlay({
        position: evt.coordinate,
        positioning: 'center-center',
        element: document.getElementById('marker'),
        stopEvent: false
      });
      map.addOverlay(marker);
      var popup = new ol.Overlay({
        position: evt.coordinate,
        element: document.getElementById('popup')
      });
      map.addOverlay(popup);
      var vienna = new ol.Overlay({
        position: evt.coordinate,
        element: document.getElementById('vienna')
      });
      map.addOverlay(vienna);
      var element = popup.getElement();
      var coordinate = evt.coordinate;
      var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
        coordinate, 'EPSG:3857', 'EPSG:4326'));

      $(element).popover('hide');
      popup.setPosition(coordinate);
      // the keys are quoted to prevent renaming in ADVANCED mode.
      $(element).popover({
        'placement': 'top',
        'animation': false,
        'html': true,
        'content': '<p>The location you clicked was:</p><code>' + hdms + '</code>'
      });
      $(element).popover('show');
    });

  }

html

    <div style="display: none;">
      <!-- Clickable label for Vienna -->
      <div class="overlay" id="vienna" slot="reference">Vienna</div>
      <div id="marker" title="Marker"></div>
      <!-- Popup -->
      <div id="popup" title="Welcome to OpenLayers"></div>
    </div>

style

#marker {
  width: 20px;
  height: 20px;
  border: 1px solid #088;
  border-radius: 10px;
  background-color: #0ff;
  opacity: 0.5;
}
#vienna {
  text-decoration: none;
  color: white;
  font-size: 11pt;
  font-weight: bold;
  text-shadow: black 0.1em 0.1em 0.2em;
}
.popover-content {
  min-width: 180px;
}

image.png

.popover()为bootstrap中插件，需要引入bootstrap

弹框2

  addPopup(map) {
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');

    var overlay = new ol.Overlay({
      element: container,
      autoPan: true,
      autoPanAnimation: {
        duration: 250
      }
    });
    closer.onclick = function () {
      overlay.setPosition(undefined);
      closer.blur();
      return false;
    };
    map.addOverlay(overlay);
    map.on('singleclick', function (evt) {
      var coordinate = evt.coordinate;
      var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
        coordinate, 'EPSG:3857', 'EPSG:4326'));

      content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
        '</code>';
      overlay.setPosition(coordinate);
    });
  }

html

  <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
  </div>

image.png