添加多個彈出標記 - Openlayers map

Question

我使用 openlayers 創建了一個帶有彈出窗口的標記。 一切正常，但我不知道如何在不同的位置添加另一個標記。 這是我的 JS：

var marker = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [
        new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.123666, 52.504650]))
        })
        ]
    })
});

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
     }
 });
 map.addOverlay(overlay);

 closer.onclick = function() {
     overlay.setPosition(undefined);
     closer.blur();
     return false;
 };
 
 map.on('singleclick', function (event) {
     if (map.hasFeatureAtPixel(event.pixel) === true) {
         var coordinate = event.coordinate;

         content.innerHTML = '<b>Barrow Hill and Tansey Green</b><br />I am a popup.';
         overlay.setPosition(coordinate);
     } else {
         overlay.setPosition(undefined);
         closer.blur();
     }
 });

和我的 html：

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

Answer 1

有多種方法可以做到這一點。 要根據現有代碼添加多個標記，請向功能數組添加其他功能，並為popup內容添加一個附加屬性（假設您希望它因位置而異）：

var marker = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.123666, 52.504650])),
        html: '<b>Barrow Hill and Tansey Green</b><br />I am a popup.'
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.12, 52.504])),
        html: '<b>Marker 2</b><br />I am a popup.'
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.13, 52.51])),
        html: '<b>Marker 3</b><br />I am a popup.'
      })
    ]
  })
});

然后更改您的彈出窗口打開器 function 以從單擊的位置查找數據並將其顯示在彈出窗口中：

map.on('singleclick', function(event) {
  if (map.hasFeatureAtPixel(event.pixel) === true) {
    var coordinate = event.coordinate;
    var features = map.getFeaturesAtPixel(event.pixel);
    content.innerHTML = features[0].getProperties().html;
    overlay.setPosition(coordinate);
  } else {
    overlay.setPosition(undefined);
    closer.blur();
  }
});

概念證明小提琴

代碼片段：

 var marker = new ol.layer.Vector({ source: new ol.source.Vector({ features: [ new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.123666, 52.504650])), html: '<b>Barrow Hill and Tansey Green</b><br />I am a popup.' }), new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.12, 52.504])), html: '<b>Marker 2</b><br />I am a popup.' }), new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.13, 52.51])), html: '<b>Marker 3</b><br />I am a popup.' }) ] }) }); //OSM layer creation var OSMmap = new ol.layer.Tile({ // TileLayer({ source: new ol.source.OSM(), }); //Map initiation var map = new ol.Map({ target: 'mymap', layers: [OSMmap, marker], //cities], view: new ol.View({ center: ol.proj.fromLonLat([15, 0]), zoom: 2 }), }); 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 } }); map.addOverlay(overlay); closer.onclick = function() { overlay.setPosition(undefined); closer.blur(); return false; }; map.on('singleclick', function(event) { if (map.hasFeatureAtPixel(event.pixel) === true) { var coordinate = event.coordinate; var features = map.getFeaturesAtPixel(event.pixel); content.innerHTML = features[0].getProperties().html; overlay.setPosition(coordinate); } else { overlay.setPosition(undefined); closer.blur(); } }); map.getView().fit(marker.getSource().getExtent(), { padding: [40, 16, 40, 16] });

 /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #mymap { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #popup { background: #FFFFFF; border: black 1px solid; }

 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script> <link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css"> <div id="mymap"> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div> </div> </div>

另一種方法