• openlayersol3各种旋转特效


    <!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>
  • 相关阅读:
    SVN自动更新测试服务器工作副本(C#写winform程序实现)
    两台服务器上SQL Server数据库数据互操作示例
    ASP.NET根据URL生成网页缩略图示例程序(C#语言)
    Flutter Widget API
    BPM、BPMN、BPMN2.0概念介绍
    H5多图上传调研
    lIUNX如何加载U盘,光盘
    如何解决exchange2003被中继的问题?(网上转载)
    window无法安装服务
    如何在WORD里面插入不同的页眉和页脚
  • 原文地址:https://www.cnblogs.com/devgis/p/16385071.html
Copyright © 2020-2023  润新知