WebGis014-动画效果控件

最新推荐文章于 2024-04-26 00:00:00 发布

_NorthernFish

最新推荐文章于 2024-04-26 00:00:00 发布

阅读量236

点赞数

文章标签： gis

本文链接：https://blog.csdn.net/weixin_40625332/article/details/118224184

版权

WebGis 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

WebGis014-动画效果控件

在ol5中，动画效果由ol.View.animate()方法提供。在调用这个方法时，可以通过传递一个或者多个对象参数来实现多种动画效果。可实现；旋转、弹性移动、反弹，结合相关API可做出带有动画的定位效果。

在mapControls文件夹下创建mapAnimation.html文件
创建map对象添加控制按钮组，给按钮分别绑定事件，在事件中调用view对象的animate方法设置动画各个阶段效果，实现的时候其实有个平滑移动的效果就可以了。

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/ol.css" />
		<script src="../../js/ol.js" type="text/javascript" charset="utf-8"></script>

		<style type="text/css">
			* {
				box-sizing: border-box;
			}

			body {
				margin: 0px;
				padding: 0px;
				height: 100vh;
			}

			#map {
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="btn_group">
			<button id="ly">雒陽</button>
			<button id="ny">南陽</button>
			<button id="xy">襄陽</button>
			<button id="xa">西安</button>
			<button id="nj">南京</button>
		</div>
		<div id="map">
		</div>

		<script type="text/javascript">
			console.log(ol.easing);

			var view = new ol.View({
				center: ol.proj.fromLonLat([112.388, 34.655]),
				zoom: 10
			})

			// 创建天地图影像图层
			var img_w = new ol.layer.Tile({
				name: "天地图卫星影像",
				source: new ol.source.XYZ({
					url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=9b0042eb1f01265c357f96da559ae11c"
				})
			})

			var cia_w = new ol.layer.Tile({
				name: "天地图影像注记",
				source: new ol.source.XYZ({
					url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=9b0042eb1f01265c357f96da559ae11c"
				})
			});

			// 创建地图对象
			var map = new ol.Map({
				target: "map",
				layers: [],
				view: view
			});

			// 把图层和地图绑定
			map.addLayer(img_w)
			map.addLayer(cia_w)


			// 定位个城市位置
			var ly = ol.proj.fromLonLat([112.388, 34.655])
			var ny = ol.proj.fromLonLat([112.511, 32.955])
			var xy = ol.proj.fromLonLat([112.2118, 31.955])
			var xa = ol.proj.fromLonLat([108.955, 34.155])
			var nj = ol.proj.fromLonLat([119.188, 32.000])


			/* 		// 获取反弹值
					function bounce(t){
						var s = 7.5652,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-=(0.625/p);
							l=s*t*t+0.984375
						}
						
						return l;
					}
				
				
					// 获取弹性伸缩值
					function elastic(t){
						return Math.pow(2,-10*t)*Math.sin((t-0.072)*(2*Math,PI)/3)+1;
					} */



			// 旋转定位
			document.querySelector("#ny").onclick = () => {
				var center = view.getCenter();
				view.animate(
					// 第一个过程
					{
						center: [
							center[0] + (ny[0] - center[0]) / 2,
							center[1] + (ny[1] - center[1]) / 2
						],
						rotation: Math.PI * 1,
						duration: 100,
						easing: ol.easing.easeIn
					},
					// 第二个过程
					{
						center: ny,
						rotation: Math.PI * 2,
						duration: 100,
						easing: ol.easing.easeOut
					}
				)
			}


			// 先快后慢
			document.querySelector("#xy").onclick = () => {
				var center = view.getCenter();
				view.animate(
					// 只有一个过程
					{
						center: xy,
						duration: 200,
						easing: ol.easing.easeOut
					}
				)
			}

			// 线性动画
			document.querySelector("#xa").onclick = () => {
				var center = view.getCenter();
				view.animate(
					// 只有一个过程
					{
						center: xa,
						duration: 200,
						easing: ol.easing.linear
					}
				)
			}

			// 慢入慢出中间快
			document.querySelector("#nj").onclick = () => {
				var center = view.getCenter();
				view.animate(
					// 只有一个过程
					{
						center: nj,
						duration: 200,
						easing: ol.easing.inAndOut
					}
				)
			}

			// 慢入慢出中间快
			document.querySelector("#ly").onclick = () => {
				var center = view.getCenter();
				view.animate(
					// 只有一个过程
					{
						center: ly,
						duration: 200,
						easing: ol.easing.inAndOut
					}
				)
			}
		</script>
	</body>
</html>