feat: refactor useTrackAnimation hooks

yue1123 · Oct 21, 2022 · 09951d9 · 09951d9
1 parent 4aa49db
commit 09951d9
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 127 deletions.
diff --git a/docs/zh/control/custom.md b/docs/zh/control/custom.md
@@ -1,11 +1,13 @@
 # Control 自定义控件
-根据地图 `Map` 组件提供的Props，或者地图实例，自定义控件
+
+根据地图 `Map` 组件提供的 Props，或者地图实例，自定义控件
 
 ```ts
 import { Control } from 'vue3-baidu-map-gl'
 ```
 
 ## 组件示例
+
 <div>
 <Map
   @initd="handleInitd"
@@ -47,26 +49,22 @@ button{
 </style>
 
 ::: details 点击查看代码
+
 ```html
 <div>
-  <Map
-    @initd="handleInitd"
-    :minZoom="3"
-    :zoom="zoom"
-    height="400px"
-  >
+  <map @initd="handleInitd" :minZoom="3" :zoom="zoom" height="400px">
     <Control style="display: flex; background-color: #fff; padding: 10px" :offset="{ x: 0, y: 0 }">
       <button @click="handleZoomOut">缩小</button>
       <button @click="handleZoomIn">放大</button>
     </Control>
-  </Map>
+  </map>
 </div>
 
 <script setup lang="ts">
   import { ref } from 'vue'
   const zoom = ref(10)
   let _map = null
-  function handleInitd(map){
+  function handleInitd(map) {
     _map = map
   }
   function handleZoomOut() {
@@ -78,30 +76,31 @@ button{
 </script>
 
 <style scoped>
-button{
-  outline:none;
-  border:none;
-  background:#41b883;
-  margin:0 5px;
-  padding: 5px 15px;
-  border-radius: 4px !important;
-}
+  button {
+    outline: none;
+    border: none;
+    background: #41b883;
+    margin: 0 5px;
+    padding: 5px 15px;
+    border-radius: 4px !important;
+  }
 </style>
 ```
+
 :::
 
 ## 静态组件 Props
+
 | 参数   | 说明           | 类型                      | 可选值            | 默认值                    |
 | ------ | -------------- | ------------------------- | ----------------- | ------------------------- |
 | anchor | 控件的停靠位置 | `string`                  | [anchor](#anchor) | `BMAP_ANCHOR_BOTTOM_LEFT` |
 | offset | 控件的偏移值   | `{x: number, y: number }` |                   | `{ x: 83, y: 18 }`        |
 
-
 ## anchor
+
 | 值                       | 说明 |
 | ------------------------ | ---- |
 | BMAP_ANCHOR_TOP_LEFT     | 左上 |
 | BMAP_ANCHOR_TOP_RIGHT    | 右上 |
 | BMAP_ANCHOR_BOTTOM_LEFT  | 左下 |
 | BMAP_ANCHOR_BOTTOM_RIGHT | 右下 |
-
diff --git a/docs/zh/hooks/useTrackAnimation.md b/docs/zh/hooks/useTrackAnimation.md
@@ -3,10 +3,12 @@
 通过该 hooks 可实现轨迹动画, 在轨迹动态播放的同时，视角跟随移动.
 
 ::: warning 注意
-1. 使用该hooks前，请确保`TrackAnimation`插件正确的 [注册](../guide/#插件注册) 了。
+
+1. 使用该 hooks 前，请确保`TrackAnimation`插件正确的 [注册](../guide/#插件注册) 了。
 2. 由于在渲染动画时，数据资源是随着当前方位和坐标的改变而实时加载的，刚开始播放动画时画面可能会卡顿，属于正常现象。
-3. 为了减少加载数据资源的性能损耗，在播放动画时隐藏了地图上的POI点。
-:::
+3. 为了减少加载数据资源的性能损耗，在播放动画时隐藏了地图上的 POI 点。
+   :::
+
 ## 代码示例
 
 <div>
@@ -20,8 +22,8 @@
     @pluginReady="handleInitd"
   />
   <div class="state">
-    <span>动画状态: {{ isRunning  ? '已开始' : '未开始' }}</span>
-    <span>播放状态: {{ !isRunning || isStopping  ? '未播放' : '播放中' }}</span>
+    <span>动画状态: {{ status !== 'INITIAL' ? '已开始' : '未开始' }}</span>
+    <span>播放状态: {{ status === 'INITIAL' ||  status === 'STOPPING'  ? '未播放' : '播放中' }}</span>
   </div>
   <button class="myButton no-m-b" type="button" @click="start">开始</button>
   <button class="myButton no-m-b" type="button" @click="stop">暂停</button>
@@ -39,10 +41,9 @@
     cancel,
     stop,
     proceed,
-    isRunning,
-    isStopping
+    status
   } = useTrackAnimation(map, {
-    duration:10000,
+    duration:1000,
     delay:0
   })
   const path = [{
@@ -83,20 +84,21 @@
 </style>
 
 ::: details 点击查看代码
+
 ```html
 <div>
-  <Map 
+  <map
     :center="{
       lng: 116.308301,
       lat: 40.050566
     }"
-    :zoom='16'
-    ref="map" 
+    :zoom="16"
+    ref="map"
     @pluginReady="handleInitd"
   />
   <div class="state">
-    <span>动画状态: {{isRunning  ? '已开始' : '未开始' }}</span>
-    <span>播放状态: {{ !isRunning || isStopping  ? '未播放' : '播放中' }}</span>
+    <span>动画状态: {{ status !== 'INITIAL' ? '已开始' : '未开始' }}</span>
+    <span>播放状态: {{ status === 'INITIAL' || status === 'STOPPING' ? '未播放' : '播放中' }}</span>
   </div>
   <button class="myButton no-m-b" type="button" @click="start">开始</button>
   <button class="myButton no-m-b" type="button" @click="stop">暂停</button>
@@ -108,124 +110,126 @@
   import { ref } from 'vue'
   import { useTrackAnimation } from 'vue3-baidu-map-gl'
   const map = ref(null)
-  const { 
-    setPath,
-    start,
-    cancel,
-    stop,
-    proceed,
-    isRunning,
-    isStopping
-  } = useTrackAnimation(map, {
+  const { setPath, start, cancel, stop, proceed, status } = useTrackAnimation(map, {
     duration: 10000,
     delay: 0
   })
-  const path = [{
-        'lng': 116.297611,
-        'lat': 40.047363
-    }, {
-        'lng': 116.302839,
-        'lat': 40.048219
-    }, {
-        'lng': 116.308301,
-        'lat': 40.050566
-    }, {
-        'lng': 116.305732,
-        'lat': 40.054957
-    }, {
-        'lng': 116.304754,
-        'lat': 40.057953
-    }, {
-        'lng': 116.306487,
-        'lat': 40.058312
-    }, {
-        'lng': 116.307223,
-        'lat': 40.056379
-    }];
-  function handleInitd(map){
+  const path = [
+    {
+      lng: 116.297611,
+      lat: 40.047363
+    },
+    {
+      lng: 116.302839,
+      lat: 40.048219
+    },
+    {
+      lng: 116.308301,
+      lat: 40.050566
+    },
+    {
+      lng: 116.305732,
+      lat: 40.054957
+    },
+    {
+      lng: 116.304754,
+      lat: 40.057953
+    },
+    {
+      lng: 116.306487,
+      lat: 40.058312
+    },
+    {
+      lng: 116.307223,
+      lat: 40.056379
+    }
+  ]
+  function handleInitd(map) {
     setPath(path)
   }
 </script>
 
 <style>
-  .state{
+  .state {
     margin-top: 15px;
   }
-  .state span{
+  .state span {
     margin-right: 25px;
   }
 </style>
 ```
+
 :::
+
 ## 类型定义
 
 ```ts
-import { Component, Ref } from 'vue';
+import { Ref } from 'vue'
 export declare type PathPoint = {
-  lng: number;
-  lat: number;
-};
+  lng: number
+  lat: number
+}
 export declare type UseTrackAnimationOptions = {
   /**
    * 动画持续时常，单位ms
    * @default 10000
    */
-  duration?: number;
+  duration?: number
   /**
    * 动画开始延迟
    * @default 0
    */
-  delay?: number;
+  delay?: number
   /**
    * 是否在动画结束后总览视图缩放（调整地图到能看到整个轨迹的视野），默认开启
    * @default true
    */
-  overallView?: boolean;
+  overallView?: boolean
   /**
    * 设置动画中的地图倾斜角度，默认55度
    * @default 55
    */
-  tilt?: number;
+  tilt?: number
   /**
    * 设置动画中的缩放级别，默认会根据轨迹情况调整到一个合适的级别
    * @default auto
    */
-  zoom?: number;
-};
+  zoom?: number
+}
+declare type AnimationStatus = 'PLAYING' | 'STOPPING' | 'INITIAL'
 /**
  * 轨迹动画
  * @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;
-    /**
-     * 取消动画
-     */
-    cancel: () => void;
-    /**
-     * 继续播放动画
-     */
-    proceed: () => void;
-    /**
-     * 是否处于动画播放进度中
-     */
-    isRunning: Ref<boolean>;
-    /**
-     * 是否暂停了播放
-     */
-    isStopping: Ref<boolean>;
-};
+export declare function useTrackAnimation(
+  map: any,
+  options: UseTrackAnimationOptions
+): {
+  /**
+   * 设置路径动画路径
+   */
+  setPath: (path: PathPoint[]) => void
+  /**
+   * 开始动画
+   */
+  start: () => void
+  /**
+   * 暂停动画
+   */
+  stop: () => void
+  /**
+   * 取消动画
+   */
+  cancel: () => void
+  /**
+   * 继续播放动画
+   */
+  proceed: () => void
+  /**
+   * 动画状态
+   */
+  status: Ref<AnimationStatus>
+}
 ```
diff --git a/packages/components/map/index.vue b/packages/components/map/index.vue
@@ -26,13 +26,14 @@
 		provide,
 		nextTick,
 		getCurrentInstance,
-		ref
+		ref,
+		onUpdated
 	} from 'vue'
 	import useLifeCycle from '../../hooks/useLifeCycle'
 	import bindEvents, { Callback } from '../../utils/bindEvents'
 	import getScriptAsync from '../../utils/getScriptAsync'
 	import { initPlugins, PluginsList } from '../../utils/pluginLoader'
-	import { isString } from '../../utils'
+	import { isString, callWhenDifferentValue } from '../../utils'
 	export interface BaiduMapProps {
 		ak?: string
 		/**sss
@@ -299,7 +300,6 @@
 			})
 			return
 		} else if (props.mapStyleJson) {
-			console.log('json')
 			map.setMapStyleV2({
 				styleJson: props.mapStyleJson
 			})
@@ -310,11 +310,11 @@
 		watch(() => props.zoom, setZoom)
 		watch(() => props.tilt, setTilt)
 		watch(() => props.heading, setHeading)
-		watch(() => props.center, setCenterAndZoom, {
+		watch(() => props.center, callWhenDifferentValue(setCenterAndZoom), {
 			deep: true
 		})
 		watch(() => props.mapStyleId, initCustomStyle)
-		watch(() => props.mapStyleJson, initCustomStyle, {
+		watch(() => props.mapStyleJson, callWhenDifferentValue(initCustomStyle), {
 			deep: true
 		})
 		watch(() => props.mapType, setMapType)