Question

我有一个带有一些功能的矢量图层的地图。

var map = new ol.Map({
  view: mapManager.zoomedView(),
  target: 'map-business',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ]
})
var vectorSource = new ol.source.Vector();

var feats;
$.get( "/test.geojson", function( data ) {
  vectorSource.addFeatures(new ol.format.GeoJSON().readFeatures(data))
  feats = new ol.format.GeoJSON().readFeatures(data)
});
var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: new ol.style.Style({
    fill: mapManager.defaultFill(),
    stroke: mapManager.defaultStroke()
  })
});

map.addLayer(vectorLayer);

然后我添加了一个选择交互，因为我想取消选择/选择功能

var selectSingleClick = new ol.interaction.Select({
  condition: ol.events.condition.click,
  toggleCondition: ol.events.condition.click,
  style: new ol.style.Style({
    fill: mapManager.selectFill(),
    stroke: mapManager.selectStroke()
  })
});

map.addInteraction(selectSingleClick);

现在我想默认选择所有功能

var selectableFeatures = selectSingleClick.getFeatures()
selectableFeatures.push(feats[i])

没关系，我的所有功能都是默认选中的。问题是我无法取消选择我的功能。如果我单击某个功能，则会再次选择该功能。

Answer 1

我会做类似的事情：

var vectorSource = new ol.source.Vector({
  format: new ol.format.GeoJSON,
  url: '/test.geojson'
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  // ...
});

map.addLayer(vectorLayer);

var featuresInteraction = new ol.Collection();
var selectSingleClick = new ol.interaction.Select({
  features: featuresInteraction, // <-- pushing and removing from/to this collection variable
  // ...
});
map.addInteraction(selectSingleClick);

// GeoJSON was async loaded, so wait until is ready
vectorSource.once('addfeature', function(evt) {
  // add to select collection
  featuresInteraction.extend(vectorSource.getFeatures());

  // some time later to remove selected
  window.setTimeout(function() {
    featuresInteraction.clear();
  }, 2000);
});

选择全部后如何取消选择功能

1 个答案: