更改后的矢量源不会在 OpenLayers v4 中持续存在

Question

我正在尝试使用单选按钮来过滤地图上显示的要素。单击按钮后，我设法更改了矢量源。然而，地图似乎在末尾使用原始矢量源再次自动渲染并覆盖了更新后的矢量源。

var styleCache = {};

var vectorSource = new ol.source.Vector({
    url: 'sla.kml',
    format: new ol.format.KML({
        extractStyles: false
    })
});

var clusters = new ol.layer.Vector({
    source: new ol.source.Cluster({
        distance: 40,
        source: vectorSource
    }),
    style: function(feature) {
        var size = feature.get('features').length;
        var style = styleCache[size];
        if (!style) {
            style = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 10,
                    stroke: new ol.style.Stroke({
                        color: '#fff'
                    }),
                    fill: new ol.style.Fill({
                        color: '#3399cc'
                    })
                }),
                text: new ol.style.Text({
                    text: size.toString(),
                    fill: new ol.style.Fill({
                        color: '#fff'
                    })
                })
            });
            styleCache[size] = style;
        }
        return style;
    }
});

var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var mousePositionControl = new ol.control.MousePosition({
    coordinateformat: ol.coordinate.createStringXY(4),
    undefinedHTML: '&nbsp;'
});

var scalelineControl = new ol.control.ScaleLine();

var zoomSlider = new ol.control.ZoomSlider();

var map = new ol.Map({
    layers: [raster, clusters],
    controls: ol.control.defaults().extend([scalelineControl, zoomSlider]),
    renderer: 'canvas',
    target: 'map',
    view: new ol.View({
        center: [-11102324.569458216, 4548521.327621765],
        zoom:5
    })
});

var count = 0;
var allFeatures;
function changeFeatures(status) {
    if (count == 0) {
        allFeatures = vectorSource.getFeatures();
    }
    count++;
    // clear all features first, then add them back base on status
    vectorSource.clear();
    if (status === 'all') {
        vectorSource.addFeatures(allFeatures);
    } else {
        var feature, name;
        for (var i = allFeatures.length - 1; i >= 0; --i) {
            feature = allFeatures[i];
            if (feature.get('status') === status) {
                vectorSource.addFeature(feature);
            }
        }
    }
}

vectorSource.on('change', function(evt) {
    var source = evt.target;
    if (source.getState() === 'ready') {
        var numfeatures = source.getFeatures().length;
        console.log("feature count after change event: " + numfeatures);
    }
});

控制台的输出显示：

更改事件后的特征数：9 -> 原始特征
更改事件后的特征计数：0 -> 清除矢量源后
更改事件后的特征数：1 -> 添加一个符合条件的特征后
更改事件后的特征数：9 -> 似乎使用原始矢量源再次渲染地图（为什么？）

为什么用原来的矢量源重新渲染地图？我需要做什么才能使用更新的矢量源渲染地图？

Answer 1

当源配置为 url 时，对其调用 #clear() 将触发重新加载。

您可以在矢量图层上设置一个新源（使用 ol.layer.Vector#setSource()），或者使用没有 url 的初始配置创建您的 vectorSource。我会推荐前者。

更改后的矢量源不会在 OpenLayers v4 中持续存在

Changed vector source in doesn't persist in OpenLayers v4

openlayers