如何调整WebGL Earth中地球在画布的位置，使其置于页面底部

嘿，我之前也碰到过这个困扰！WebGL Earth默认会让容器占满整个视口，要把地球固定在页面底部，得从容器样式和定位入手调整，下面是具体的解决步骤：

1. 修改容器CSS定位 #

原来的#earth_div设置了top:0; bottom:0，会让它铺满整个页面高度。我们需要调整定位规则，把容器固定在底部并限制高度：

html, body {
 padding: 0;
 margin: 0;
 background-color: white;
 font-family: 'MyWebFont';
 overflow: hidden;
}
#earth_div {
 bottom: 0;  /* 把容器固定在页面底部 */
 left: 0;
 right: 0;
 top: auto;  /* 取消顶部对齐，让容器高度由我们指定 */
 height: 60vh;  /* 自定义容器高度，比如占视口60%，也可以用固定像素值 */
 position: absolute !important;
}

这样容器就只会占据页面底部的指定区域，WebGL Earth的地球会自动在这个容器内渲染，自然就出现在页面底部了。

2. 可选：优化地球初始显示效果 #

如果地球在底部容器里显示不全，你可以在初始化代码里添加setView来调整合适的视角和缩放级别，让地球显示更完整：

function initialize() {
 var options = {
 atmosphere: true,
 zooming: false,
 };
 var earth = new WE.map('earth_div', options);
 WE.tileLayer('https://webglearth.github.io/webglearth2-offline/{z}/{x}/{y}.jpg', {
 tileSize: 256,
 tms: true
 }).addTo(earth);

 // 添加这行设置初始视图（纬度、经度、缩放级别），根据需求调整参数
 earth.setView([0, 0], 1);

 // 你的动画和标记代码保持不变
 var before = null;
 requestAnimationFrame(function animate(now) {
 var c = earth.getPosition();
 var elapsed = before ? now - before : 0;
 before = now;
 earth.setCenter([c[0], c[1] + 0.1 * (elapsed / 30)]);
 requestAnimationFrame(animate);
 });

 var marker = WE.marker([51.5, -0.09]).addTo(earth);
 marker.bindPopup("<b>Hello world!</b><br>I am a popup.<br /><span style='font-size:10px;color:#999'>Tip: Another popup is hidden in Cairo..</span>", {
 maxWidth: 150,
 closeButton: true
 }).openPopup();

 var marker2 = WE.marker([30.058056, 31.228889]).addTo(earth);
 marker2.bindPopup("<b>Cairo</b><br>Yay, you found me!", {
 maxWidth: 120,
 closeButton: false
 });

 var markerCustom = WE.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth);
}

为什么原来的设置无效？ #

原来的CSS让#earth_div绝对定位铺满整个视口，所以地球会占据整个页面。通过修改top:auto和bottom:0，我们放开了容器的顶部约束，只固定底部，再指定高度，就把容器限制在了页面底部区域，WebGL Earth会自动在这个容器内渲染地球，完美实现你要的效果。

内容的提问来源于stack exchange，提问作者Luka