openlayers-ol3各种旋转特效 

<!DOCTYPE html>
<html>
  <head>
    <title>View Animation</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <button id="rotate-left" title="Rotate clockwise">↻</button>
    <button id="rotate-right" title="Rotate counterclockwise">↺</button>
    <button id="rotate-around-rome">Rotate around Rome</button>
    <button id="pan-to-london">Pan to London</button>
    <button id="elastic-to-moscow">Elastic to Moscow</button>
    <button id="bounce-to-istanbul">Bounce to Istanbul</button>
    <button id="spin-to-rome">Spin to Rome</button>
    <button id="fly-to-bern">Fly to Bern</button>
    <button id="spiral-to-madrid">Spiral to Madrid</button>
    <script>
      // from https://github.com/DmitryBaranovskiy/raphael
      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;
      }

      // from https://github.com/DmitryBaranovskiy/raphael
      function elastic(t) {
        return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
      }

      var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
      var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
      var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
      var rome = ol.proj.fromLonLat([12.5, 41.9]);
      var bern = ol.proj.fromLonLat([7.4458, 46.95]);
      var madrid = ol.proj.fromLonLat([-3.683333, 40.4]);

      var view = new ol.View({
        // the view's initial state
        center: istanbul,
        zoom: 6
      });

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            preload: 4,
            source: new ol.source.OSM()
          })
        ],
        // Improve user experience by loading tiles while animating. Will make
        // animations stutter on mobile or slow devices.
        loadTilesWhileAnimating: true,
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: view
      });

      var rotateLeft = document.getElementById('rotate-left');
      rotateLeft.addEventListener('click', function() {
        var rotateLeft = ol.animation.rotate({
          duration: 2000,
          rotation: -4 * Math.PI
        });
        map.beforeRender(rotateLeft);
      }, false);
      var rotateRight = document.getElementById('rotate-right');
      rotateRight.addEventListener('click', function() {
        var rotateRight = ol.animation.rotate({
          duration: 2000,
          rotation: 4 * Math.PI
        });
        map.beforeRender(rotateRight);
      }, false);

      var rotateAroundRome = document.getElementById('rotate-around-rome');
      rotateAroundRome.addEventListener('click', function() {
        var currentRotation = view.getRotation();
        var rotateAroundRome = ol.animation.rotate({
          anchor: rome,
          duration: 1000,
          rotation: currentRotation
        });
        map.beforeRender(rotateAroundRome);
        view.rotate(currentRotation + (Math.PI / 2), rome);
      }, false);

      var panToLondon = document.getElementById('pan-to-london');
      panToLondon.addEventListener('click', function() {
        var pan = ol.animation.pan({
          duration: 2000,
          source: /** @type {ol.Coordinate} */ (view.getCenter())
        });
        map.beforeRender(pan);
        view.setCenter(london);
      }, false);

      var elasticToMoscow = document.getElementById('elastic-to-moscow');
      elasticToMoscow.addEventListener('click', function() {
        var pan = ol.animation.pan({
          duration: 2000,
          easing: elastic,
          source: /** @type {ol.Coordinate} */ (view.getCenter())
        });
        map.beforeRender(pan);
        view.setCenter(moscow);
      }, false);

      var bounceToIstanbul = document.getElementById('bounce-to-istanbul');
      bounceToIstanbul.addEventListener('click', function() {
        var pan = ol.animation.pan({
          duration: 2000,
          easing: bounce,
          source: /** @type {ol.Coordinate} */ (view.getCenter())
        });
        map.beforeRender(pan);
        view.setCenter(istanbul);
      }, false);

      var spinToRome = document.getElementById('spin-to-rome');
      spinToRome.addEventListener('click', function() {
        var duration = 2000;
        var start = +new Date();
        var pan = ol.animation.pan({
          duration: duration,
          source: /** @type {ol.Coordinate} */ (view.getCenter()),
          start: start
        });
        var rotate = ol.animation.rotate({
          duration: duration,
          rotation: 2 * Math.PI,
          start: start
        });
        map.beforeRender(pan, rotate);
        view.setCenter(rome);
      }, false);

      var flyToBern = document.getElementById('fly-to-bern');
      flyToBern.addEventListener('click', function() {
        var duration = 2000;
        var start = +new Date();
        var pan = ol.animation.pan({
          duration: duration,
          source: /** @type {ol.Coordinate} */ (view.getCenter()),
          start: start
        });
        var bounce = ol.animation.bounce({
          duration: duration,
          resolution: 4 * view.getResolution(),
          start: start
        });
        map.beforeRender(pan, bounce);
        view.setCenter(bern);
      }, false);

      var spiralToMadrid = document.getElementById('spiral-to-madrid');
      spiralToMadrid.addEventListener('click', function() {
        var duration = 2000;
        var start = +new Date();
        var pan = ol.animation.pan({
          duration: duration,
          source: /** @type {ol.Coordinate} */ (view.getCenter()),
          start: start
        });
        var bounce = ol.animation.bounce({
          duration: duration,
          resolution: 2 * view.getResolution(),
          start: start
        });
        var rotate = ol.animation.rotate({
          duration: duration,
          rotation: -4 * Math.PI,
          start: start
        });
        map.beforeRender(pan, bounce, rotate);
        view.setCenter(madrid);
      }, false);
    </script>
  </body>
</html>

 

posted @ 2022-06-17 11:16  devgis  阅读(339)  评论(0)  编辑  收藏  举报