Openlayers中的动画

概述

本文主要介绍 Openlayers 中的动画以及ol/easing模块。

map和view 基础知识

Openlayers 中动画的对象不是地图map，而是view.在讲解动画知识前，我们需要弄清楚map和view的作用、区别以及它们之间的联系。

map

map负责将地图元素组合到一起并渲染到屏幕上，由它管理所有的地图图层、控件、交互等，并且渲染这些内容。它是应用程序中所有地图相关功能的容器，负责管理用户与地图的交互。

主要功能：

• 图层管理：管理地图上的所有图层（如矢量图层、瓦片图层等）。
• 交互管理：提供各种交互功能，如拖拽、缩放、点击等。
• 控件管理：控制地图的界面控件，例如缩放控件、比例尺、导航控件等。
• 渲染地图：负责将地图和图层渲染到 HTML 页面中。
• 视图控制：与 View 对接，使用 View 来控制地图的中心、缩放、旋转等。

view

而view则是地图视图控制器，它主要负责设置地图的视图状态（如中心点、缩放级别、旋转角度等），以及控制地图的动画效果。View 本质上定义了地图的 “观察角度” 或者 “显示区域”，它不直接处理地图图层、交互等内容，而是专注于如何展示这些图层。

主要功能：

• 控制地图中心点：决定地图的显示位置。
• 控制缩放级别：决定地图的缩放级别。
• 控制旋转角度：控制地图的旋转。
• 控制视口范围：设置地图显示的可视区域（例如，限制可缩放的最小和最大级别）。
• 动画效果：可以添加平移、缩放、旋转等动画效果。

view 和 map 的联系与区别

区别：

• 职责不同：

  • view 主要负责地图的视图属性，如中心点、缩放级别、旋转等，它控制地图的 “展示状态”。
  • map 主要负责地图的整体管理，包含图层、控件、交互等，并负责地图的渲染。

• 层次不同：

  • view 直接影响地图的显示方式，但它不直接管理地图的内容和交互。
  • map 则是一个更高层次的容器，它包含了 view