OpenLayers学习笔记高级篇（三、地图动画）

最新推荐文章于 2025-10-14 07:26:22 发布

原创

最新推荐文章于 2025-10-14 07:26:22 发布 · 2.4k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍了OpenLayers 3中地图动画的应用，通过实例展示了有无动画效果的地图平移对比，并详细讲解如何利用postcompose事件创建动画效果，如特征闪动。建议读者尝试API中的其他动画功能，并预告了下节将涉及Geoserver发布服务和地图操作。

在OpenLayers 3中，动画是随处可见的，比如平移地图时，地图移动会有惯性，停止移动后，还会继续沿着之前的方向移动一会。比如下面这个demo地图具有回到原始点的功能，一个是有动画效果的，一个是没有动画效果的。我们先写出来然后做一个直接的视觉对比：

1、地图有无动画的对比：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>地图动画</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
   
</head>

<body>
    <div id="map" style="width: 100%"></div>
	<!--增加两个按钮，一个演示不带动画，一个演示带动画-->
	<input type="button" value="回到原点-不带动画" onclick="backNoAnim()">
	<input type="butto