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源码精简有条理。逻辑清晰，多看看源码可以学习到很多东西。

2022.6.3日（长期有效）：打个广告，苏州华为终端BG面向社会招聘人才，Java /C C++ / Python / Javascript 。有兴趣来苏州的同学们可以加我V 15850277051 ，走内推流程，有问必答！

openlayer判断瓦片全部加载完毕相关推荐

js 判断iframe是否加载完毕
js 判断iframe是否加载完毕 CreationTime--2018年9月13日15点30分 Author:Marydon 1.javascript实现 window.onload = funct ...
【转】JS判断SWF,JPG加载完毕、兼容（Activex,plugIn）所有浏览器
JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...
JavaScript 判断 DOM 何时加载完毕
处理HTML DOM文档存在一个难题是,JavaScript可以在DOM完全加载之前执行,这会给你的代码引发不少的潜在问题.浏览器的渲染和操作顺序大致如下列表: HTML解析完毕外部脚本和样式表加载 ...
selenium web自动化判断页面元素加载完毕
主要方便以后用到时查阅,侵删! 三种等待方法: 1.强制等待sleep(xx) 强制等待,不管你浏览器是否加载完了,程序都得等待,时间一到,继续执行下面的代码,作为调试很有用,有时候也可以在代码里这样 ...
判断iframe是否加载完毕的方法（兼容ie和Firefox）
来源:http://www.cnblogs.com/lovko/archive/2009/01/04/1368013.html < head > < meta http-equiv ...
JS判断图片是否加载完毕
/*** @function Determine if the image has been loaded.* @param img,callback*/ function imgIsLoaded(i ...
如何使用selenium webdriver来判断一个网页加载完毕
想实现一个加载网页计时的功能,如何用selenium webdriver实现判断一个网页加载完毕? ================================================== ...
判断iframe是否加载完成的完美方法
判断iframe是否加载完成的完美方法需求:vue某个组件引入iframe,需要判断iframe是否加载完毕,不然用户进入是白屏加载中 created (){ 使用加载提示框 }mounted () ...
JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果.document.onreadystatechange = function () {if (document.readyState ...