openlayer判断瓦片全部加载完毕

一、问题产生

在openlayer开发的过程中，涉及到缩略图的生成。当地图上的所有图层全部加载完毕时，执行生成缩略图业务代码。

二、问题解决

寻找源码，找到如下解决方案：

1 判断地图全部瓦片加载完毕

map.tileQueue_.getTilesLoading() == 0

这里可以设置一个interval，判断如上条件即可。

2 判断某个图层的瓦片加载完毕

这里需要为某个layer设定一个unique_id。然后将unique_id传递到加载的tile对象中去。
假如某layer如下:

let wmtsLayer = new ol.layer.Tile({
    source: new ol.source.WMTS({
        url: url,
        projection: projection, //数据的投影坐标系
        tileGrid: tileGrid,
        format: "image/png",
        crossOrigin: 'anonymous'
    })
});

手动为wmtslayer打上一个标识：

const guid =  guid();//--生成一个随机id
wmtsLayer.unique_seid = guid;

在CanvasTileLayerRenderer类中的manageTilePyramid函数里创建tile的地方加上一句代码：

这样，将layer层的unique_seid赋值给加载的tile。然后通过判断tile的state来判断所有该Layer的瓦片是否全部加载：

const one_id = guid;

const all_loaded = map.tileQueue_.elements_.every((f) => {
	return f[0] && f[0].unique_seid && f[0].unique_seid === one_id  && f[0].state == 2;
})

state ==2即意味着瓦片加载成功。上述代码可判断id == guid的layer的瓦片是否全部加载成功。

注意，最好先判断瓦片已经开始加载。当加载队列为0时，上述表达式返回true

三、结语

openlayer源码精简有条理。逻辑清晰，多看看源码可以学习到很多东西。