OpenLayers3-2-View Animation

最新推荐文章于 2024-06-28 23:19:33 发布
最新推荐文章于 2024-06-28 23:19:33 发布
阅读量2.4k 收藏
点赞数 1
分类专栏： GIS openlayers

原文地址：http://openlayers.org/en/v3.12.1/examples/animation.html
This example shows how to use the beforeRender function on the Map to run one or more animations.

Related API documentation:
ol.Map,ol.View,ol.animation,ol.control,ol.layer.Tile,ol.proj,ol.source.OSM

map.beforeRender(var_args)
Add functions to be called before rendering. This can be used for attaching animations before updating the map’s view. The ol.animation namespace provides several static methods for creating prerender functions.

翻译：
这个例子主要演示了如何在map上使用beforeRender函数来展示动画效果

相关的api文档包括：
ol.Map,ol.View,ol.animation,ol.control,ol.layer.Tile,ol.proj,ol.source.OSM

map.beforeRender(var_args)
在渲染前调用这个函数。这个函数可以在更新map view之前制作动画效果。ol.animation命名空间提供了几个静态方法来创造渲染前的函数。

<!DOCTYPE html>
<html>
  <head>
    <title>View Animation</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.12.1/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,
          //顺时针2圈
          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({
          //锚点 rome
          anchor: rome,
          duration: 1000,
          rotation: currentRotation
        });
        map.beforeRender(rotateAroundRome);
        //使用view rotate方法来进行旋转 不是rotateAroundRome进行旋转了
        view.rotate(currentRotation + (Math.PI / 2), rome);
      }, false);

      //2秒平移到伦敦
      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();
        console.log(start);
        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>
isowang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端小记】--OpenLayers--2.地图进行移动并放大视野动画后定位到一个点
am_xiao_hui的博客
09-14 1533
在地图的图层中，有些需要和用户进行交互，比如现在有个需求：列表中是点位名称，点击列表的某一行后在地图上定位到所点击到点位，这个过程需要有一个缩放移动视野的动画。
OpenLayers源码解析2 View.js
qq_45005996的博客
08-21 653
View.js 父类 ol/Object-BaseObject 主要功能 展示地图的2D视图。 更改地图中心，分辨率，旋转角度。 视图的投影坐标系决定了显示的分辨率单位，默认的投影坐标系为球形墨卡托（EPSG：3857）。 视图状态 视图由三种状态决定：中心（center），分辨率（resolution），角度（rotation）。 每个状态都有对应的getter和setter。 center：getCenter和setCenter resolution：状态实际上并无zoom状态，都是通过resoluti
openlayers3---动画
weixin_30871293的博客
08-23 312
一、.在div中使用CSS3动画，以overlay的形式添加 1.先为一个div创建css [css] view plain copy print? .css_animation{ height:50px; width:50px; border-radius: 25px; background: rg...
三十五、openlayers官网示例Dynamic Data——在地图上加载动态数据形成动画效果
aaa_div的博客
06-03 428
绘制动画效果主要还是利用了postrender事件，其原理解析可以参考这篇。
vue3-openlayers 轨迹回放（历史轨迹）（ol-animation-path实现）
无心使然云中漫步
06-24 549
轨迹回放（历史轨迹），一般是一次性拿到所有坐标点，使用ol-animation-path可以直接实现
OpenLayers实例-Animated GIF-GIF动画
GISer小辉
03-03 1689
使用GIF动画作为图标进行可视化，官方推荐借助Gifler库实现。
OpenLayers案例-我的理解 01-24
mollerlala的博客
03-17 2193
目录 1. 可键盘操作的地图，Accessible Map 2.矢量平铺层，Advanced Mapbox Vector Tiles 3.视图定位，Advanced View Positioning 4.动态GIF，Animated GIF 5.ArcGIS服务获取Feature对象，ArcGIS REST Feature Service 6.ArcGIS显示512*512平铺，ArcGIS REST with 512x512 Tiles 7.版权归属，Attributions 8.波段对.
openlayers生成路线-具有动画效果
牧xin的博客
09-22 4632
效果 下面的地图图层屏蔽了,不能展示!所以仅有路线demo 核心代码 <template> <div> <div id="map" ref="rootmap"></div> <a-button id="searchPath" type="primary" style="z-index:3" @click="searchPath">{{title}}</a-button> </div>
OpenLayers3 学习-1
a5901768的博客
07-19 85
OpenLayers3 学习-1-简介 OpenLayers3（OL3）对OL2进行了重新设计和实现，支持多种格式的商业和免费的地图数据源。未来的版本将包括显示3D地图或利用WebGL进行大规模矢量数据的展示的功能。 OL3基于Google的 Closure Tools，大量应用了Closure Library中的内容。 OL3利用了Canvas, DOM和WebGL来实现数据渲染。因...
vue3-openlayers 图标闪烁、icon闪烁、marker闪烁
无心使然云中漫步
06-28 376
本篇介绍一下使用vue3-openlayers 图标闪烁、icon闪烁、marker闪烁。
openlayers3-切换WMSsupermap服务底图
09-04
本文将深入探讨如何在OpenLayers 3中实现对SuperMap WMS服务底图的切换。 首先，我们需要理解OpenLayers 3的基本结构。OpenLayers 3通过构建不同的层（Layers）来展示地图内容，其中WMS层用于加载通过WMS协议获取的...
openlayers3-test:openlayers3测试
05-20
2. **三维支持**：虽然OpenLayers 3 主要用于二维地图，但也有一定的三维地图支持，通过添加地形图层和调整视角来实现。 3. **高性能渲染**：OpenLayers 3 使用SVG和Canvas技术进行地图渲染，确保了在现代浏览器上的...
openLayers5-API中文版 含jir包
05-18
OpenLayers 是一个强大的开源JavaScript库，专为在Web上构建交互式地图应用而设计。它支持多种地图数据源，包括图块（tiles）、矢量数据和地理标记，使其成为地理信息系统（GIS）开发中的首选工具之一。这个...
openlayers3-test
02-23
OpenLayers 3 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式地图。这个"openlayers3-test"项目显然是一系列基于OpenLayers 3的实践示例，旨在展示其功能和用法，包括显示地图对象（点、线、面）、实时...
openlayers-editor:OpenLayers编辑器
05-24
Openlayers编辑器 OpenLayers编辑器（OLE）基于并提供了一组用于扩展空间数据编辑的控件。 欢迎捐款！ 随时添加更多控件并扩展当前功能。 此外，构建过程目前非常基本，可以进行优化。 翻译也很好。特征几何对齐的...
2024浙江省行政区划矢量图层-省市县乡镇四级行政区划数据下载-带python代码
最新发布
08-02
2024最新浙江省行政区划矢量图层数据，包含省、市、县、乡镇四级行政区划数据下载，附带shp转geojson的python代码
年度销售计划表.xlsx.xlsx
08-01
销售统计，调查问卷，库存明细，跟进表，业绩统计表，差异分析 ，产品清单 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
蓝牙BLE 4.0开发课程
08-01
蓝牙BLE 4.0课程
OpenLayers 3 入门教程：全新设计与核心组件详解
OpenLayers 3 是一个用于构建交互式网络地图的开源JavaScript库，它是在2015年对OpenLayers 2的现代化升级。相比于前一代，OL3采用更为先进和灵活的设计模式，尤其是在处理地图渲染、数据处理和用户交互方面有了显著...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值