高德地图 js API Loca 3D动画的使用说明

我们在使用 Loca 制作地图动画时,里面有几个对应的动画效果,有

  • ​center​​: 平移
  • ​pitch​​: 视角
  • ​zoom​​: 缩放
  • ​rotation​​: 旋转

来看一下代码对应的不同动画效果,就很明确的知道动画是怎样制作的了

具体的例子可以查看这里:

​https://kylebing.cn/tools/map/​

Loca 的官方说明

​https://lbs.amap.com/api/loca-v2/intro​

center

center: {
value: POSITION.cityCenter, // 动画终点的经纬度
control: [POSITION.hanyu, POSITION.cityCenter], // 过渡中的轨迹控制点,地图上的经纬度
timing: [0.42, 0, 0.4, 1], // 动画时间控制点
duration: 2000, // 过渡时间,毫秒(ms)
}

高德地图 js API Loca 3D动画的使用说明_缩放

pitch

// 俯仰角动画
pitch: {
value: 45, // 动画终点的俯仰角度
control: [[0.3, 20], [0.4, 40]], // 控制器,x是0~1的起始区间,y是pitch值
timing: [0, 0, 1, 1], // 这个值是线性过渡
duration: 5000,
}

高德地图 js API Loca 3D动画的使用说明_API_02

zoom

// 缩放等级动画
zoom: {
value: 17, // 动画终点的地图缩放等级
control: [[0.4, 18], [0.6, 17]], // 控制器,x是0~1的起始区间,y是zoom值
timing: [0.42, 0, 0.4, 1],
duration: 5000,
}

高德地图 js API Loca 3D动画的使用说明_缩放_03

rotation

// 旋转动画
rotation: {
value: 120, // 动画终点的地图旋转角度
control: [[0.4, 30], [0.6, 120]], // 控制器,x是0~1的起始区间,y是rotation值
timing: [0.42, 0, 0.4, 1],
duration: 10000,
}

高德地图 js API Loca 3D动画的使用说明_高德_04

组合起来就是

this.loca.viewControl.addAnimates([{
center: {
value: POSITION.cityCenter, // 动画终点的经纬度
control: [POSITION.hanyu, POSITION.cityCenter], // 过渡中的轨迹控制点,地图上的经纬度
timing: [0.42, 0, 0.4, 1], // 动画时间控制点
duration: 2000, // 过渡时间,毫秒(ms)
},
// 俯仰角动画
pitch: {
value: 45, // 动画终点的俯仰角度
control: [[0.3, 20], [0.4, 40]], // 控制器,x是0~1的起始区间,y是pitch值
timing: [0, 0, 1, 1], // 这个值是线性过渡
duration: 5000,
},
// 缩放等级动画
zoom: {
value: 17, // 动画终点的地图缩放等级
control: [[0.4, 18], [0.6, 17]], // 控制器,x是0~1的起始区间,y是zoom值
timing: [0.42, 0, 0.4, 1],
duration: 5000,
},
// 旋转动画
rotation: {
value: 120, // 动画终点的地图旋转角度
control: [[0.4, 30], [0.6, 120]], // 控制器,x是0~1的起始区间,y是rotation值
timing: [0.42, 0, 0.4, 1],
duration: 10000,
}
}],()=>{})

高德地图 js API Loca 3D动画的使用说明_缩放_05