添加多个弹出标记 - Openlayers 地图

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.'
      })
    ]
  })
});

然后更改您的弹出窗口打开器功能以从单击的位置查找数据并将其显示在弹出窗口中：

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();
  }
});

proof of concept fiddle

代码片段：

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>

Another way to do it

添加多个弹出标记 - Openlayers 地图

Adding more than one popup marker - Openlayers map

javascript

dictionary

popup

openlayers