高德自定义镜头动画

主要在定义贝塞尔动画来控制质感，好用的贝塞尔定义网站CSS3贝塞尔曲线工具 - bejson在线工具

效果视频：

QQ2024716-164137-HD

高德地图中需要引用高德的loca插件

代码

const rot = (center, zoom) => {
	const curZoom = map.getZoom();
	const curPitch = map.getPitch();
	const curRotation = map.getRotation();
	const curCenter = [map.getCenter().lng, map.getCenter().lat];

	const targZoom = zoom;
	const targPitch = 40;
	const targRotation = 0;
	const targCenter = center;

	const route = [
		{
			pitch: {
				value: targPitch,
				duration: 9000,
				control: [
					[0, curPitch],
					[1, targPitch],
				],
				timing: [1.0, 0.01, 0.56, 0.995],
			},
			zoom: {
				value: targZoom,
				duration: 10000,
				control: [
					[0, curZoom],
					[1, targZoom],
				],
				timing: [0.52, 0.0, 0.29, 0.99],
			},
			rotation: {
				value: targRotation,
				duration: 7000,
				control: [
					[0, curRotation],
					[1, targRotation],
				],
				timing: [0.55, 0.005, 0.565, 1],
			},
			center: {
				value: targCenter,
				duration: 6000,
				control: [curCenter, targCenter],
				timing: [0.8, 0.85, 0.9, 0.95, 1],
			},
		},
	];

	loca.viewControl.addAnimates(route, () => {
		console.log("初始动画结束，开始调用");
		// 开始自动旋转动画
		// startAutoRotate();
	});
};