cesium无法铺满怎么办？利用 ResizeObserver 来监听 ＜div＞ 元素的大小变化。使得其铺满

俺也不知道为什么，通常情况下，当你创建一个 Cesium Viewer 或 CesiumWidget 实例时，需要指定一个现有的 DOM 元素作为容器。

// 使用 id 为 'cesiumContainer' 的元素作为 Viewer 的容器
const viewer = new Cesium.Viewer('cesiumContainer');

从而设置div元素大小情况下，即，cesiumContainer 是一个现有的 <div> 元素的 id，它将成为 Cesium Viewer 的容器。

实现全屏铺满样式设置。

#cesiumContainer {
width: 100%;
height: 100%;
overflow: hidden;
// width: 100vw;
//   height: 100vh;
}

但是不知道为啥。死活不行

Cesium 场景未能完全铺满所挂载的 <div> 元素大小的问题通常涉及到几个可能的原因和解决方法：

1. CSS 样式问题：
   • 父元素尺寸设置不正确：确保包含 Cesium <div> 元素的父元素（即挂载 Cesium 的容器）已经正确设置了尺寸。父元素如果没有设置明确的宽度和高度，可能会导致 Cesium 容器无法准确地计算其自身的尺寸。

2. JavaScript 初始化问题：

   • 初始化时机：确保在 Cesium Viewer 或 CesiumWidget 实例化之前，父容器的大小已经被正确地计算和设置。如果 Cesium 实例化时父容器尺寸为零或者未知，可能会导致 Cesium 场景无法正确初始化大小。

3. 浏览器缩放或重新加载问题：

   • 浏览器缩放：有时候在缩放浏览器窗口后，Cesium 场景可能没有自动调整大小以适应新的视窗尺寸。可以尝试重新加载页面或者在浏览器缩放后手动触发 Cesium 场景的重新计算和渲染。

然而都没有用。

最后使用 ResizeObserver 监听元素大小变化，resize事件不要挂在window上,应该在div上，resizeObserver。触发时重设画布大小为div宽高

。

答案如下：

要利用 ResizeObserver 来监听 <div> 元素的大小变化，并在大小变化时重设 Cesium 的画布大小以匹配 <div> 元素的宽度和高度，你可以按照以下步骤进行操作：

• 创建 ResizeObserver 实例： 首先，创建一个 ResizeObserver 实例，用于监听指定 <div> 元素的大小变化。

• 获取 Cesium 的画布： Cesium 的画布是指它渲染地球场景的 DOM 元素，可以通过 Cesium 的 Viewer 或 CesiumWidget 实例获取。

• 在 ResizeObserver 的回调函数中处理： 在 ResizeObserver 的回调函数中，当 <div> 元素的大小发生变化时，获取新的宽度和高度，并将这些值应用到 Cesium 的画布上。

下面是一个实现的示例代码：

// 创建 ResizeObserver 实例
const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
        const target = entry.target;
        const width = target.clientWidth;
        const height = target.clientHeight;

        // 获取 Cesium 的画布
        const cesiumCanvas = document.querySelector('#cesiumContainer canvas');

        // 设置 Cesium 画布的大小
        cesiumCanvas.style.width = width + 'px';
        cesiumCanvas.style.height = height + 'px';

        // 调整 Cesium 的场景大小
        viewer.resize();
    }
});

// 监听的目标元素
const targetElement = document.getElementById('cesiumContainer');

// 开始监听目标元素的大小变化
resizeObserver.observe(targetElement);

然后就好了，真的感天动地。

解释代码：

通过这种方式，你可以利用 ResizeObserver 监听 <div> 元素的大小变化，并实时调整 Cesium 场景的画布大小，以保持与 <div> 元素相匹配的视觉布局。

• 创建 ResizeObserver 实例：使用 new ResizeObserver(callback) 创建一个 ResizeObserver 实例，其中 callback 是一个回调函数，用于处理目标元素大小变化时的逻辑。

• 回调函数处理：在回调函数中，通过 entries 获取目标元素的最新尺寸信息。这里假设目标元素是 id 为 cesiumContainer 的 <div> 元素。

• 获取 Cesium 的画布：使用 document.querySelector('#cesiumContainer canvas') 获取 Cesium 的画布元素。Cesium 默认情况下会在 #cesiumContainer 内创建一个 <canvas> 元素来渲染地球场景。

• 设置 Cesium 画布大小：将获取到的新的宽度和高度应用到 Cesium 的画布上，通过设置 style.width 和 style.height。

• 调整 Cesium 的场景大小：调用 viewer.resize() 方法来通知 Cesium 重新计算并应用新的画布大小。

• 注意事项：

• 确保在 Cesium 的初始化之后再开始监听 ResizeObserver，以确保能正确获取和操作 Cesium 的画布元素。
• 如果 Cesium 的场景内容随着大小变化而适应性地调整，可能需要进一步的布局和样式调整来确保视觉效果的一致性。

 然后实现了拖拽画布变化大小了，真的很棒，开心开心。