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

};

单击外部链接 - openlayrs3，显示和隐藏所有图层弹出窗口

1 个答案: