删除并添加图片以减少页面延迟

时间:2017-03-30 21:53:07

标签: javascript image cesium

我有一个网站,我在3D地球上骑自行车穿过一堆图像。我注意到用户循环的图像越多,网站越多。

我发现这是因为每个图像都放在旧图像的顶部,只是将一个图像堆叠在另一个图像的顶部。

javascript中有没有办法删除图像并替换它而没有任何明显的闪烁。

这是更改图像src的代码

    function loadCesium()
    {
        //Cesium Active Window

        layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
            url : 'surfaceTempHeatMaps/'.concat(name),
            rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0)
        }));
        document.getElementById('changeable').src = 'colorbar/colorbar.png';
    }

它位于图层的url部分和colorbar.png

1 个答案:

答案 0 :(得分:1)

以下示例显示添加和删除图层。这是两秒钟的间隔。

这里的关键是,正如emackey在评论中指出的那样,保存从addImageryProvider返回的结果并将其传递给remove

var viewer = new Cesium.Viewer('cesiumContainer');

var layer;

setInterval(function() {
    if (layer) {
        viewer.imageryLayers.remove(layer);
        layer = null;
    } else {
        layer = viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
            url : '../images/Cesium_Logo_Color.jpg',
            rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0)
        }));
    }
}, 2000);

现场演示沙堡:http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=b4eb1186ff9d580f1146493c1d15b984