使用群集策略時，OpenLayers destroyFeatures（）不會銷毀要素

Question

與OpenLayers中描述的問題類似：放大或縮小后，重新出現銷毀的功能

在向量層上調用destroyFeatures（）或removeAllFeatures（）（或兩者，以任何順序）。 功能從視圖中消失。 但是然后放大或縮小，它們會重新出現。 對我來說，只有在使用集群策略時才會發生這種情況。 似乎群集特征似乎已被破壞，但該群集所代表的基礎特征並未被破壞，因此，當放大或縮小時，將根據這些基礎特征重新計算並重新繪制群集。

Googling揭示了幾年前OpenLayers的開發人員之間的許多有關destroyFeatures（）問題的對話。 令人驚訝的是，即使到現在，問題似乎仍未完全解決。

我可以通過破壞整個層（使用destroy（））然后在需要時重新創建它來解決該問題。 就我而言，這是可以的，但我可以想象出可能不希望使用這種大手筆的情況。

響應對代碼示例的請求，這是正在工作的版本中代碼的縮寫版本（即，使用destroy（））。 在非工作版本中，我改為調用destroyFeatures（）（並且未將圖層設置為null）。 如上所述，這最初會刪除功能，但是如果我隨后使用this.map.zoomIn（）進行放大或縮小，功能將重新出現。

注意1：通過JavaScript橋從Objective-C調用這些函數。 注意2：JavaScript是使用CoffeeScript生成的。

(function() {
  var addSightingsLayer, displayFeaturesForSightingsWithGeoJSONData, geoJSONFormat, load, map, projectionSphericalMercator, projectionWGS84, removeSightingsLayer, sightingsLayer;

  addSightingsLayer = function() {
    var context, layerStyle, layerStyleSelected, style, styleMap, styleSelected, yerClusteringStrategy;
    if (!(this.sightingsLayer === null)) return;
    yerClusteringStrategy = new OpenLayers.Strategy.Cluster({
      distance: 10,
      threshold: 2
    });
    this.sightingsLayer = new OpenLayers.Layer.Vector('Sightings', {
      strategies: [yerClusteringStrategy]
    });
    this.map.addLayer(this.sightingsLayer);
    style = {
      // Here I define a style
    };
    context = {
    // Here I define a context, with several functions depending on whether there is a cluster or not, eg:
      dependentLabel: function(feature) {
        if (feature.cluster) {
          return feature.attributes.count;
        } else {
          return feature.attributes.name;
        }
      }, ....

    };
    layerStyle = new OpenLayers.Style(style, {
      context: context
    });
    styleSelected = {
      //...
    };
    layerStyleSelected = new OpenLayers.Style(styleSelected, {
      context: context
    });
    styleMap = new OpenLayers.StyleMap({
      'default': layerStyle,
      'select': layerStyleSelected
    });
    this.sightingsLayer.styleMap = styleMap;
  };

  removeSightingsLayer = function() {
    if (this.sightingsLayer === null) return;
    this.sightingsLayer.destroy();
    return this.sightingsLayer = null;
  };

  displayFeaturesForSightingsWithGeoJSONData = function(geoJSONData) {
    if (this.sightingsLayer === null) JFOLMap.addSightingsLayer();
    return this.sightingsLayer.addFeatures(this.geoJSONFormat.read(geoJSONData));
  };

  load = function() {
    var lat, lon, osmLayer, zoom;
    lat = ...;
    lon = ...;
    zoom = ...;
    this.map = new OpenLayers.Map('mapDiv', {
      controls: ...,
      eventListeners: ...
    });
    osmLayer = new OpenLayers.Layer.OSM();
    this.map.addLayer(osmLayer);
    return this.map.setCenter(new OpenLayers.LonLat(lon,     lat).transformWGS84ToSphericalMercator(), zoom);
  };

  OpenLayers.LonLat.prototype.transformWGS84ToSphericalMercator = function() {
    return this.transform(JFOLMap.projectionWGS84, JFOLMap.projectionSphericalMercator);
  };

  OpenLayers.LonLat.prototype.transformSphericalMercatorToWGS84 = function() {
    return this.transform(JFOLMap.projectionSphericalMercator, JFOLMap.projectionWGS84);
  };

  map = null;
  sightingsLayer = null;
  sightingsPopoverControl = null;
  projectionWGS84 = new OpenLayers.Projection('EPSG:4326');
  projectionSphericalMercator = new OpenLayers.Projection('EPSG:900913');
  geoJSONFormat = new OpenLayers.Format.GeoJSON({
    'externalProjection': projectionWGS84,
    'internalProjection': projectionSphericalMercator
  });

  this.JFOLMap = {
    map: map,
    sightingsLayer: sightingsLayer,
    projectionSphericalMercator: projectionSphericalMercator,
    projectionWGS84: projectionWGS84,
    geoJSONFormat: geoJSONFormat,
    load: load,
    addSightingsLayer: addSightingsLayer,
    removeSightingsLayer: removeSightingsLayer,
    displayFeaturesForSightingsWithGeoJSONData: displayFeaturesForSightingsWithGeoJSONData,
  };

}).call(this);

Answer 1

試試這個，對我有用

layer.removeAllFeatures();
layer.destroyFeatures();//optional
layer.addFeatures([]);