203：vue+openlayers 地图旋转移动动画、CSS缩放动画，介绍animate的使用方法

还是大剑师兰特

已于 2024-05-09 15:03:19 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： # openlayers综合教程300+ 文章标签： openlayers动画 openlayers旋转大剑师 openlayers教程 openlayers自学

于 2023-01-15 13:10:45 首次发布

本文链接：https://blog.csdn.net/cuclife/article/details/128693679

openlayers综合教程300+ 专栏收录该内容

304 篇文章 ¥259.90 ¥399.90

订阅专栏

该博客由高级前端工程师大剑师兰特撰写，介绍了如何在Vue和OpenLayers项目中创建地图旋转移动动画及CSS缩放动画。通过示例代码展示了OpenLayers的view.animate方法和CSS的keyframes、animation、transform的结合使用，提供了一个快速运行的示例，同时推荐了相关资源进行深入学习。

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 203个示例

文章目录

一、示例效果图

二、示例简介

本示例的目的是介绍如何在vue+openlayers项目中创建动画，地图上使用的是view中的animate方法， CSS中使用的是keyframes ，animation，transform等方法。这两将两者融合在一个示例中，api用的不全，但是能起到一个抛转引玉的作用。

地图 view.animate 中的属性值介绍

名称	说明
center	动画结束时视图的中心点坐标，如[116 , 23]。
zoom	动画结束时视图的缩放级别。这优先于分辨率
resolution	动画结束时视图的分辨率。如果还提供缩放( zoom )，则此选项将被忽略。