單擊外部鏈接即可顯示和隱藏所有圖層彈出窗口-openlayrs3

Question

從下面的功能onOff: function ()我從外部鏈接獲取彈出窗口，但只有一個彈出窗口。 需要顯示來自vecorlayer源的所有彈出窗口。

onOff: function () {
  var abc = ConnectWebMap;
       var vectorSource = new ol.source.Vector({
            projection : 'EPSG:4326',
            format: new ol.format.GeoJSON(),
          url: 'resources/multipoint.geojson'
          });
  featureCount = [];     
       // Get the array of features
var featureCount = vector.getSource().getFeatures();

// Go through this array and get coordinates of their geometry.
featureCount.forEach(function(feature) {
   console.log('get all features' + feature.getGeometry().getCoordinates());
   allpopup = [];
   var allpopup = feature.getGeometry().getCoordinates();
   if (feature) {
      popup.setPosition(allpopup);
    content.innerHTML = feature.get('name');
  }
});

我通過geojson添加標記，並在map.on('click', function(evt)上顯示它們map.on('click', function(evt)但我想顯示並隱藏所有帶有按鈕單擊標記的彈出窗口，只有poup會顯示和隱藏。

從錨標記需要切換所有彈出窗口

<a id="toggle">Show/Hide</a>

以下是我的json代碼

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
          "name": "Missing Person",
          "ref":" Ref 5684"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-0.12755, 51.507222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Wanted",
           "ref":" Ref 56124"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-0.12755, 52.507222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Missing 1",
           "ref":" Ref 1684"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-1.12755, 52.507222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Wanted 3",
           "ref":" Ref 562484"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-2.12755, 53.507222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Wanted 7",
           "ref":" Ref 522684"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-0.1287, 53.507222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Wanted 9",
           "ref":" Ref 5685884"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-3.12755, 50.907222]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Missing 8",
           "ref":" Ref 5643484"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-3.12755, 51.907222]
      }
    }
  ]
} 

矢量層

vector = new ol.layer.Vector({
  source: new ol.source.Vector({
   projection : 'EPSG:4326',
   format: new ol.format.GeoJSON(),
   url: 'resources/multipoint.geojson'
 }),
  style: styleFunction1
});

彈出功能

            var element = document.getElementById('popup');
            var content = document.getElementById('popup-content');
            var closer = document.getElementById('popup-closer');



            var popup = new ol.Overlay({
              element: element,
              positioning: 'bottom-center',
              stopEvent: false
            });
            map.addOverlay(popup);

// display popup on click
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
    return feature;
  }, null, function(layer) {
    return layer != circleLayer;
  });

  if (feature) {
    popup.setPosition(evt.coordinate);
    content.innerHTML = feature.get('name');

  } else {

  }
});

closer.onclick = function() {
  popup.setPosition(undefined);
  closer.blur();
  return false;
};

Answer 1

顯示所有彈出窗口

on: function () {
  var abc = ConnectWebMap;
  $('#popupGroup').html('');
  var vectorSource = new ol.source.Vector({
    projection : 'EPSG:4326',
    format: new ol.format.GeoJSON(),
    url: 'resources/multipoint.geojson'
  });
  featureCount = [];     
       // Get the array of features
       var featureCount = vector.getSource().getFeatures();

        multiPopup = 0;
// Go through this array and get coordinates of their geometry.
featureCount.forEach(function(feature) {
 // console.log('get all features' + feature.getGeometry().getCoordinates());
 // multiPopup = feature.get('id');
 allpopup = [];
 var allpopup = feature.getGeometry().getCoordinates();
 if (feature) {
   var popupTemplate = '<div id="popup' + multiPopup +'" class="ol-popup">'+
   '<a href="#" id="popup-closer' + multiPopup +'" class="ol-popup-closer"></a>'+
   '<div id="popup-content' + multiPopup +'"></div></div>';
   $('#popupGroup').append(popupTemplate);

   var element = document.getElementById('popup' + multiPopup);
   var content = document.getElementById('popup-content' + multiPopup);
   var closer = document.getElementById('popup-closer' + multiPopup);

   closer.onclick = function() {
    popup.setPosition(undefined);
    closer.blur();
    return false;
  };

隱藏所有彈出窗口

off: function () {
  var abc = ConnectWebMap;
  console.log('multiPopup' + multiPopup);
  for(var i = 0; i<multiPopup; i++){
        $('#popup-closer' + i).click();
  };
    $('#popupGroup').html('');
}

};