Question

与OpenLayers: destroyed features reappear after zooming in or out

中描述的类似问题

在矢量图层上调用destroyFeatures（）或removeAllFeatures（）（或两者，以任意顺序）。功能从视图中消失。但随后放大或缩小，它们又重新出现。对我来说，只有在使用聚类策略时才会发生这种情况。看起来好像群集功能已被破坏，但该群集所代表的基础功能不是，因此，当您放大或缩小时，会从这些基础功能重新计算并重新绘制群集。

谷歌搜索显示几年前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([]);

使用聚类策略时，OpenLayers destroyFeatures（）不会破坏功能

1 个答案: