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

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

是Cesium.ImageryProvider类的一个属性readyPromise
结果如下：

  Cesium图层哀求完成的回调

完备代码如下：

1. <html lang="en">
3. <head>
4.     <meta charset="utf-8">
5.     <!-- Include the CesiumJS JavaScript and CSS files -->
6.     <script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
7.     <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
8.     <style>
9.         .button {
10.             width: 80px;
11.             height: 30px;
12.             background-color: rgba(92, 38, 116, 0.818);
13.             cursor: pointer;
14.             padding: 10px;
15.             color: #fff;
16.             text-align: center;
17.             line-height: 50px;
18.             border-radius: 10px;
19.         }
20.     </style>
21. </head>
23. <body>
24.     <div id="cesiumContainer">
25.         <span id="addLayer" class="button">添加图层</span>
26.         <span id="removeLayer" class="button">移除图层</span>
27.     </div>
28.     <script type="module">
29.         Cesium.Ion.defaultAccessToken = ';
31.         const viewer = new Cesium.Viewer('cesiumContainer', {
32.         });
34.         viewer.camera.setView({
35.             destination: Cesium.Cartesian3.fromDegrees(105, 35, 3456789),
36.             orientation: {
37.                 heading: Cesium.Math.toRadians(360), //方向
38.                 pitch: Cesium.Math.toRadians(-90), //俯仰角
39.                 roll: Cesium.Math.toRadians(0),
40.             },
41.         });
43.         let layer = null;
45.         // 添加图层(async/await语法糖)
46.         async function addLayer() {
47.             let url = './assets/lyy.jpg';
48.             let rectangleArr = [100.0, 30.0, 110.0, 40.0]
50.             const singleTileImageryProvider = new Cesium.SingleTileImageryProvider({
51.                 url: url,
52.                 rectangle: new Cesium.Rectangle(
53.                     ...rectangleArr.map(item => Cesium.Math.toRadians(item))
54.                 ),
55.             });
57.             console.log("开始请求图层");
59.             try {
60.                 // ⭐关键代码⭐
61.                 const res = await singleTileImageryProvider.readyPromise;
62.                 if (res) {
63.                     console.log("图层请求成功");
64.                 } else {
65.                     console.log("图层请求失败");
66.                 }
67.             } catch (error) {
68.                 console.error("图层请求时发生错误:", error);
69.             }
71.             // 将imageryProvider添加到地图的图层列表中，使得图层可以在地图上显示
72.             return viewer.imageryLayers.addImageryProvider(
73.                 singleTileImageryProvider
74.             );
75.         }
77.         /*
78.         // 添加图层(Promise)
79.         function addLayer() {
80.             return new Promise((resolve, reject) => {
81.                 let url = './assets/lyy.jpg';
82.                 let rectangleArr = [100.0, 30.0, 110.0, 40.0];
84.                 const singleTileImageryProvider = new Cesium.SingleTileImageryProvider({
85.                     url: url,
86.                     rectangle: new Cesium.Rectangle(
87.                         ...rectangleArr.map(item => Cesium.Math.toRadians(item))
88.                     ),
89.                 });
91.                 console.log("开始请求图层");
93.                 singleTileImageryProvider.readyPromise.then(res => {
94.                     if (res) {
95.                         console.log("图层请求成功");
96.                         resolve(viewer.imageryLayers.addImageryProvider(singleTileImageryProvider));
97.                     } else {
98.                         console.log("图层请求失败");
99.                         reject(new Error("图层请求失败"));
100.                     }
101.                 }).catch(error => {
102.                     console.error("图层请求时发生错误:", error);
103.                     reject(error);
104.                 });
105.             });
106.         }
107.         */
109.         // 移除图层
110.         function removeLayer() {
111.             viewer.imageryLayers.remove(layer)
112.         }
114.         // 给按钮添加点击事件
115.         document.getElementById("addLayer").onclick = async () => {
116.             layer = await addLayer()
117.         };
118.         document.getElementById("removeLayer").onclick = () => {
119.             removeLayer()
120.         };
122.     </script>
123.     </div>
124. </body>
126. </html>

复制代码