1. #1
    Membre du Club
    Inscrit en
    mars 2006
    Messages
    94
    Détails du profil
    Informations forums :
    Inscription : mars 2006
    Messages : 94
    Points : 40
    Points
    40

    Par défaut openlayers 4.1.1: Création d'une carte animée

    Salut,
    Je suis débutant avec openlayers.
    J'ai téléchargé un livre et j'essaye de comprende "openlayers".
    J'utilise cette exemple pour comprendre comment créer une carte animée:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    <!doctype html>
    <html>
      <head>
        <title>Animation Examples</title>
        <link rel="stylesheet" href="../assets/ol4/css/ol.css" type="text/css" />
        <link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
      </head>
      <body>
        <div id="map" class="map"></div>
        <button onclick="doBounce(london);">Bounce To London</button><br />
        <button onclick="doBounce(rome);">Bounce To Rome</button><br />
        <button onclick="doPan(london);">Pan To London</button><br />
        <button onclick="doPan(rome);">Pan To Rome</button><br />
        <button onclick="doRotate();">Rotate</button><br />
        <button onclick="doZoom(2);">Zoom Out</button><br />
        <button onclick="doZoom(0.5);">Zoom In</button>
        <script src="../assets/ol4/js/ol.js"></script>
        <script>
          var layer = new ol.layer.Tile({
            source: new ol.source.OSM()
          });
          var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
          var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
          var view = new ol.View({
            center: london,
            zoom: 6
          });
          var map = new ol.Map({
            target: 'map',
            layers: [layer],
            view: view
          });
    
          function doBounce(location) {
            // bounce by zooming out one level and back in
            var bounce = ol.animation.bounce({
              resolution: map.getView().getResolution() * 2
            });
            // start the pan at the current center of the map
            var pan = ol.animation.pan({
              source: map.getView().getCenter()
            });
            map.beforeRender(bounce);
            map.beforeRender(pan);
            // when we set the center to the new location, the animated move will
            // trigger the bounce and pan effects
            map.getView().setCenter(location);
          }
          function doPan(location) {
            // pan from the current center
            var pan = ol.animation.pan({
              source: map.getView().getCenter()
            });
            map.beforeRender(pan);
            // when we set the new location, the map will pan smoothly to it
            map.getView().setCenter(location);
          }
          function doRotate() {
            // rotate 360 degrees
            var rotate = ol.animation.rotate({
              rotation: Math.PI * 2
            });
            map.beforeRender(rotate);
          }
          function doZoom(factor) {
            // zoom from the current resolution
            var zoom = ol.animation.zoom({
              resolution: map.getView().getResolution()
            });
            map.beforeRender(zoom);
            // setting the resolution to a new value will smoothly zoom in or out
            // depending on the factor
            map.getView().setResolution(map.getView().getResolution() * factor);
          }
        </script>
      </body>
    </html>
    Mais ça ne marche pas, sachant que l'utilise openlayers 4.4.1 sous Firefox 53.0.

    Merci

  2. #2
    Membre du Club
    Inscrit en
    mars 2006
    Messages
    94
    Détails du profil
    Informations forums :
    Inscription : mars 2006
    Messages : 94
    Points : 40
    Points
    40

    Par défaut

    Résolu,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    <!doctype html>
    <html>
      <head>
        <title>Animation Examples</title>
        <link rel="stylesheet" href="../assets/ol4/css/ol.css" type="text/css" />
        <link rel="stylesheet" href="../assets/css/sample.css" type="text/css" />
        <script src="../assets/ol4/js/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <button onclick="rotateLeft();">rl</button>
        <button onclick="rotateRight();">rr</button>
        <button onclick="doBounce(london);">Bounce To London</button>
        <button onclick="doBounce(rome);">Bounce To Rome</button>
        <button onclick="doPan(london);">Pan To London</button>
        <button onclick="doPan(rome);">Pan To Rome</button>
        <button onclick="doRotate();">Rotate</button>
        <button onclick="doZoom(-1);">Zoom Out</button>
        <button onclick="doZoom(1);">Zoom In</button>
    
        <script>
          var layer = new ol.layer.Tile({
            source: new ol.source.OSM()
          });
          var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
          var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
          var view = new ol.View({
            center: london,
            zoom: 6
          });
          var map = new ol.Map({
            target: 'map',
            layers: [layer],
            view: view
          });
    
          function rotateLeft() {
            view.animate({
              rotation: view.getRotation() + Math.PI / 2
            });
          }
    
          function rotateRight () {
            view.animate({
              rotation: view.getRotation() - Math.PI / 2
            });
          }
    
          function bounce(t) {
            var s = 7.5625, p = 2.75, l;
            if (t < (1 / p)) {
              l = s * t * t;
            } else {
              if (t < (2 / p)) {
                t -= (1.5 / p);
                l = s * t * t + 0.75;
              } else {
                if (t < (2.5 / p)) {
                  t -= (2.25 / p);
                  l = s * t * t + 0.9375;
                } else {
                  t -= (2.625 / p);
                  l = s * t * t + 0.984375;
                }
              }
            }
            return l;
          }
    
          function doBounce(l) {
            view.animate({
              center: l,
              duration: 2000,
              easing: bounce
            });
          }
          
          function doPan(l) {
            view.animate({
              center: l,
              duration: 2000
            });
          }
    
          function doRotate() {
            view.animate({
              rotation: view.getRotation() + Math.PI * 2
            });
          }
    
          function doZoom(v) {
            if (v == 1)
            view.animate({
              zoom: view.getZoom() + 1
            });
    
            if (v == -1)
            view.animate({
              zoom: view.getZoom() -1
            });
          }
    
    
        </script>
      </body>
    </html>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Modifier une carte animée
    Par mawi dans le forum Flash
    Réponses: 19
    Dernier message: 04/01/2008, 16h35
  2. Réponses: 3
    Dernier message: 22/05/2007, 11h05
  3. Création d'une carte géographqiue pour un jeu.
    Par Space Cowboy dans le forum JavaScript
    Réponses: 3
    Dernier message: 06/03/2007, 12h26
  4. création d'une carte au format jpg
    Par TocTocKiéLà? dans le forum C++
    Réponses: 2
    Dernier message: 13/02/2007, 17h28
  5. création d'une carte avec navigation du type mappy
    Par BernardT dans le forum Interfaces Graphiques en Java
    Réponses: 3
    Dernier message: 30/10/2005, 01h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo