ISS2D:
Код:
<html>
<head>
<title>Позиция МКС</title>
<style>
body { width:99%; height:98%; overflow-x:hidden; overflow-y:hidden; }
#mapdiv { width:100%; height:100%; }
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
function ajax(url, method, param, callback) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
callback(this.responseText);
}
}
xhttp.open(method, url, true);
if(method == 'POST') {
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.send(param);
}
else
xhttp.send();
}
window.onload = () => {
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
var pois = new OpenLayers.Layer.Text( "My Points", { location:"./textfile.txt", projection: map.displayProjection });
map.addLayer(pois);
var layer_switcher= new OpenLayers.Control.LayerSwitcher({});
map.addControl(layer_switcher);
ajax('http://api.open-notify.org/iss-now.json', 'GET', '', (r) => {
var json = JSON.parse(r);
if(json.message == 'success') {
var lonLat = new OpenLayers.LonLat( json.iss_position.longitude, json.iss_position.latitude).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
var zoom=7;
map.setCenter (lonLat, zoom);
}
});
}
</script>
</head>
<body><div id="mapdiv"></div></body>
</html>
ISS3D:
Код:
<!DOCTYPE html>
<html>
<head>
<title>МКС в 3D</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
<style>
body { background-color:black; background-image:url('stars.jpg'); /* скачать с https://www.solarsystemscope.com/textures/ или hhttps://www.solarsystemscope.com/textures/download/2k_stars.jpg */ background-repeat:no-repeat; }
#earth { position: fixed; top: 25%; left: 35%; margin-top: -50px; margin-left: -100px; }
#now { font-family: 'Orbitron', sans-serif; font-size:2em; color:white; position:absolute; left:12px; top:90%; z-index:2; text-shadow: -1px 0px 21px rgba(255, 255, 255, 1); }
#infobox { position:absolute; width:0px; height:0px; z-index:10; background-color:rgba(71, 252, 255, 0.5); border:1px solid #00FBFF; color:white; }
#info { background-color:#eeeeee; color:#000000; border-radius:25px; position:absolute; border:1px solid #aaaaaa; width:20px; height:20px; text-align:center; cursor:pointer; box-shadow:0px 0px 5px #eee; }
#btn_close { border:1px solid #00FBFF; border-top-left-radius:15px; border-top-right-radius:0px; border-bottom-left-radius:0px; border-bottom-right-radius:15px; background-color:rgb(71, 252, 255); width:150px; height:40px; margin:14px 14px; box-shadow:0px 0px 5px rgb(71, 252, 255); }
</style>
<!-- скачать https://x3dom.org/download/dev/x3dom.js -->
<script src="x3dom.js"></script>
<!-- скачать https://github.com/alexei/sprintf.js/ -->
<script src="sprintf.js"></script>
<script>
// см. тут https://stackoverflow.com/questions/1019997/convert-lat-longs-to-x-y-co-ordinates
const MAP_WIDTH = 1000;
const MAP_HEIGHT = 446;
function convert(lat, lon){
var y = ((-1 * lat) + 90) * (MAP_HEIGHT / 180);
var x = (lon + 180) * (MAP_WIDTH / 360);
return {x:x,y:y};
}
function ajax(url, method, param, callback) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
callback(this.responseText);
}
}
xhttp.open(method, url, true);
if(method == 'POST') {
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.send(param);
}
else
xhttp.send();
}
window.onload = () => {
var i=0;
var el_earth = document.getElementById('earth_rotation');
var el_timer = document.getElementById('now');
ajax('http://api.open-notify.org/iss-now.json', 'GET', '', (r) => {
var json = JSON.parse(r);
if(json.message == 'success')
window.document.title = 'МКС в 3D текущая позиция спутника Lon:' + json.iss_position.longitude + ', Lat:' + json.iss_position.latitude;
});
setInterval( () => {
el_earth.setAttribute('rotation', '1 0 ' + i + ' 1');
var dt = new Date();
el_timer.innerHTML = sprintf('%02d.%02d.%04d %02d:%02d:%02d', dt.getDate(), dt.getMonth(), dt.getFullYear(), dt.getHours(), dt.getMinutes(), dt.getSeconds());
i+=0.02;
}, 100);
}
function hide_info() {
var el = document.getElementById('infobox');
el.innerHTML = '';
el.setAttribute('style', 'visibility:hidden; width:0px; height:0px;');
}
function show_info() {
var el = document.getElementById('infobox');
ajax('http://api.open-notify.org/astros.json', 'GET', '', (r) => {
var json = JSON.parse(r);
el.setAttribute('style', 'padding:2px 2px; width:99%; height:98%; visibility:visible;');
if(json.message == 'success') {
el.innerHTML = '<h3><b>Список членов экипажа МКС:</b></h3>';
for(var i=0; i<json.people.length; i++)
el.innerHTML += json.people[i].name + '<br>';
}
el.innerHTML += '<br><br><br><br><center><input type="button" id="btn_close" onclick="hide_info();" value="Закрыть"></center>';
});
}
</script>
</head>
<body>
<div id="infobox">
</div>
<div id="info" onclick="show_info();">i</div>
<div id="now"></div>
<div id="earth">
<x3d width='640px' height='480px'>
<scene>
<transform id="earth_rotation">
<shape>
<appearance>
<!-- скачать тут https://www.solarsystemscope.com/textures/ or https://www.solarsystemscope.com/textures/download/2k_earth_daymap.jpg -->
<ImageTexture url='earth.jpg'/>
</appearance>
<sphere radius='3.5' />
</shape>
</transform>
</scene>
</x3d>
</div>
</body>
</html>