显示和隐藏点击外部链接的所有弹出层 - 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)但我想显示和隐藏与按一下按钮标记所有弹出将是可见的只有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(''); 
} 

};