如何在openlayers 6中将position弹出窗口锚定到左侧屏幕

Question

在 map 上单击分层时，我有一个弹出窗口，并在选定的 position 处显示弹出窗口。 我想在左侧屏幕上显示弹出窗口，我该怎么做。 请帮帮我，我的英语不好。 谢谢

我的快闪秀是这样的

我想当点击弹出将显示左屏幕，而不是中心

Answer 1

如果你想要左中的弹出窗口，你可以这样做：

<html>

<head>
  <meta charset="utf-8" />
  <style>
    .map {
      height: 100%;
      width: 100%;
    }

    html,
    body {
      height: 100%
    }
    
    .ol-popup {
        background-color: white;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        min-width: 280px;
      }
      
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      
  </style>
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css"> 
</head>

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

  <script type="text/javascript">   
    const container = document.getElementById('popup');
    const content = document.getElementById('popup-content');
    
    document.addEventListener("DOMContentLoaded", function () {
        drawMap();
    });
    
    function drawMap() {
        const osmLayer = new ol.layer.Tile({
            source: new ol.source.OSM({
                attributions: '© OpenStreetMap',
            })
        });
          
        map = new ol.Map({
            target: 'map',
            layers: [
                osmLayer,
            ],
            view: new ol.View(),
        });
        
        const popup = new ol.Overlay({
          element: document.getElementById('popup'),
        });
        
        map.addOverlay(popup);
        
        map.getView().fit([0,0,0,0]);
        
        map.on('click', function (evt) {
          const element = popup.getElement();
          const popupMap = popup.getMap();
          
          const coordinate = evt.coordinate;
           
          const viewExtent = popupMap.getView().calculateExtent();
          const centerPoint = ol.extent.getCenter(viewExtent);
          content.innerHTML = '<p>You clicked here:</p><code>' + coordinate + '</code>';
          
          popup.setPosition( [viewExtent[0], centerPoint[1]] );
          
        });
    }
     
  </script>
</body>

</html>

删除 position 绝对值并确定 position: https://jsfiddle.net/ve5mn0by/5/

编辑：

没有 Openlayers 覆盖，只有 HTML：

map.on('click', function (evt) {
        
            const container = document.createElement('div');
            const content = document.createElement('div');
            
            container.style.width = '10rem';
            container.style.height = '100%'
            //container.style.backgroundColor = '#FF0000';
            container.style.position = 'absolute';
            container.style.display = 'flex';
            
            content.style.width = '100%';
            content.style.height = '10rem'
            content.style.backgroundColor = '#FFFF00';
            content.style.alignSelf = 'center';
            
            
            container.appendChild(content);
            document.body.appendChild(container);
          
        });

如何在openlayers 6中将position弹出窗口锚定到左侧屏幕

问题描述

1 个解决方案

解决方案1
0 2022-07-30 07:48:07

如何在openlayers 6中将position弹出窗口锚定到左侧屏幕

问题描述

1 个解决方案

解决方案1 0 2022-07-30 07:48:07

解决方案1
0 2022-07-30 07:48:07