取得瓦片数据加载状态
loading
瓦片数据量较大,加载时间长,可以通过 TileMap 的事件监听瓦片数据加载状态,显示加载进度,提升用户体验。数据加载相关事件如下:
事件名称 | 参数 | 说明 |
---|---|---|
loading-start | itemsLoaded: 加载完成数量 itemsTotal: 加载完成合计 | 在地图数据开始加载时发生(THREE.LoadingManager 事件的封装) |
loading-error | url: 瓦片 url | 在地图数据加载错误时发生(THREE.LoadingManager 事件的封装) |
loading-complete | 无 | 在地图数据全部加载完成时发生(THREE.LoadingManager 事件的封装) |
主要代码如下:
ts
// 显示地图加载进度
function showLoading(map, id) {
const el = document.querySelector("#loading");
if (el) {
map.addEventListener("loading-start", (evt) => {
el.innerHTML =
"Started: " + evt.itemsLoaded + " of " + evt.itemsTotal + " files.";
});
map.addEventListener("loading-progress", (evt) => {
el.innerHTML =
"Loading: " + evt.itemsLoaded + " of " + evt.itemsTotal + " files.";
});
map.addEventListener("loading-complete", () => {
el.innerHTML = "Loading complete!";
});
map.addEventListener("loading-error", (url) => {
el.innerHTML = "There was an error loading " + url;
});
}
}
showLoading(map);