一、实现效果页面包含一个按钮 地图 动画提示。点击开始动画后会执行以下流程1️⃣ 地图移动到指定位置2️⃣ 地图开始旋转3️⃣ 地图继续缩放移动4️⃣ 动画结束后出现 CSS 动画提示二、项目技术栈本文示例使用技术技术说明Vue3前端框架OpenLayersWebGIS 地图库Element PlusUI组件CSS3动画效果三、完整代码实现下面是Vue3 OpenLayers 完整示例代码。!-- * Author: 彭麒 * Date: 2026/3/17 * Email: 1062470959qq.com * Description: 此源码版权归吉檀迦俐所有可供学习和借鉴或商用。 -- template div classcontainer div classw-full flex justify-center flex-wrap div classfont-bold text-[24px] vue3 openlayers: 地图旋转移动动画、CSS缩放动画 /div /div h4 el-button typesuccess sizesmall clickgo开始动画/el-button /h4 div idvue-openlayers/div div classend v-ifisEnd 恭喜发财 /div /div /template script setup import { ref, onMounted } from vue import ol/ol.css import Map from ol/Map import View from ol/View import Tile from ol/layer/Tile import {createFastMapSource} from /utils/mapUtils; // 状态 const isEnd ref(false) let map null // 开始动画 const go () { isEnd.value false map.getView().animate( { zoom: 5, center: [116, 39], duration: 2000, }, { zoom: 6, center: [114, 39], duration: 3000, rotation: Math.PI, }, { zoom: 9, center: [115, 37], duration: 4000, rotation: 2 * Math.PI, }, () { isEnd.value true } ) } // 初始化地图 const initMap () { map new Map({ target: vue-openlayers, layers: [ new Tile({ source: createFastMapSource() }) ], view: new View({ projection: EPSG:4326, center: [114.064839, 22.548857], zoom: 4 }) }) } onMounted(() { initMap() }) /script style scoped .container { width: 840px; height: 590px; margin: 50px auto; border: 1px solid #42B983; position: relative; } #vue-openlayers { width: 800px; height: 420px; margin: 0 auto; border: 1px solid #42B983; position: relative; } .end { position: absolute; left: 320px; top: 240px; width: 200px; height: 100px; text-align: center; font-size: 28px; line-height: 100px; background-color: red; color: #fff; animation: myfirst 5s; } keyframes myfirst { from { background: red; transform: scale(2); } to { background: yellow; transform: scale(1); } } /style四、OpenLayers animate 方法详解OpenLayers 动画核心 APIview.animate()官方方法view.animate(options1, options2, ..., callback)参数说明参数作用center地图中心点zoom地图缩放级别rotation地图旋转角度duration动画持续时间easing动画缓动函数1 地图移动动画view.animate({ center: [116,39], duration:2000 })地图会平滑移动到指定位置。2 地图缩放动画view.animate({ zoom: 8, duration:2000 })地图会平滑缩放到指定级别。3 地图旋转动画view.animate({ rotation: Math.PI })说明Math.PI 180°2 * Math.PI 360°4 连续动画animate 支持多个动画串联执行。view.animate( {...}, {...}, {...} )执行顺序动画1 → 动画2 → 动画35 动画结束回调view.animate( {...}, {...}, (){console.log(动画结束)} )六、动画缓动函数OpenLayers 提供多种缓动函数import {easeIn,easeOut,inAndOut,linear} from ol/easing示例view.animate({ zoom:8, duration:2000, easing: easeOut })效果缓动说明easeIn逐渐加速easeOut逐渐减速linear匀速inAndOut先加速再减速七、实际项目应用场景在 WebGIS 项目中地图动画经常用于1 飞行定位view.animate({ center: point, zoom: 16 })2 自动巡航展示依次飞行多个点位。3 三维展示地图旋转展示区域。4 数据演示逐步展示不同区域的数据。八、总结本文介绍了Vue3 OpenLayers 实现地图动画的方法包括✔ 地图移动动画✔ 地图缩放动画✔ 地图旋转动画✔ animate API 使用方法✔ CSS 动画结合核心 APIview.animate()在 WebGIS 项目中合理使用动画可以显著提升用户体验地图交互性数据展示效果如果你正在做WebGIS / OpenLayers / Cesium 项目开发这些动画技巧是非常实用的能力。
190.Vue3 + OpenLayers 实战：实现地图旋转移动动画 + CSS缩放动画（详解 animate 用法）
一、实现效果页面包含一个按钮 地图 动画提示。点击开始动画后会执行以下流程1️⃣ 地图移动到指定位置2️⃣ 地图开始旋转3️⃣ 地图继续缩放移动4️⃣ 动画结束后出现 CSS 动画提示二、项目技术栈本文示例使用技术技术说明Vue3前端框架OpenLayersWebGIS 地图库Element PlusUI组件CSS3动画效果三、完整代码实现下面是Vue3 OpenLayers 完整示例代码。!-- * Author: 彭麒 * Date: 2026/3/17 * Email: 1062470959qq.com * Description: 此源码版权归吉檀迦俐所有可供学习和借鉴或商用。 -- template div classcontainer div classw-full flex justify-center flex-wrap div classfont-bold text-[24px] vue3 openlayers: 地图旋转移动动画、CSS缩放动画 /div /div h4 el-button typesuccess sizesmall clickgo开始动画/el-button /h4 div idvue-openlayers/div div classend v-ifisEnd 恭喜发财 /div /div /template script setup import { ref, onMounted } from vue import ol/ol.css import Map from ol/Map import View from ol/View import Tile from ol/layer/Tile import {createFastMapSource} from /utils/mapUtils; // 状态 const isEnd ref(false) let map null // 开始动画 const go () { isEnd.value false map.getView().animate( { zoom: 5, center: [116, 39], duration: 2000, }, { zoom: 6, center: [114, 39], duration: 3000, rotation: Math.PI, }, { zoom: 9, center: [115, 37], duration: 4000, rotation: 2 * Math.PI, }, () { isEnd.value true } ) } // 初始化地图 const initMap () { map new Map({ target: vue-openlayers, layers: [ new Tile({ source: createFastMapSource() }) ], view: new View({ projection: EPSG:4326, center: [114.064839, 22.548857], zoom: 4 }) }) } onMounted(() { initMap() }) /script style scoped .container { width: 840px; height: 590px; margin: 50px auto; border: 1px solid #42B983; position: relative; } #vue-openlayers { width: 800px; height: 420px; margin: 0 auto; border: 1px solid #42B983; position: relative; } .end { position: absolute; left: 320px; top: 240px; width: 200px; height: 100px; text-align: center; font-size: 28px; line-height: 100px; background-color: red; color: #fff; animation: myfirst 5s; } keyframes myfirst { from { background: red; transform: scale(2); } to { background: yellow; transform: scale(1); } } /style四、OpenLayers animate 方法详解OpenLayers 动画核心 APIview.animate()官方方法view.animate(options1, options2, ..., callback)参数说明参数作用center地图中心点zoom地图缩放级别rotation地图旋转角度duration动画持续时间easing动画缓动函数1 地图移动动画view.animate({ center: [116,39], duration:2000 })地图会平滑移动到指定位置。2 地图缩放动画view.animate({ zoom: 8, duration:2000 })地图会平滑缩放到指定级别。3 地图旋转动画view.animate({ rotation: Math.PI })说明Math.PI 180°2 * Math.PI 360°4 连续动画animate 支持多个动画串联执行。view.animate( {...}, {...}, {...} )执行顺序动画1 → 动画2 → 动画35 动画结束回调view.animate( {...}, {...}, (){console.log(动画结束)} )六、动画缓动函数OpenLayers 提供多种缓动函数import {easeIn,easeOut,inAndOut,linear} from ol/easing示例view.animate({ zoom:8, duration:2000, easing: easeOut })效果缓动说明easeIn逐渐加速easeOut逐渐减速linear匀速inAndOut先加速再减速七、实际项目应用场景在 WebGIS 项目中地图动画经常用于1 飞行定位view.animate({ center: point, zoom: 16 })2 自动巡航展示依次飞行多个点位。3 三维展示地图旋转展示区域。4 数据演示逐步展示不同区域的数据。八、总结本文介绍了Vue3 OpenLayers 实现地图动画的方法包括✔ 地图移动动画✔ 地图缩放动画✔ 地图旋转动画✔ animate API 使用方法✔ CSS 动画结合核心 APIview.animate()在 WebGIS 项目中合理使用动画可以显著提升用户体验地图交互性数据展示效果如果你正在做WebGIS / OpenLayers / Cesium 项目开发这些动画技巧是非常实用的能力。
