Commit 7912e010799de4d6d01a426091edc45f5163318e
1 parent
5e665641
perf: data component map componet add mark the strart point && mark the end point
Showing
2 changed files
with
16 additions
and
10 deletions
@@ -68,6 +68,7 @@ | @@ -68,6 +68,7 @@ | ||
68 | ts: lng.ts, | 68 | ts: lng.ts, |
69 | }; | 69 | }; |
70 | if (unref(trackList).length && isEqual(unref(trackList).at(-1), record)) return; | 70 | if (unref(trackList).length && isEqual(unref(trackList).at(-1), record)) return; |
71 | + marketPoint({ lat: lat.value, lng: lng.value }); | ||
71 | trackList.value.push(record); | 72 | trackList.value.push(record); |
72 | 73 | ||
73 | randomAnimation(unref(trackList)); | 74 | randomAnimation(unref(trackList)); |
@@ -75,13 +76,13 @@ | @@ -75,13 +76,13 @@ | ||
75 | } | 76 | } |
76 | }); | 77 | }); |
77 | 78 | ||
78 | - // function marketPoint(params: Record<'lng' | 'lat', number>) { | ||
79 | - // const { lng, lat } = params; | ||
80 | - // const BMap = (window as any).BMapGL; | ||
81 | - // const marker = new BMap.Marker(new BMap.Point(lng, lat)); | ||
82 | - // unref(mapInstance)?.centerAndZoom(new BMap.Point(lng, lat)); | ||
83 | - // unref(mapInstance)?.addOverlay(marker); | ||
84 | - // } | 79 | + function marketPoint(params: Record<'lng' | 'lat', number>) { |
80 | + const { lng, lat } = params; | ||
81 | + const BMap = (window as any).BMapGL; | ||
82 | + const marker = new BMap.Marker(new BMap.Point(lng, lat)); | ||
83 | + unref(mapInstance)?.centerAndZoom(new BMap.Point(lng, lat)); | ||
84 | + unref(mapInstance)?.addOverlay(marker); | ||
85 | + } | ||
85 | 86 | ||
86 | const prepare = ref(false); | 87 | const prepare = ref(false); |
87 | async function initMap() { | 88 | async function initMap() { |
@@ -141,15 +142,21 @@ | @@ -141,15 +142,21 @@ | ||
141 | const pl = new BMapGL.Polyline(point); | 142 | const pl = new BMapGL.Polyline(point); |
142 | const BMapGLLib = (window as any).BMapGLLib; | 143 | const BMapGLLib = (window as any).BMapGLLib; |
143 | 144 | ||
145 | + marketPoint({ lat: path.at(0)?.lat, lng: path.at(0)?.lng }); | ||
144 | const dynamicPlayMethod = { | 146 | const dynamicPlayMethod = { |
145 | [startMethodName]() { | 147 | [startMethodName]() { |
148 | + const duration = 5000; | ||
149 | + const delay = 300; | ||
146 | trackAni.value = new BMapGLLib.TrackAnimation(unref(mapInstance), pl, { | 150 | trackAni.value = new BMapGLLib.TrackAnimation(unref(mapInstance), pl, { |
147 | overallView: true, | 151 | overallView: true, |
148 | tilt: 30, | 152 | tilt: 30, |
149 | - duration: 5000, | ||
150 | - delay: 300, | 153 | + duration, |
154 | + delay, | ||
151 | }); | 155 | }); |
152 | trackAni.value!.start(); | 156 | trackAni.value!.start(); |
157 | + setTimeout(() => { | ||
158 | + marketPoint({ lat: path.at(-1)?.lat, lng: path.at(-1)?.lng }); | ||
159 | + }, duration + delay); | ||
153 | }, | 160 | }, |
154 | }; | 161 | }; |
155 | 162 |