【问题标题】:How to change position of the Earth in WebGL Earth如何在 WebGL 地球中改变地球的位置
【发布时间】:2022-05-05 07:02:53
【问题描述】:

我在这个项目中使用这个 webgl 地球,但我似乎找不到改变画布上行星位置的方法。我想要的目标是将星球放在页面底部,但我找不到解决方法。
我正在为这个问题提供简单的工作演示。提前谢谢你。

function initialize() {
    var options = {
        //   sky: true,
        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);

    // Start a simple rotation animation
    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);


    // earth.setView([51.505, 0], 2.5);
}
html,
body {
  padding: 0;
  margin: 0;
  background-color: white;
  font-family: 'MyWebFont';
  overflow: hidden;
}

#earth_div {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute !important;
}
  <script src="http://www.webglearth.com/v2/api.js"></script>
<body onload="initialize()">
       
   
    <div id="earth_div">
    </div>

【问题讨论】:

  • webglearth.org这是你需要学习和实践的。希望你能学到很多。谢谢
  • 为什么不把#earth_div放在页面底部?
  • 我之前这样做过,结果,它将整个画布移动到页面底部,我失去了我创建的背景动画场景。

标签: javascript css webgl-earth


【解决方案1】:

代码的最后一行。将相机设置到给定的纬度/经度位置。支持 Leaflet 的 LatLng。即:

earth.setView([51.505, 0], 6);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-03-28
    相关资源
    最近更新 更多