2. 取得瓦片数据加载状态

loading

瓦片数据量较大，加载时间长，可以通过 TileMap 的事件监听瓦片数据加载状态，显示加载进度，提升用户体验。数据加载相关事件如下：

事件名称	参数	说明
loading-start	itemsLoaded: 加载完成数量 itemsTotal: 加载完成合计	在地图数据开始加载时发生（THREE.LoadingManager 事件的封装）
loading-error	evt: 事件对象，evt.url 为瓦片 url	在地图数据加载错误时发生（THREE.LoadingManager 事件的封装）
loading-complete	无	在地图数据全部加载完成时发生（THREE.LoadingManager 事件的封装）

主要代码如下：

/**
 * 显示地图瓦片加载进度
 * @param map 地图实例
 * @param id 显示进度的元素 id（默认 "loading"），也支持 "#xxx" 形式的 CSS 选择器
 */
function showLoading(map, id = "loading") {
    const el = id?.startsWith("#") ? document.querySelector(id) : document.getElementById(id ?? "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", (evt) => {
            el.innerHTML = "There was an error loading " + evt?.url;
        });
    }
}
showLoading(map, "loading");