mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
227 lines
7.3 KiB
HTML
227 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--
|
|
Copyright (c) 2015-2018 Jean-Marc VIGLINO,
|
|
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
|
-->
|
|
<title>ol-ext: WhereTheHellIsThomas</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<link rel="icon" type="image/png" href="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/IGN_logo_2012.svg/218px-IGN_logo_2012.svg.png" />
|
|
|
|
<meta name="description" content="Geoportail layer for ol" />
|
|
<meta name="keywords" content="ol, openlayers, layer, source, geoportail" />
|
|
|
|
<meta name="msapplication-tap-highlight" content="no" />
|
|
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@viglino">
|
|
<meta name="twitter:creator" content="@viglino">
|
|
<meta name="twitter:title" content="ol-ext - Where the hell is Thomas?">
|
|
<meta name="twitter:description" content="Get the real-time position of Thomas Pesquet on the ISS using 'Where The ISS At?' API and Openlayers.">
|
|
<meta name="twitter:image" content="https://viglino.github.io/ol-ext/examples/img/wthit.jpg">
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
|
|
<!-- Openlayers -->
|
|
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
|
|
<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
|
|
|
|
<!-- ol-ext -->
|
|
<link rel="stylesheet" href="../../dist/ol-ext.css" />
|
|
<script type="text/javascript" src="../../dist/ol-ext.js"></script>
|
|
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
|
|
<script src="https://unpkg.com/elm-pep"></script>
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
<style>
|
|
#map {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #0a3b59;
|
|
}
|
|
#status * {
|
|
color: #fff;
|
|
margin: 0;
|
|
}
|
|
.ol-zoom {
|
|
display: none;
|
|
}
|
|
.ol-control.ol-status {
|
|
padding: .3em 1em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
|
|
|
<!-- DIV pour la carte -->
|
|
<div id="map"></div>
|
|
<div id="status">
|
|
<h2>Where the hell is Thomas?</h2>
|
|
<p>Date: <span class='date'></span></p>
|
|
<p>Position: <span class='lonlat'></span></p>
|
|
<p>Altitude: <span class='alt'></span> km</p>
|
|
<p>Vélocity: <span class='speed'></span> km/h</p>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
// The map
|
|
var map = new ol.Map ({
|
|
target: 'map',
|
|
interactions: ol.interaction.defaults({altShiftDragRotate:false, pinchRotate:false}),
|
|
view: new ol.View ({
|
|
zoom: 5,
|
|
center: [0,0],
|
|
maxZoom: 10,
|
|
projection:'EPSG:4326'
|
|
})
|
|
});
|
|
|
|
// Earth photo
|
|
map.addLayer (new ol.layer.Geoportail({
|
|
layer: 'ORTHOIMAGERY.ORTHOPHOTOS'
|
|
}));
|
|
// Day/night
|
|
var daynight = new ol.source.DayNight({ });
|
|
map.addLayer(new ol.layer.Vector({
|
|
source: daynight,
|
|
style: new ol.style.Style({
|
|
fill: new ol.style.Fill({
|
|
color: [0,0,50,.5]
|
|
})
|
|
})
|
|
}));
|
|
|
|
var issSource = new ol.source.Vector({
|
|
attributions: [ '© <a href="https://wheretheiss.at/">WhereTheISS.at</a>' ]
|
|
});
|
|
map.addLayer(
|
|
new ol.layer.Vector({
|
|
title: 'ISS',
|
|
className: 'vector',
|
|
source: issSource,
|
|
style: new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
radius: 2,
|
|
fill: new ol.style.Fill({ color: '#fff' })
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: [255,255,255,.75],
|
|
width: 1.25
|
|
})
|
|
})
|
|
})
|
|
);
|
|
var iss = new ol.Feature(new ol.geom.Point([0,0]));
|
|
issSource.addFeature(iss);
|
|
issImage = new ol.style.Icon({
|
|
src: '../img/iss.png',
|
|
scale: 0,
|
|
crossOrigin: 'anonymous'
|
|
});
|
|
iss.setStyle (new ol.style.Style({
|
|
image: issImage
|
|
}));
|
|
var track = new ol.Feature(new ol.geom.LineString([]));
|
|
issSource.addFeature(track);
|
|
|
|
// Get older
|
|
// https://api.wheretheiss.at/v1/satellites/25544/positions?timestamps=1436029892,1436029902
|
|
|
|
var start, current, destination;
|
|
var delay = 50;
|
|
|
|
// Get ISS position
|
|
function trackISS() {
|
|
// Next position in delay mn later
|
|
var date = new Date();
|
|
var stamp = Math.round(date.getTime()/1000) + delay;
|
|
$.ajax({
|
|
url: 'https://api.wheretheiss.at/v1/satellites/25544/positions?timestamps='+stamp,
|
|
success: function(pos) {
|
|
// console.log('load destination');
|
|
if (destination) start = destination;
|
|
destination = pos[0];
|
|
setTimeout(trackISS, (delay-1) * 1000)
|
|
// issSource.addFeature(new ol.Feature(new ol.geom.Point([pos[0].longitude, pos[0].latitude])))
|
|
}
|
|
});
|
|
}
|
|
$.ajax({
|
|
url: 'https://api.wheretheiss.at/v1/satellites/25544/',
|
|
success: function(pos) {
|
|
start = current = pos;
|
|
// Start tracking
|
|
trackISS();
|
|
}
|
|
});
|
|
|
|
function drawISS() {
|
|
//var date = new Date((new Date()).getTime() - 1*60*60*1000);
|
|
var date = new Date();
|
|
// 25 img/s
|
|
if (!current || date.getTime() - current.timestamp > 1000/25) {
|
|
var stamp = Math.round(date.getTime()/1000);
|
|
// Interpolate position
|
|
if (start && destination) {
|
|
var sc = (stamp - start.timestamp) / (destination.timestamp - start.timestamp);
|
|
current = {
|
|
position: [
|
|
start.longitude + sc*(destination.longitude - start.longitude),
|
|
start.latitude + sc*(destination.latitude - start.latitude),
|
|
],
|
|
timestamp: date.getTime()
|
|
}
|
|
var res = map.getView().getResolution();
|
|
issImage.setScale(Math.max(.15, .025/Math.sqrt(map.getView().getResolution())));
|
|
issImage.setRotation(Math.PI/2+Math.atan2(destination.latitude-start.latitude,start.longitude-destination.longitude));
|
|
iss.getGeometry().setCoordinates(current.position);
|
|
var t = track.getGeometry().getCoordinates();
|
|
t.push(current.position)
|
|
track.getGeometry().setCoordinates(t);
|
|
//map.getView().animate({ center: current.position } );
|
|
// Show info
|
|
$('#status .lonlat').text(ol.coordinate.toStringHDMS(current.position));
|
|
$('#status .alt').text((start.altitude + sc*(destination.altitude - start.altitude)).toFixed(1));
|
|
$('#status .speed').text((start.velocity + sc*(destination.velocity - start.velocity)).toFixed(1));
|
|
$('#status .date').text(date.toLocaleString());
|
|
// Center if not interacting
|
|
if (!interacting) map.getView().setCenter(current.position);
|
|
// Update day/night
|
|
daynight.setTime(date);
|
|
}
|
|
}
|
|
requestAnimationFrame(drawISS);
|
|
}
|
|
drawISS();
|
|
|
|
var interacting = false;
|
|
var tout;
|
|
map.addInteraction(new ol.interaction.Interaction({
|
|
handleEvent: function(e) {
|
|
if (e.type!=='pointermove') {
|
|
interacting = true;
|
|
clearTimeout(tout);
|
|
tout = setTimeout(function() { interacting = false; }, 500);
|
|
}
|
|
return true;
|
|
}
|
|
}));
|
|
|
|
map.addControl(new ol.control.ScaleLine());
|
|
|
|
var ctrl = new ol.control.Status();
|
|
map.addControl(ctrl);
|
|
ctrl.status($('#status').get(0))
|
|
|
|
</script>
|
|
</body>
|
|
</html> |