【Cesium】Cesium图层请求完成的回调

有一个业务需要用到cesium图层请求完成的回调,翻了好久的文档终于给我找到🌶️。

Cesium.ImageryProvider类的一个属性readyPromise

效果如下:

Cesium图层请求完成的回调

完整代码如下:

html 复制代码
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        .button {
            width: 80px;
            height: 30px;
            background-color: rgba(92, 38, 116, 0.818);
            cursor: pointer;
            padding: 10px;
            color: #fff;
            text-align: center;
            line-height: 50px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer">
        <span id="addLayer" class="button">添加图层</span>
        <span id="removeLayer" class="button">移除图层</span>
    </div>
    <script type="module">
        Cesium.Ion.defaultAccessToken = ';

        const viewer = new Cesium.Viewer('cesiumContainer', {
        });

        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(105, 35, 3456789),
            orientation: {
                heading: Cesium.Math.toRadians(360), //方向
                pitch: Cesium.Math.toRadians(-90), //俯仰角
                roll: Cesium.Math.toRadians(0),
            },
        });

        let layer = null;

        // 添加图层(async/await语法糖)
        async function addLayer() {
            let url = './assets/lyy.jpg';
            let rectangleArr = [100.0, 30.0, 110.0, 40.0]

            const singleTileImageryProvider = new Cesium.SingleTileImageryProvider({
                url: url,
                rectangle: new Cesium.Rectangle(
                    ...rectangleArr.map(item => Cesium.Math.toRadians(item))
                ),
            });

            console.log("开始请求图层");

            try {
                // ⭐关键代码⭐
                const res = await singleTileImageryProvider.readyPromise;
                if (res) {
                    console.log("图层请求成功");
                } else {
                    console.log("图层请求失败");
                }
            } catch (error) {
                console.error("图层请求时发生错误:", error);
            }

            // 将imageryProvider添加到地图的图层列表中,使得图层可以在地图上显示
            return viewer.imageryLayers.addImageryProvider(
                singleTileImageryProvider
            );
        }

        /*
        // 添加图层(Promise)
        function addLayer() {
            return new Promise((resolve, reject) => {
                let url = './assets/lyy.jpg';
                let rectangleArr = [100.0, 30.0, 110.0, 40.0];

                const singleTileImageryProvider = new Cesium.SingleTileImageryProvider({
                    url: url,
                    rectangle: new Cesium.Rectangle(
                        ...rectangleArr.map(item => Cesium.Math.toRadians(item))
                    ),
                });

                console.log("开始请求图层");

                singleTileImageryProvider.readyPromise.then(res => {
                    if (res) {
                        console.log("图层请求成功");
                        resolve(viewer.imageryLayers.addImageryProvider(singleTileImageryProvider));
                    } else {
                        console.log("图层请求失败");
                        reject(new Error("图层请求失败"));
                    }
                }).catch(error => {
                    console.error("图层请求时发生错误:", error);
                    reject(error);
                });
            });
        }
        */

        // 移除图层
        function removeLayer() {
            viewer.imageryLayers.remove(layer)
        }

        // 给按钮添加点击事件
        document.getElementById("addLayer").onclick = async () => {
            layer = await addLayer()
        };
        document.getElementById("removeLayer").onclick = () => {
            removeLayer()
        };

    </script>
    </div>
</body>

</html>
相关推荐
懒大王爱吃狼31 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
秃头佛爷2 小时前
Python学习大纲总结及注意事项
开发语言·python·学习
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
XiaoLeisj4 小时前
【JavaEE初阶 — 多线程】单例模式 & 指令重排序问题
java·开发语言·java-ee
励志成为嵌入式工程师4 小时前
c语言简单编程练习9
c语言·开发语言·算法·vim
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
捕鲸叉5 小时前
创建线程时传递参数给线程
开发语言·c++·算法
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
A charmer5 小时前
【C++】vector 类深度解析:探索动态数组的奥秘
开发语言·c++·算法
Peter_chq5 小时前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端