删除标记和清除源不起作用。标记保留在地图上

Question

我继承了 openlayers 地图的这段代码，但我无法删除所有标记以重置地图并重绘。
我在文件末尾添加了resetMap函数：

declare var ol: any;

export class OpenLayersService {

  private markers: any[] = [];
  public layers: any[] = [];
  public markerVectorLayer : any;
  public vectorSource : any ;
  private findMe: boolean;
  private lastLat: any;
  private lastLon: any;
  private vectorMyPositionLayer: any; 
  private markersClusterLayer;

  static addDistrictCenter(lat, lng, map, label) {
    const vectorLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [
          new ol.Feature({
            geometry: new ol.geom.Point(
                ol.proj.transform(
                    [parseFloat(lng), parseFloat(lat)],
                    'EPSG:4326',
                    'EPSG:3857'
                )
            )
          }),
        ]
      }),
      minResolution: 2,
      maxResolution: 10,
      style: new ol.style.Style({
        text: new ol.style.Text({
          offsetY: 13,
          text: label,
          font: '13px Lato',
          scale: 1,
          textAlign: 'center',
          textBaseline: 'middle',
          fill: new ol.style.Fill({
            color: 'white'
          }),
          stroke: new ol.style.Stroke({
            color: 'black',
             width: 3
          })
        })
      })
    });

    map.addLayer(vectorLayer);
  }

  initMap(lat: number, lon: number, target: string) {
    this.vectorSource = new ol.source.Vector({
      features: [],
      
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 0.5],
          anchorXUnits: "fraction",
          anchorYUnits: "fraction",
          src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
        })
      })
    });

    this.markerVectorLayer = new ol.layer.Vector({
      source: this.vectorSource,
      minResolution: 0,
      maxResolution: 1.2
    });

    const map = new ol.Map({
      interactions: ol.interaction.defaults({
        doubleClickZoom: true,
        dragAndDrop: false,
        dragPan: true,
        keyboardPan: false,
        keyboardZoom: false,
        mouseWheelZoom: true,
        pointer: false,
        select: false,
      }),
      target: target,
      layers: [
        new ol.layer.Tile({
          visible: true,
          source: new ol.source.XYZ({
            url: 'https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
          })
        }),this.markerVectorLayer
      ,],
      view: new ol.View({
        maxZoom: 24,
        minZoom: 6,
        zoom: 15,
        center: ol.proj.fromLonLat([lon, lat])
      }),
      controls: [],
      loadTilesWhileAnimating: true
    });

    OpenLayersService.addDistrictCenter(lat, lon, map, 'MY CENTER');
    this.addDistrict(lat, lon, map);
    map.updateSize();

    return map;
  }

  styleFunction(label) {
    return new ol.style.Style({
      image: new ol.style.Circle({
        radius: 8,
        stroke: new ol.style.Stroke({
          color: '#fff',
          width: 2
        }),
        fill: new ol.style.Fill({
          color: '#343434'
        })
      }),
      text: new ol.style.Text({
        offsetY: 17,
        text: label,
        font: '13px Lato',
        scale: 1.3,
        textAlign: 'center',
        textBaseline: 'middle',
        fill: new ol.style.Fill({
          color: 'black'
        }),
        stroke: new ol.style.Stroke({
          color: '#FEFEFE',
          width: 2
        })
      })
    });
  }

  addMarker(lat, lng, map, label, nodeid) {
    const point = new ol.geom.Point(
        ol.proj.transform(
            [parseFloat(lng), parseFloat(lat)],
            'EPSG:4326',
            'EPSG:3857'
        )
    );
    this.markers.push(point);
  
    const marker = new ol.Feature({
      geometry: point
    });
    marker.setStyle(this.styleFunction(label));
    
    marker.set('id', nodeid+1);

    this.vectorSource.addFeature(marker);
    return marker;
  }

  center(lat, lon, map) {
    if (this.vectorMyPositionLayer) {
      map.removeLayer(this.vectorMyPositionLayer);
    }

    const point = new ol.geom.Point(
          ol.proj.transform(
              [parseFloat(lon), parseFloat(lat)],
              'EPSG:4326',
              'EPSG:3857'
          )
      );

      this.vectorMyPositionLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [
            new ol.Feature({
              geometry: point
            }),
          ]
        }),
        style: new ol.style.Style({
          image: new ol.style.Circle({
            radius: 8,
            stroke: new ol.style.Stroke({
              color: '#fff',
              width: 2
            }),
            fill: new ol.style.Fill({
              color: '#b52218'
            })
          }),
          text: new ol.style.Text({
            offsetY: 17,
            font: '13px Lato',
            scale: 1.3,
            textAlign: 'center',
            textBaseline: 'middle',
            fill: new ol.style.Fill({
              color: 'black'
            }),
            stroke: new ol.style.Stroke({
              color: '#FEFEFE',
              width: 2
            })
          })
        })
      });

      map.addLayer(this.vectorMyPositionLayer);
      
      const location = ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857');

      const dettaglio = new ol.View({
        minZoom: 6,
        maxZoom: 24,
        zoom: 17,
        center: location,
        duration: 200
      });
      map.setView(dettaglio);
  }

  resetCenter(lat, lon, map) {
    const location = ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857');

    const dettaglio = new ol.View({
      minZoom: 6,
      maxZoom: 24,
      zoom: 17,
      center: location,
      duration: 200
    });
    
    map.setView(dettaglio);
  }

  addDistrict(lat: number, lon: number, map) {
    const COORD_SYSTEM_GPS = 'EPSG:4326';  // gps (long/lat) coord system..
    const COORD_SYSTEM_OSM = 'EPSG:3857';  // SphericalMercatorCoords - google and OSM's coord system..

    // styles for the vector layers
    const styles = [
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'rgba(156,156,156,1)',
          width: 0
        }),
        fill: new ol.style.Fill({
          color: 'rgba(0,0,0,0.1)'
        })
      }),
      new ol.style.Style({
        image: new ol.style.Circle({
          radius: 0,
          fill: new ol.style.Fill({
            color: 'orange'
          })
        }),
        geometry: function (feature) {
          // return the coordinates of the first ring of the polygon
          const coordinates = feature.getGeometry().getCoordinates()[0];
          return new ol.geom.MultiPoint(coordinates);
        }
      })
    ];

    // Create new layer/s
    const numLayers = 1;
    const vectorSource = [];
    const vectorLayer = [];
    const layerGroup = [];
    for (let i = 0; i < numLayers; i++) {
      vectorSource[i] = new ol.source.Vector({});
      vectorLayer[i] = new ol.layer.Vector({
        source: vectorSource[i],
        style: styles
      });
      layerGroup[i] = new ol.layer.Group({
        layers: [vectorLayer[i]],
      });
      map.addLayer(layerGroup[i]);
    }

    let layerIndex = 0;

    const featureCollection = {
      'type': 'FeatureCollection',
      'totalFeatures': 5,
      'features': [
        {
          'type': 'Feature',
          'id': 'feature-001',
          'geometry': {
            'type': 'Polygon',
            'coordinates': [[
              [...lat..., ...lng...],
            ]],
          },
          'geometry_name': 'xxx',
          'properties': {}
        }
      ]
    };

    featureCollection.features.forEach(function (featureJson) {
      const feature = new ol.Feature({
        geometry: (new ol.geom.Polygon(featureJson.geometry.coordinates)).transform(COORD_SYSTEM_GPS, COORD_SYSTEM_OSM)
      });
      // Add feature to the vector source..
      vectorSource[layerIndex].addFeature(feature);
    });
  }

  addCluster(map) {
    const features = [];
    for (let i = 0; i < this.markers.length; ++i) {
      features[i] = new ol.Feature(
          {
            geometry: this.markers[i]
          }
      );
    }

    const source = new ol.source.Vector({
      features: features
    });

    const clusterSource = new ol.source.Cluster({
      source: source
    });

    const styleCache = {};
    this.markersClusterLayer = new ol.layer.Vector({
      source: clusterSource,
      style: function(feature) {
        const zoom = map.getView().getZoom();
        const size = feature.get('features').length;
        let style = styleCache[size];
        if (size === 1) {
          style = new ol.style.Style({
            image: new ol.style.Circle({
              radius: 8,
              stroke: new ol.style.Stroke({
                color: '#fff',
                width: 2
              }),
              fill: new ol.style.Fill({
                color: '#343434'
              })
            })
          });
          styleCache[size] = style;
        } else {
          style = new ol.style.Style({
            image: new ol.style.Circle({
              radius: 13,
              stroke: new ol.style.Stroke({
                color: '#fff',
                width: 2
              }),
              fill: new ol.style.Fill({
                color: '#343434'
              })
            }),
            text: new ol.style.Text({
              text: size.toString(),
              fill: new ol.style.Fill({
                color: '#fff',
                font: '14px'
              })
            })
          });
          styleCache[size] = style;
        }
        return style;
      }
    });

    map.addLayer(this.markersClusterLayer);
  }

  ///
  /// I added this function but it does not work
  ///
  resetMap() {
    this.markers = [];
    if (this.markersClusterLayer) {
      this.markersClusterLayer.getSource().clear();
    }
    if (this.vectorSource) {
      this.vectorSource.clear();
    }
    if (this.markerVectorLayer) {
      this.markerVectorLayer.getSource().clear();
    }
  }
}

这是添加标记的代码（我之前调用了initMap）：

this.olService.resetMap();

for (let i = 0; i < records.length; i++) {
    if (!records[i].latitude || !records[i].longitude) {
        continue;
    }
    const marker = this.olService.addMarker(records[i].latitude, records[i].longitude, this.map, records[i].title, i+1);
}

this.olService.addCluster(this.map);

当我从网络上获得新的标记时（例如 0 条记录，所以我预计地图上不会有任何标记），地图会重新绘制，但标记仍然存在。

Answer 1

我解决了
问题是我在没有删除旧标记的情况下添加了新的标记层。

这是 addCluster 函数的新版本，我首先为集群命名，然后在添加新集群之前将其删除（如果存在）：

addCluster(map, deleteOld : boolean = true) {
    if (deleteOld) {
      // HERE I DELETE OLD ONE BEFORE ADDING NEW ONE
      map.getLayers().getArray()
            .filter(layer => layer.get('name') === 'Markers')
            .forEach(layer => map.removeLayer(layer));
    }

    const features = [];
    for (let i = 0; i < this.markers.length; ++i) {
      features[i] = new ol.Feature(
          {
            geometry: this.markers[i]
          }
      );
    }

    const source = new ol.source.Vector({
      features: features
    });

    const clusterSource = new ol.source.Cluster({
      source: source
    });

    const styleCache = {};
    this.markersClusterLayer = new ol.layer.Vector({
      source: clusterSource,
      style: function(feature) {
        const zoom = map.getView().getZoom();
        const size = feature.get('features').length;
        let style = styleCache[size];
        if (size === 1) {
          style = new ol.style.Style({
            image: new ol.style.Circle({
              radius: 8,
              stroke: new ol.style.Stroke({
                color: '#fff',
                width: 2
              }),
              fill: new ol.style.Fill({
                color: '#343434'
              })
            })
          });
          styleCache[size] = style;
        } else {
          style = new ol.style.Style({
            image: new ol.style.Circle({
              radius: 13,
              stroke: new ol.style.Stroke({
                color: '#fff',
                width: 2
              }),
              fill: new ol.style.Fill({
                color: '#343434'
              })
            }),
            text: new ol.style.Text({
              text: size.toString(),
              fill: new ol.style.Fill({
                color: '#fff',
                font: '14px'
              })
            })
          });
          styleCache[size] = style;
        }
        return style;
      }
    });
    this.markersClusterLayer.set('name', 'Markers');

    map.addLayer(this.markersClusterLayer);
}

删除标记和清除源不起作用。标记保留在地图上

Removing markers and clear sources not working. The markers remain on the map

javascript

openlayers

ionic-framework

openlayers-5