高德地图 js API Loca 3D动画的使用说明
高德地图 js API Loca 3D动画的使用说明
我们在使用 Loca 制作地图动画时,里面有几个对应的动画效果,有
center
: 平移pitch
: 视角zoom
: 缩放rotation
: 旋转
来看一下代码对应的不同动画效果,就很明确的知道动画是怎样制作的了
具体的例子可以查看这里:
https://kylebing.cn/tools/map/
我已经将 Loca 和 路线规划、范围标记的几个页面放在了这个开源项目中,使用的时候填入自己申请的高德开发 app id:
https://github.com/KyleBing/demo-map-loca
Loca 的官方说明
https://lbs.amap.com/api/loca-v2/intro
参数中的 Timing 是什么
这里先重点说一下 timing 的数值是什么意思,我也是研究了半天才搞明白,之前一直不知道是什么意思
timing 表示的是 贝塞尔曲线的两个控制点的坐标,有了这两个点,就能知道曲线的形状了。
其实是四个数值要分成两部分查看,第一部分是前两个数,是第一个点在 1x1 的坐标中的坐标,第二部分是后两个数,是第二个控制点的坐标。打开下面的网址试一下就知道了。
参考网址: https://cubic-bezier.com/
center
center: {value: POSITION.cityCenter, // 动画终点的经纬度control: [POSITION.hanyu, POSITION.cityCenter], // 过渡中的轨迹控制点,地图上的经纬度timing: [0.42, 0, 0.4, 1], // 动画时间控制点duration: 2000, // 过渡时间,毫秒(ms)
}
pitch
// 俯仰角动画
pitch: {value: 45, // 动画终点的俯仰角度control: [[0.3, 20], [0.4, 40]], // 控制器,x是0~1的起始区间,y是pitch值timing: [0, 0, 1, 1], // 这个值是线性过渡duration: 5000,
}
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,
}
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,
}
组合起来就是
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动画的使用说明相关推荐
- Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用 连接线图层.脉冲连线图层 阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式 已经了解如何载入 Loca 插件 如果不了解,可以查看我之 ...
- 在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作 注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者 登陆之后,在进入「应用管理」 页面「创建新应用 ...
- 高德地图JS API之海量点标记十万以内的点
高德地图JS API之海量点标记十万以内的点 怎么引入高度地图就不写了,官方是这样说的:当需要在地图展示数量为十万以内的点并且需要较好的性能表现时,可以使用 AMap.MassMarks 类.AMap ...
- cordova下使用高德地图js api在4g流量下定位失败问题的解决
问题描述 cordova页面中使用高德地图js api AMap.Geolocation的geolocation.getCurrentPosition()方法进行定位 用手机4g打开该页面,定位失败, ...
- 高德地图JS API 使用01
最近做项目,有个需求使用到高德地图JS API,现写博客总结一下. 需求要求大概是这样的: 使用地图高德或百度或谷歌都可以(这里吐槽一下,百度地图的jsAPI帮助文档写的太...谷歌你懂的...高德目 ...
- vue 给圆遮盖物添加文字 高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店 由 学院君 创建于2年前, 最后更新于 2年前 版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
- 高德地图js API实现鼠标悬浮于点标记时弹出信息窗体显示详情,点击点标记放大地图操作
高德地图js API实现:鼠标悬浮于点标记时,弹出信息窗体显示详情,点击点标记时放大地图 <!doctype html> <html> <head><meta ...
- js 调用android定位,基于html5+ 高德地图JS API使用安卓定位sdk用来进行定位
使用Native.js打开Android的H5辅助定位 mui.plusReady(function() { if(plus.os.name == 'Android') { var AMapLocat ...
- 高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...
最新文章
- LeetCode简单题之检查两个字符串数组是否相等
- 【RS】如何从USGS上下载LANDSAT数据
- 使用 UpdatePanel 【转by Dorian Deng】
- C#里partial关键字的作用
- [leetcode] 68.二叉树的最近公共祖先
- java利用模板发送邮件_使用JavaMail实现发送模板邮件以及保存到发件箱
- 高效、稳定开发功能的一些心得
- java打印空心金字塔
- [2178]链表的有序集合 (链表的插排法+重复元素的删除) SDUT
- 海康sdk java示例_调用海康SDK
- Git学习笔记--廖雪峰官网教程
- 基于Android studio开发的图灵智能聊天机器人
- linux 查看opengl版本,如何使用optirun检查Linux系统上支持哪个版本的OpenGL?
- html5新浪微博代码,JS实现的新浪微博大厅文字内容滚动效果代码
- 计算机模拟光照,建筑太阳光照实时模拟软件
- Lenovo R7000 win11无线网卡无法连接5Gwifi
- 概率统计基础(一): 随机变量与随机事件
- SPSS(十九)SPSS之时间序列模型(图文+数据集)
- WebRTC 拥塞控制 | Trendline 滤波器
- java 接口重写_java如何实现接口中的重写