mirror of
https://github.com/Viglino/ol-games.git
synced 2026-01-18 15:17:17 +00:00
222 lines
22 KiB
HTML
222 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--
|
|
Copyright (c) 2016 Jean-Marc VIGLINO,
|
|
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
|
-->
|
|
<title>ol-games: Sprite path</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<meta name="description" content="Moving sprites along a path with openlayers" />
|
|
<meta name="keywords" content="ol,openlayers, game, animation, sprite, move, path" />
|
|
|
|
<link rel="stylesheet" href="style.css" />
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
<!-- FontAwesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<!-- OpenLayers -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
|
|
|
|
<!-- ol-ext -->
|
|
<link rel="stylesheet" href="https://rawgit.com/Viglino/ol-ext/master/dist/ol-ext.css" />
|
|
<script type="text/javascript" src="https://rawgit.com/Viglino/ol-ext/master/dist/ol-ext.js"></script>
|
|
|
|
<!-- ol-games -->
|
|
<link rel="stylesheet" href="../dist/ol-games.css" />
|
|
<script type="text/javascript" src="../dist/ol-games.js"></script>
|
|
<!-- Proj4 -->
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js"></script>
|
|
|
|
<style>
|
|
#map {
|
|
width: 1366px;
|
|
height: 768px;
|
|
float: left;
|
|
}
|
|
.ol-control.ol-framerate {
|
|
left: auto;
|
|
right: 0.5em;
|
|
}
|
|
textarea {
|
|
vertical-align: top;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol-games" class="icss-github-corner"><i></i></a>
|
|
|
|
<a href="../index.html">
|
|
<h1>ol-games: Sprite path</h1>
|
|
</a>
|
|
<div class="info">
|
|
This example show how a sprite can follow a path.
|
|
<br/>
|
|
You can use the <i>ol.Sprite.setPath()</i> to set the path to follow. Then just call <i>ol.Sprite.move()</i>
|
|
in the game loop to have the sprite moving along the path.
|
|
Use <i>ol.Sprite.stop()</i> and <i>ol.Sprite.restart()</i> to control the movement.
|
|
<br />
|
|
Listen to :
|
|
<ul>
|
|
<li>
|
|
<i>change:direction</i> event to know when the sprite take a new segment
|
|
</li>
|
|
<li>
|
|
<i>destination</i> event to know when the sprite reach the final destination.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Map div -->
|
|
<div id="map"></div>
|
|
|
|
<div class="options" >
|
|
<h2>Options:</h2>
|
|
<ul>
|
|
<li>
|
|
<button onclick="step=0; go()">Follow the path...</button>
|
|
</li>
|
|
<li>
|
|
<button onclick="plane.stop()">Stop!</button>
|
|
<button onclick="if (plane.destination) plane.restart()">Restart!</button>
|
|
</li>
|
|
<li><hr /></li>
|
|
<li>
|
|
<input id="loop" type="checkbox" /><label for="loop"> loop</label>
|
|
</li>
|
|
<li>
|
|
Speed: <input id="speed" type="number" min="3" max="100" value="10" onchange="plane.setSpeed(Math.max(parseInt(this.value),1));" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
// Define proj4 projection
|
|
proj4.defs("EPSG:3031", "+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs +type=crs");
|
|
//proj4.defs("EPSG:3032","+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=70 +x_0=6000000 +y_0=6000000 +datum=WGS84 +units=m +no_defs +type=crs");
|
|
proj4.defs("EPSG:3032","+proj=stere +lat_0=-90 +lat_ts=50 +lon_0=70 +x_0=6000000 +y_0=000000 +datum=WGS84 +units=m +no_defs +type=crs");
|
|
proj4.defs("EPSG:9354","+proj=stere +lat_0=-90 +lat_ts=-65 +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs +type=crs");
|
|
proj4.defs("EPSG:3412","+proj=stere +lat_0=-90 +lat_ts=-70 +lon_0=0 +x_0=0 +y_0=0 +a=6378273 +b=6356889.449 +units=m +no_defs +type=crs");
|
|
if (ol.proj.proj4 && ol.proj.proj4.register) ol.proj.proj4.register(proj4);
|
|
var proj = 'EPSG:3032'
|
|
|
|
// Layers
|
|
var layer = new ol.layer.Geoportail('ORTHOIMAGERY.ORTHOPHOTOS')
|
|
|
|
// The map
|
|
var map = new ol.Map ({
|
|
target: 'map',
|
|
loadTilesWhileAnimating: true,
|
|
loadTilesWhileInteracting: true,
|
|
view: new ol.View ({
|
|
zoom: 0,
|
|
center: [0,0],
|
|
// projection: proj
|
|
}),
|
|
controls: [ new ol.control.Attribution() ],
|
|
interactions: [],
|
|
layers: [layer]
|
|
});
|
|
|
|
var sprites = new ol.layer.Vector({
|
|
source: new ol.source.Vector(),
|
|
style: new ol.style.Style({
|
|
stroke: new ol.style.Stroke({
|
|
color: 'rgba(255,255,255,.3)',
|
|
width: 1,
|
|
lineDash: [5,5]
|
|
})
|
|
}),
|
|
updateWhileAnimating: true,
|
|
updateWhileInteracting: true
|
|
});
|
|
map.addLayer(sprites);
|
|
|
|
// New Path (cspline)
|
|
var g = [[[-1.823055555555556,46.451388888888886],[-5.035277777777778,45.04638888888891],[-6.608611111111111,45.00305555555556],[-7.9225,43.86916666666667],[-9.101111111111111,43.50749999999999],[-9.464722222222223,42.537222222222226],[-10.506666666666666,41.99250000000001],[-11.635277777777778,41.493055555555515],[-12.183888888888887,40.6225],[-12.224166666666665,39.54805555555555],[-12.706111111111111,38.4955555555556],[-12.673055555555553,37.30277777777778],[-12.451111111111112,36.14361111111111],[-13.8925,35.29444444444445],[-15.235277777777775,34.41888888888887],[-16.522222222222222,33.6227777777778],[-17.255,33.14944444444444],[-17.873333333333335,32.32138888888889],[-19.159722222222218,31.731666666666683],[-20.096111111111107,31.096388888888896],[-20.88361111111111,30.66083333333333],[-21.648888888888887,30.11666666666669],[-22.503888888888888,29.18138888888889],[-23.32111111111111,28.475277777777762],[-23.878333333333334,27.9061111111111],[-24.910555555555558,27.322777777777773],[-25.831388888888885,27.106111111111105],[-26.324166666666667,27.236388888888882],[-26.421111111111113,27.302499999999995],[-26.592777777777773,27.327777777777783],[-26.773611111111116,27.33833333333334],[-27.358611111111113,27.03888888888889],[-28.493055555555554,26.678055555555574],[-29.27638888888889,26.404444444444422],[-29.657500000000002,25.912499999999994],[-30.509444444444448,25.641111111111115],[-31.487222222222226,25.258055555555558],[-32.48416666666667,24.887222222222206],[-32.907222222222224,24.282222222222217],[-33.23305555555556,23.656666666666666],[-32.80722222222222,22.98222222222222],[-32.52194444444444,22.15972222222223],[-32.37166666666667,21.374722222222232],[-32.10527777777778,20.54055555555557],[-31.97,19.850833333333327],[-31.617499999999996,18.858611111111117],[-31.321666666666665,18.272777777777776],[-31.20111111111111,17.626111111111115],[-31.138055555555553,17.010555555555555],[-31.03611111111111,16.42638888888888],[-30.84805555555555,15.628888888888895],[-30.689722222222223,14.02388888888889],[-30.481666666666662,12.33916666666667],[-30.354722222222225,10.699999999999989],[-30.41722222222222,9.195833333333326],[-30.232499999999998,7.759166666666687],[-30.251666666666665,6.906666666666666],[-30.5,6.677499999999981],[-30.554166666666667,6.5347222222222285],[-30.52055555555556,6.133055555555558],[-30.6775,5.5091666666666725],[-30.75611111111111,4.956944444444446],[-31.085833333333333,3.9525000000000006],[-31.540833333333335,2.595555555555535],[-31.990277777777777,1.2008333333333354],[-32.325,-0.1538888888888863],[-32.54194444444445,-1.3394444444444389],[-32.62388888888889,-2.4580555555555748],[-32.7325,-3.7747222222222376],[-32.83361111111111,-4.920277777777798],[-33.028888888888886,-5.938611111111129],[-33.108333333333334,-7.018611111111113],[-33.195,-8.510277777777773],[-32.92027777777778,-10.014722222222204],[-32.52611111111111,-11.50277777777778],[-31.74138888888889,-12.89055555555555],[-30.74361111111111,-13.920555555555538],[-29.74138888888889,-14.81305555555555],[-28.42583333333333,-15.884166666666673],[-27.295277777777777,-16.863333333333344],[-26.010555555555555,-17.83638888888889],[-24.618055555555557,-18.73333333333335],[-23.351666666666667,-19.71666666666667],[-21.938611111111115,-20.420555555555566],[-20.676388888888887,-21.41861111111112],[-19.389722222222222,-22.54222222222222],[-18.209722222222222,-23.5325],[-16.90388888888889,-24.358611111111117],[-15.57388888888889,-25.460277777777776],[-14.304722222222221,-26.498611111111117],[-13.035555555555556,-27.418611111111105],[-11.811944444444444,-28.116666666666667],[-10.594166666666668,-28.75027777777779],[-9.450833333333334,-29.73222222222222],[-8.265555555555556,-30.90083333333333],[-6.899166666666666,-32.01861111111111],[-5.615555555555555,-33.15277777777778],[-4.107222222222222,-34.078611111111115],[-2.4336111111111105,-34.98],[-0.6247222222222218,-35.806666666666665],[1.138055555555556,-36.350833333333334],[2.799722222222222,-37.159444444444446],[4.500277777777778,-37.64166666666666],[6.121111111111111,-38.10361111111112],[8.006666666666666,-38.408055555555556],[9.87138888888889,-38.50750000000001],[11.506944444444443,-38.33888888888889],[12.689444444444444,-38.7625],[13.469722222222222,-39.803611111111096],[14.768055555555556,-39.848888888888894],[16.141111111111112,-39.751666666666665],[17.70388888888889,-39.25027777777778],[18.996944444444445,-38.90277777777778],[19.76833333333333,-39.776944444444446],[21.46055555555555,-40.48388888888889],[23.034444444444446,-41.12305555555556],[24.63638888888889,-41.95305555555556],[26.489166666666666,-42.227222222222224],[28.067500000000003,-42.86777777777777],[29.718888888888888,-43.410555555555554],[31.188055555555557,-44.15527777777776],[32.89888888888889,-44.788611111111095],[34.350833333333334,-45.53944444444444],[35.785,-45.939722222222215],[37.65,-45.56527777777778],[39.713055555555556,-45.37305555555556],[41.805,-45.21694444444445],[43.71000000000001,-45.13055555555556],[45.816111111111105,-45.22333333333332],[47.955,-45.31722222222222],[49.89249999999999,-45.403055555555554],[51.20416666666667,-45.33916666666667],[52.34305555555556,-45.2225],[53.020833333333336,-44.95],[53.55138888888888,-44.6238888888889],[54.5063888888889,-44.909444444444446],[55.68527777777778,-45.05444444444444],[56.04222222222222,-45.07444444444444],[56.64388888888888,-45.125277777777775],[58.25166666666666,-45.41555555555556],[59.88333333333333,-45.91944444444445],[61.69416666666666,-46.42000000000001],[63.44194444444444,-46.82555555555556],[65.25583333333333,-47.23694444444444],[67.00138888888888,-47.57222222222222],[69.20277777777778,-47.80972222222222],[71.07111111111111,-47.87111111111111],[73.34861111111111,-48.18861111111111],[75.71694444444445,-48.52416666666667],[78.06305555555555,-48.92055555555555],[80.27805555555554,-49.39805555555555],[82.64277777777777,-49.71083333333333],[84.96527777777779,-49.8388888888889],[87.1575,-49.86444444444444],[89.21055555555556,-49.790000000000006],[91.2025,-49.25916666666666],[92.74527777777777,-48.46833333333334],[93.95305555555555,-47.85416666666667],[95.35138888888888,-48.06388888888888],[96.21833333333333,-47.40222222222221],[97.73166666666667,-46.733055555555566],[99.4875,-46.089166666666664],[100.98972222222223,-45.43777777777779],[102.32166666666666,-45.588888888888896],[103.54944444444445,-45.837777777777774],[105.46083333333334,-45.17166666666667],[106.90555555555557,-44.735],[108.32833333333333,-44.66222222222221],[109.77666666666666,-44.200277777777764],[111.49388888888888,-43.98361111111111],[112.89333333333335,-44.18333333333334],[114.80611111111111,-43.79083333333333],[116.75333333333334,-43.459722222222226],[118.55916666666668,-43.02361111111111],[120.36777777777777,-42.52638888888888],[121.9975,-41.80833333333333],[123.25527777777778,-42.771388888888886],[124.60638888888889,-43.75999999999999],[125.97472222222224,-44.82555555555557],[127.17055555555555,-45.885277777777794],[128.70138888888889,-46.44777777777778],[130.44305555555556,-47.059444444444445],[132.0377777777778,-47.5225],[133.6925,-47.88805555555556],[134.6861111111111,-48.15916666666667],[137.36583333333334,-48.81944444444446],[139.12555555555554,-49.52388888888889],[140.4933333333333,-49.589166666666664],[141.85277777777776,-49.63305555555556],[143.16916666666668,-49.50916666666666],[144.05583333333334,-48.64694444444444],[145.86305555555555,-48.988333333333344],[147.67472222222221,-49.386944444444445],[149.305,-49.7875],[150.48638888888888,-50.003055555555555],[151.8211111111111,-50.8375],[153.04888888888888,-51.35944444444445],[154.6011111111111,-51.50527777777778],[156.1783333333333,-50.83444444444444],[157.83694444444444,-50.04611111111111],[159.66805555555555,-49.62861111111112],[161.13638888888886,-49.73777777777779],[163.19694444444445,-49.839444444444446],[165.47027777777777,-49.86777777777778],[167.21666666666667,-49.7188888888889],[168.94972222222222,-50.43805555555555],[170.81694444444443,-51.06611111111111],[172.74194444444447,-51.65527777777777],[174.975,-52.274166666666666],[176.79055555555556,-52.935833333333335],[178.67305555555555,-53.82638888888889]],[[-179.1761111111111,-54.790000000000006],[-177.09305555555557,-55.50722222222223],[-175.0197222222222,-56.23694444444445],[-172.85361111111112,-56.823055555555555],[-170.70972222222224,-57.11638888888889],[-168.55027777777778,-57.478055555555564],[-166.93666666666667,-57.435],[-164.79166666666669,-57.3736111111111],[-162.70388888888888,-57.387499999999996],[-160.75055555555556,-57.174166666666665],[-158.60277777777776,-56.940555555555555],[-155.81055555555557,-56.55333333333333],[-152.9375,-56.08416666666667],[-150.20277777777778,-55.70638888888889],[-147.4438888888889,-55.27722222222222],[-144.67666666666668,-54.87638888888889],[-141.7888888888889,-54.44166666666665],[-138.90194444444444,-54.105],[-136.1038888888889,-53.823055555555555],[-133.38583333333332,-53.55222222222221],[-130.69055555555553,-53.43888888888889],[-128.38222222222223,-53.64888888888889],[-126.67222222222225,-54.139166666666675],[-125.12527777777777,-54.51583333333334],[-122.93638888888889,-54.5],[-120.40777777777777,-54.36277777777777],[-118.055,-54.42416666666666],[-115.47805555555556,-54.62250000000001],[-113.22416666666669,-54.62638888888888],[-111.12138888888889,-54.47],[-109.745,-55.21611111111111],[-108.2002777777778,-56.299722222222215],[-107.32249999999999,-57.343333333333334],[-104.84333333333333,-57.25722222222222],[-102.0413888888889,-57.30861111111111],[-99.22472222222223,-57.37749999999999],[-96.26833333333333,-57.6575],[-93.60027777777778,-57.986666666666665],[-90.40722222222223,-58.17055555555555],[-87.04138888888889,-58.337777777777774],[-83.98333333333332,-58.376666666666665],[-81.26055555555557,-58.11694444444444],[-78.41611111111112,-57.80694444444444],[-75.74833333333333,-57.272777777777776],[-73.23583333333333,-56.90333333333333],[-70.60222222222221,-56.7225],[-68.22472222222223,-56.35472222222222],[-66.47333333333333,-55.84583333333334],[-64.38361111111111,-55.5486111111111],[-61.4525,-55.155],[-59.0225,-54.65666666666667],[-56.83333333333333,-53.57750000000001],[-55.18055555555555,-52.410277777777786],[-54.68694444444444,-51.271944444444436],[-54.57833333333333,-50.57138888888889],[-54.45555555555556,-50.021111111111104],[-53.9675,-49.47305555555556],[-53.447222222222216,-48.85944444444445],[-52.85472222222223,-48.151944444444446],[-52.31861111111111,-47.51083333333333],[-51.73500000000001,-47.0375],[-51.30222222222222,-46.73833333333334],[-51.089444444444446,-46.504444444444445],[-51.349444444444444,-45.68694444444444],[-51.38944444444444,-44.65416666666666],[-51.50361111111111,-43.602222222222224],[-51.551944444444445,-42.250277777777775],[-51.1775,-40.97111111111112],[-50.89305555555556,-39.910555555555554],[-50.48138888888889,-39.14888888888888],[-49.43555555555555,-38.37638888888888],[-48.016666666666666,-37.946666666666665],[-46.7313888888889,-37.5375],[-45.094722222222224,-37.15361111111111],[-43.78583333333333,-36.73361111111111],[-42.46805555555556,-35.85277777777779],[-40.975,-34.832777777777764],[-39.308055555555555,-33.88],[-37.85694444444445,-32.87083333333334],[-36.8575,-32.099722222222226],[-35.841944444444444,-31.42194444444445],[-34.58305555555556,-30.603055555555564],[-33.85416666666667,-29.93777777777779],[-33.45305555555555,-29.449166666666677],[-33.32,-29.12555555555557],[-33.30722222222222,-28.96861111111111],[-33.27027777777778,-28.731944444444444],[-33.13666666666667,-28.203888888888883],[-33.05611111111111,-27.561666666666667],[-32.97916666666667,-26.98222222222224],[-33.138888888888886,-26.58194444444444],[-33.61694444444444,-25.853055555555557],[-34.25138888888889,-25.129722222222227],[-34.503055555555555,-24.40277777777777],[-34.005833333333335,-23.94361111111111],[-33.17472222222222,-23.03333333333333],[-32.3075,-22.393611111111113],[-31.358055555555556,-21.935555555555553],[-30.49305555555555,-21.573333333333323],[-29.747499999999995,-21.19083333333333],[-29.343888888888888,-20.9686111111111],[-29.506388888888893,-20.742777777777775],[-29.64194444444444,-20.361388888888882],[-29.75888888888889,-19.80027777777778],[-29.861111111111114,-19.241388888888892],[-30.05416666666667,-18.85166666666666],[-30.108611111111113,-18.71777777777777],[-30.01222222222222,-18.296388888888885],[-29.868888888888893,-17.653055555555554],[-29.725277777777777,-16.916944444444425],[-29.65833333333333,-16.14277777777778],[-29.726666666666667,-15.315000000000012],[-29.869444444444444,-14.075000000000003],[-29.928888888888892,-12.72333333333333],[-29.892777777777777,-11.321111111111108],[-29.783055555555556,-9.917222222222236],[-29.632222222222225,-8.486111111111114],[-29.436111111111117,-7.248333333333349],[-28.951944444444443,-5.892499999999998],[-28.36833333333334,-4.552777777777777],[-27.91333333333333,-3.2383333333333297],[-27.540555555555553,-1.667500000000004],[-27.38972222222222,-0.3797222222222274],[-27.223888888888887,0.9683333333333337],[-26.972777777777775,1.946111111111108],[-26.746944444444445,2.8841666666666725],[-26.660555555555554,3.523888888888891],[-26.972777777777775,4.557777777777773],[-27.468055555555555,5.542500000000004],[-27.889444444444443,6.48555555555555],[-28.285277777777775,7.385277777777773],[-28.798611111111114,8.424722222222215],[-29.49222222222222,9.721111111111114],[-30.085,10.92305555555555],[-30.610277777777778,12.02111111111111],[-31.031111111111112,13.119166666666658],[-31.506666666666668,14.25611111111111],[-31.7975,15.479722222222222],[-31.82,16.634722222222237],[-31.74277777777778,17.73111111111112],[-31.709999999999997,18.86722222222221],[-31.71861111111111,19.998888888888885],[-31.526666666666667,20.92972222222221],[-31.254166666666666,21.843888888888884],[-30.921944444444446,22.756944444444443],[-30.561388888888885,23.874444444444464],[-30.26888888888889,24.968888888888884],[-30.035833333333333,25.897777777777776],[-29.869722222222222,26.880277777777792],[-29.49111111111111,28.093888888888884],[-28.893055555555556,29.210833333333326],[-28.151111111111113,30.375833333333333],[-27.555555555555554,31.71944444444445],[-26.88,33.043055555555554],[-25.96944444444445,34.223888888888894],[-25.003333333333334,35.50555555555556],[-23.93277777777778,36.71000000000001],[-22.85611111111111,37.78666666666666],[-21.911944444444444,39.102222222222224],[-20.780000000000005,40.264999999999986],[-19.43388888888889,41.503888888888895],[-18.119722222222222,42.523055555555544],[-16.91,43.69333333333333],[-15.435555555555556,44.49805555555557],[-14.00888888888889,45.23805555555555],[-12.362222222222224,45.837222222222266],[-10.548055555555555,46.30027777777778],[-8.488055555555556,46.7775],[-6.764166666666667,47.26249999999996],[-5.363888888888889,47.55555555555554],[-4.455277777777778,47.735833333333346],[-3.436111111111111,47.30833333333334],[-2.698333333333334,46.75249999999997],[-2.115693766772318,46.54145629656554],[-1.8093838952595946,46.48225499312761],[-1.7926904816654081,46.48470966814824],[-1.7914942049632676,46.485919941128685],[-1.7957248170713183,46.49575805598266],[-1.7960921150447204,46.49896722353506],[-1.794396893629017,46.50063980547873],[-1.788633140815626,46.50235123141658]]]
|
|
// g[1].forEach(p => g[0].push([p[0] + 2*Math.PI,p[1]]))
|
|
var path = [], f = []
|
|
for (var i=0; i<2; i++) {
|
|
path[i] = new ol.geom.LineString(g[i])
|
|
path[i].transform('EPSG:4326', map.getView().getProjection())
|
|
// var f = new ol.Feature(path.cspline({ tension: 1, pointsPerSeg: 50 }));
|
|
/**/
|
|
path[i] = path[i].simplify(1000)
|
|
path[i] = path[i].cspline({ tension: 0.7, pointsPerSeg: 50 })
|
|
/**/
|
|
f[i] = new ol.Feature(path[i]);
|
|
sprites.getSource().addFeature(f[i]);
|
|
}
|
|
var pos = f[0].getGeometry().getCoordinates()[0];
|
|
map.getView().setCenter(pos)
|
|
|
|
var rec = new ol.control.VideoRecorder({ videoTarget: 'DIALOG' });
|
|
map.addControl(rec);
|
|
|
|
|
|
// Plane
|
|
var plane = new ol.Sprite({
|
|
position: pos,
|
|
anchorOrigin: [.5, .5],
|
|
src: "data/boat.png",
|
|
size: 69,
|
|
scale: 0.5,
|
|
frameRate: 0,
|
|
// Define the states for the plane
|
|
states: {
|
|
idle: { line:0, length:1 }
|
|
}
|
|
});
|
|
sprites.getSource().addFeature(plane);
|
|
|
|
// When direction change, set the angle of the sprite
|
|
plane.on("change:direction", function(e){
|
|
plane.setRotation(e.angle);
|
|
});
|
|
|
|
// Follow the path
|
|
var t, step=0;
|
|
function go() {
|
|
t = new Date();
|
|
var speed = Math.max(parseInt($("#speed").val()),1);
|
|
$("#speed").val(speed);
|
|
if (!plane.moving()) {
|
|
plane.setPath(f[step].getGeometry().getCoordinates(), speed);
|
|
step++;
|
|
if (step>1) step = 0;
|
|
}
|
|
}
|
|
// Calculate trip duration
|
|
plane.on("destination", function(e) {
|
|
console.log("Time: "+((new Date() - t)/1000));
|
|
if (step || $("#loop").prop("checked")) go();
|
|
});
|
|
|
|
// New Game
|
|
// var game = new ol.Game({ map: map, controls:[new ol.control.FrameRate()] });
|
|
var game = new ol.Game({ map: map });
|
|
|
|
// Game loop
|
|
var zoom = 2;//3.5
|
|
document.addEventListener('keypress', (e) => {
|
|
if (e.key==='-') zoom -= 0.01
|
|
if (e.key==='+') zoom += 0.01
|
|
})
|
|
game.on ("render", function(e) {
|
|
plane.move(e);
|
|
map.getView().setCenter(plane.getGeometry().getCoordinates())
|
|
map.getView().setZoom(zoom)
|
|
});
|
|
// start game!
|
|
game.start();
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |