From 167a177064033a4ffcb157b930291e213d2a6e4e Mon Sep 17 00:00:00 2001
From: yonghongyue <2572468699@qq.com>
Date: Sat, 1 Oct 2022 01:20:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=BD=A8=E8=BF=B9?=
=?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
docs/zh/hooks/useTrackAnimation.md | 177 ++++++++++++++++++++++++++++
packages/hooks/useTrackAnimation.ts | 71 ++++++++---
2 files changed, 234 insertions(+), 14 deletions(-)
create mode 100644 docs/zh/hooks/useTrackAnimation.md
diff --git a/docs/zh/hooks/useTrackAnimation.md b/docs/zh/hooks/useTrackAnimation.md
new file mode 100644
index 00000000..b051034e
--- /dev/null
+++ b/docs/zh/hooks/useTrackAnimation.md
@@ -0,0 +1,177 @@
+# useTrackAnimation
+
+通过该 hooks 可实现轨迹动画, 在轨迹动态播放的同时，视角跟随移动.
+
+::: warning 注意
+1. 使用该hooks前，请确保`TrackAnimation`插件正确的注册了。
+2. 由于在渲染动画时，数据资源是随着当前方位和坐标的改变而实时加载的，刚开始播放动画时画面可能会卡顿，属于正常现象。
+3. 为了减少加载数据资源的性能损耗，在播放动画时隐藏了地图上的POI点。
+:::
+## 代码示例
+
+
+
+
+
+
+
+
+
+::: details 点击查看代码
+```html
+
+
+
+
+
+
+
+```
+:::
+## 类型定义
+
+```ts
+import { Component, Ref } from 'vue';
+export declare type PathPoint = {
+ lng: number;
+ lat: number;
+};
+export declare type UseTrackAnimationOptions = {
+ /**
+ * 动画持续时常，单位ms
+ * @default 10000
+ */
+ duration?: number;
+ /**
+ * 动画开始延迟
+ * @default 0
+ */
+ delay?: number;
+ /**
+ * 是否在动画结束后总览视图缩放（调整地图到能看到整个轨迹的视野），默认开启
+ * @default true
+ */
+ overallView?: boolean;
+ /**
+ * 设置动画中的地图倾斜角度，默认55度
+ * @default 55
+ */
+ tilt?: number;
+ /**
+ * 设置动画中的缩放级别，默认会根据轨迹情况调整到一个合适的级别
+ * @default auto
+ */
+ zoom?: number;
+};
+/**
+ * 轨迹动画
+ * @param {any} map 地图组件实例引用
+ * @param {UseTrackAnimationOptions} options 轨迹动画配置
+ * @returns { setPath, start, stop}
+ */
+export declare function useTrackAnimation(map: any, options: UseTrackAnimationOptions): {
+ /**
+ * 设置路径动画路径
+ */
+ setPath: (path: PathPoint[]) => void;
+ /**
+ * 开始动画
+ */
+ start: () => void;
+ /**
+ * 停止动画, 停止后再次开始,会重新播放
+ */
+ stop: () => void;
+};
+```
diff --git a/packages/hooks/useTrackAnimation.ts b/packages/hooks/useTrackAnimation.ts
index 7d097ed7..a0b9cbe3 100644
--- a/packages/hooks/useTrackAnimation.ts
+++ b/packages/hooks/useTrackAnimation.ts
@@ -1,41 +1,84 @@
-import { Ref } from 'vue'
+import { Component, Ref, watch } from 'vue'
+import Map from '../components/bm-map/index.vue'
-type PathPoint = {
+type MapComponent = typeof Map
+export type PathPoint = {
lng: number
lat: number
}
-type UseTrackAnimationOptions = {
+export type UseTrackAnimationOptions = {
/**
- * animation duration time
+ * 动画持续时常，单位ms
+ * @default 10000
*/
- duration: number
+ duration?: number
/**
- * animation delay time
+ * 动画开始延迟
+ * @default 0
*/
- delay: number
+ delay?: number
/**
+ * 是否在动画结束后总览视图缩放（调整地图到能看到整个轨迹的视野），默认开启
* @default true
*/
overallView?: boolean
/**
+ * 设置动画中的地图倾斜角度，默认55度
* @default 55
*/
tilt?: number
/**
+ * 设置动画中的缩放级别，默认会根据轨迹情况调整到一个合适的级别
* @default auto
*/
zoom?: number
}
-
-function useTrackAnimation(options: UseTrackAnimationOptions) {
- const setPath = (path: PathPoint[]) => {}
- const start = () => {
-
- }
- const stop = () => []
+/**
+ * 轨迹动画
+ * @param {any} map 地图组件实例引用
+ * @param {UseTrackAnimationOptions} options 轨迹动画配置
+ * @returns { setPath, start, stop}
+ */
+export function useTrackAnimation(map: any, options: UseTrackAnimationOptions) {
+ let instance: BMapGLLib.TrackAnimation
+ let pl: BMapGL.Polyline
+ let mapComponentInstance: any
+ let mapInstance: BMapGL.Map
+ watch(
+ () => map.value,
+ (n) => {
+ mapComponentInstance = n
+ }
+ )
+ const init = () => {
+ if (!instance) {
+ mapInstance = mapComponentInstance.getMapInstance()
+ instance = new BMapGLLib.TrackAnimation(mapInstance, pl, options)
+ }
+ }
+ const setPath = (path: PathPoint[]) => {
+ let point = path.map((pathItem) => new BMapGL.Point(pathItem.lng, pathItem.lat))
+ pl = new BMapGL.Polyline(point)
+ init()
+ }
+ const start = () => {
+ if (instance) instance.start()
+ }
+ const stop = () => {
+ if (instance) instance.cancel()
+ }
return {
+ /**
+ * 设置路径动画路径
+ */
setPath,
+ /**
+ * 开始动画
+ */
start,
+ /**
+ * 停止动画, 停止后再次开始,会重新播放
+ */
stop
}
}