Question

我正在使用openlayer-3处理项目。

我想在地图上以相同的程度显示大约数百个天气图像，每次都会显示每张图像。

我的想法是为每个图像创建了每个图像层，并将它们全部添加到地图中，每次只显示其中一个。

地图设置：

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                 source: new ol.source.OSM()
            });
        ],
        view: new ol.View({
            center: center,
            zoom: zoomLevel
        }),
        controls: ol.control.defaults({
            attributionOptions: ({
                collapsible: false
            })
        }),
        interactions: ol.interaction.defaults({
            mouseWheelZoom:false
        })
    });

然后我为每个图像创建了图像层并将它们添加到地图

    var source = new ol.source.ImageStatic({
        url: imageLink,
        imageExtent: bounds,
    })
    layerName[layerIdx] = new ol.layer.Image({
        source: source,
        visible: true // false for which images not need to be visible 
    });
    map.addLayer(layerName[layerIdx]);

当我浏览所有图层（通过使用setVisible()到图层）时出现问题，我发现浏览器的使用记忆（我检查Chrome和FireFox的最新版本）正在迅速增加。我检查了100张图片，浏览器使用率接近10GB，尽管图像尺寸小于1MB。

我也尝试在显示后删除冗余图层（使用map.removeLayer(layerName[layerIdx])），但内存不会减少。

因此，浏览器变得缓慢，当我尝试使用智能手机时，它就会崩溃。

非常感谢任何建议或解决方案。

如果不清楚，请告诉我。

2017年3月6日更新：我尝试使用新版本openlayer-4，问题仍然存在。任何想法都非常感激。

将许多imageStatic图层添加到地图中会使浏览器的使用内存增加，浏览器速度会降低甚至崩溃

0 个答案: