如何在WebGL Earth中更改地球的位置

时间:2019-03-19 14:29:40

标签: javascript css webgl-earth

我在项目中使用的是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>

0 个答案:

没有答案