Overlay

<!--
  示例：浮层标记
  要点：ol.Overlay 把 DOM 元素钉在地图坐标上，随视图平移自动跟随
  依赖：OpenLayers 10.3.1 · jsDelivr CDN
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>浮层标记</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.3.1/ol.css">
<style>
  html,body{height:100%;margin:0}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#16181d}
  .bar{flex:0 0 auto;padding:8px 12px;background:#f6f7f9;border-bottom:1px solid #e3e6ea;
       display:flex;gap:14px;align-items:center;font-size:12px;color:#58606e}
  #map{flex:1 1 auto;min-height:0;position:relative;background:#eef0f3}
  .pop{position:relative;background:#fff;border:1px solid #d5dae2;border-radius:8px;
       padding:10px 12px;min-width:170px;box-shadow:0 6px 18px rgba(20,30,50,.16);font-size:12px}
  .pop h3{margin:0 0 6px;font-size:13px;color:#0b3d91}
  .pop p{margin:2px 0;color:#4a5462}
  .pop .close{position:absolute;top:4px;right:6px;border:0;background:none;cursor:pointer;
              color:#8a94a3;font-size:14px;line-height:1}
  .pop:after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-6px;
             border:6px solid transparent;border-top-color:#fff}
</style>
</head>
<body>
<div class="bar">
  <span>点击红点查看浮层内容，拖动地图时浮层跟随</span>
</div>
<div id="map">
  <div class="pop" id="pop" style="display:none">
    <button class="close" id="close">×</button>
    <h3 id="ptitle"></h3>
    <p id="pbody"></p>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/ol@10.3.1/dist/ol.js"></script>
<script>
(function () {
  'use strict';
  if (!window.ol) {
    document.getElementById('map').textContent = 'OpenLayers 加载失败，请检查 cdn.jsdelivr.net 是否可访问';
    return;
  }
  var fromLonLat = ol.proj.fromLonLat;

  var sites = [
    { lon: 116.3913, lat: 39.9074, name: '中心观测点', info: '设备 3 台 · 采样间隔 5 分钟' },
    { lon: 116.4250, lat: 39.9300, name: '东侧监测站', info: '设备 2 台 · 采样间隔 10 分钟' },
    { lon: 116.3520, lat: 39.8800, name: '西南监测站', info: '设备 4 台 · 采样间隔 1 分钟' }
  ];

  var features = sites.map(function (s) {
    return new ol.Feature({
      geometry: new ol.geom.Point(fromLonLat([s.lon, s.lat])),
      site: s,
      style: new ol.style.Style({
        image: new ol.style.Circle({
          radius: 7,
          fill: new ol.style.Fill({ color: '#b42318' }),
          stroke: new ol.style.Stroke({ color: '#ffffff', width: 2.5 })
        })
      })
    });
  });

  var layer = new ol.layer.Vector({ source: new ol.source.Vector({ features: features }) });

  var popup = document.getElementById('pop');

  var overlay = new ol.Overlay({
    element: popup,
    positioning: 'bottom-center',
    offset: [0, -12],
    stopEvent: true
  });

  var map = new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({ source: new ol.source.XYZ({url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', attributions: 'Tiles © Esri'}) }), layer],
    overlays: [overlay],
    view: new ol.View({ center: fromLonLat([116.395, 39.905]), zoom: 12 }),
    controls: ol.control.defaults.defaults({ rotate: false })
  });

  map.on('singleclick', function (evt) {
    var hit = null;
    map.forEachFeatureAtPixel(evt.pixel, function (f) { hit = f; }, { hitTolerance: 6 });

    if (!hit) {
      overlay.setPosition(undefined);
      return;
    }

    var s = hit.get('site');
    document.getElementById('ptitle').textContent = s.name;
    document.getElementById('pbody').textContent = s.info + ' · ' + s.lon.toFixed(4) + ', ' + s.lat.toFixed(4);
    popup.style.display = 'block';
    overlay.setPosition(hit.getGeometry().getCoordinates());
  });

  document.getElementById('close').addEventListener('click', function () {
    overlay.setPosition(undefined);
  });

  overlay.on('change:position', function () {
    if (!overlay.getPosition()) popup.style.display = 'none';
  });
})();
</script>
</body>
</html>