Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
42a0bbaf 1 parent 794afa77

控制显示调整

Inline Side-by-side
Showing 2 changed files with 90 additions and 27 deletions
1 <!-- 1 <!--
2 * @Date: 2023-07-27 11:04:04 2 * @Date: 2023-07-27 11:04:04
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-08-11 09:42:52 4 + * @LastEditTime: 2023-08-11 14:14:16
5 * @FilePath: /map-demo/src/components/Floor/index.vue 5 * @FilePath: /map-demo/src/components/Floor/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -34,6 +34,31 @@ ...@@ -34,6 +34,31 @@
34 <van-icon name="arrow-down" size="1.25rem" /> 34 <van-icon name="arrow-down" size="1.25rem" />
35 </span> 35 </span>
36 </div> 36 </div>
37 + <div class="animate-bar icon">
38 + <div v-if="level_show == 4" class="">
39 + <div v-if="!svg_safe_animate_status" @click="createAnimation(true, level_show - 1, 'safe')" style="font-size: 1.25rem;">
40 + <van-icon name="star-o" />
41 + </div>
42 + <div v-else @click="createAnimation(false, level_show - 1, 'safe')" style="font-size: 1.25rem;">
43 + <van-icon name="star" />
44 + </div>
45 + <div style="height: 0.5rem;"></div>
46 + <div v-if="!svg_toilet_animate_status" @click="createAnimation(true, level_show - 1, 'toilet')" style="font-size: 1.25rem;">
47 + <van-icon name="shop-o" />
48 + </div>
49 + <div v-else @click="createAnimation(false, level_show - 1, 'toilet')" style="font-size: 1.25rem;">
50 + <van-icon name="shop" />
51 + </div>
52 + </div>
53 + <div v-if="level_show == 3">
54 + <div v-if="!svg_door_animate_status" @click="createAnimation(true, level_show - 1, 'door')" style="font-size: 1.25rem;">
55 + <van-icon name="wap-home-o" />
56 + </div>
57 + <div v-else @click="createAnimation(false, level_show - 1, 'door')" style="font-size: 1.25rem;">
58 + <van-icon name="wap-home" />
59 + </div>
60 + </div>
61 + </div>
37 </div> 62 </div>
38 <div class="mall"> 63 <div class="mall">
39 <!-- <div class="surroundings"> 64 <!-- <div class="surroundings">
...@@ -57,14 +82,6 @@ ...@@ -57,14 +82,6 @@
57 </a> 82 </a>
58 </div> 83 </div>
59 <div class="level_after">L{{ index + 1 }}</div> 84 <div class="level_after">L{{ index + 1 }}</div>
60 - <div v-if="level_show && index === 3" class="level_btn">
61 - <div v-if="!svg_safe_animate_status" @click="createSafeAnimation(true)" style="font-size: 0.85rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
62 - 查看安全路线
63 - </div>
64 - <div v-else @click="createSafeAnimation(false)" style="font-size: 0.85rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
65 - 关闭安全路线
66 - </div>
67 - </div>
68 </div> 85 </div>
69 </div> 86 </div>
70 87
...@@ -157,6 +174,12 @@ export default { ...@@ -157,6 +174,12 @@ export default {
157 show: true 174 show: true
158 }, 175 },
159 ], 176 ],
177 + svg_animate_obj: {
178 + 0: [],
179 + 1: [],
180 + 2: [],
181 + 3: [],
182 + },
160 svg_safe_animate_status: false, 183 svg_safe_animate_status: false,
161 svg_safe_animate: ` 184 svg_safe_animate: `
162 <path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="5"> 185 <path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="5">
...@@ -166,7 +189,27 @@ export default { ...@@ -166,7 +189,27 @@ export default {
166 <mpath href="#myPath" /> 189 <mpath href="#myPath" />
167 </animateMotion> 190 </animateMotion>
168 </circle> 191 </circle>
169 - ` 192 + `,
193 + svg_toilet_animate_status: false,
194 + svg_toilet_animate: `
195 + <path id="myPath" d="M 1138.427 213.33 L 486.79 224.966 L 473.061 123.103" fill="none" stroke="#D49333" stroke-width="5">
196 + </path>
197 + <circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
198 + <animateMotion dur="8s" repeatCount="indefinite">
199 + <mpath href="#myPath" />
200 + </animateMotion>
201 + </circle>
202 + `,
203 + svg_door_animate_status: false,
204 + svg_door_animate: `
205 + <path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="5">
206 + </path>
207 + <circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
208 + <animateMotion dur="8s" repeatCount="indefinite">
209 + <mpath href="#myPath" />
210 + </animateMotion>
211 + </circle>
212 + `,
170 } 213 }
171 }, 214 },
172 async mounted() { 215 async mounted() {
...@@ -208,9 +251,7 @@ export default { ...@@ -208,9 +251,7 @@ export default {
208 onCloseLevelAll() { 251 onCloseLevelAll() {
209 this.onCloseLevel(); 252 this.onCloseLevel();
210 // 清除动画 253 // 清除动画
211 - if (this.svg_safe_animate_status) { 254 + this.clearAllAnimation();
212 - this.createSafeAnimation(false);
213 - }
214 }, 255 },
215 onClose() { 256 onClose() {
216 this.onCloseLevelAll(); 257 this.onCloseLevelAll();
...@@ -314,27 +355,45 @@ export default { ...@@ -314,27 +355,45 @@ export default {
314 } 355 }
315 }); 356 });
316 }, 357 },
317 - createSafeAnimation(flag) { // 创建安全动画路径，固定生成动画方法 358 + clearAllAnimation () {
359 + // 所有清除动画
360 + for (let key in this.svg_animate_obj) {
361 + if (this.svg_animate_obj[key].length) {
362 + if (this[`svg_${this.svg_animate_obj[key]}_animate_status`]) {
363 + this.createAnimation(false, key, this.svg_animate_obj[key]);
364 + }
365 + }
366 + }
367 + },
368 + createAnimation(flag, level, id) { // 创建动画路径，固定生成动画方法
369 + //
318 let insertString = ''; 370 let insertString = '';
319 - let level = 4;
320 if (flag) { // 打开 371 if (flag) { // 打开
321 - this.svg_safe_animate_status = true; 372 + // 清除动画
322 - insertString = this.svg_safe_animate; 373 + this.clearAllAnimation();
323 - let insertIndex = this.level_list[3].svg.indexOf('</svg>'); 374 + this[`svg_${id}_animate_status`] = true;
375 + insertString = this[`svg_${id}_animate`];
376 + let insertIndex = this.level_list[level].svg.indexOf('</svg>');
324 // 添加相应动画 377 // 添加相应动画
325 - let modifiedString = this.level_list[3].svg.slice(0, insertIndex) + insertString; 378 + let modifiedString = this.level_list[level].svg.slice(0, insertIndex) + insertString;
326 - this.level_list[3].svg = modifiedString + '</svg>'; 379 + this.level_list[level].svg = modifiedString + '</svg>';
380 + // 新增ID
381 + if (this.svg_animate_obj[level].indexOf(id) < 0) {
382 + this.svg_animate_obj[level].push(id);
383 + }
327 } else { // 关闭 384 } else { // 关闭
328 - this.svg_safe_animate_status = false; 385 + this[`svg_${id}_animate_status`] = false;
329 - let originalString = this.level_list[3].svg; 386 + let originalString = this.level_list[level].svg;
330 - let searchTerm = this.svg_safe_animate; 387 + let searchTerm = this[`svg_${id}_animate`];
331 let startIndex = originalString.indexOf(searchTerm); 388 let startIndex = originalString.indexOf(searchTerm);
332 let endIndex = startIndex + searchTerm.length - 1; 389 let endIndex = startIndex + searchTerm.length - 1;
333 // 删除相应动画 390 // 删除相应动画
334 let modifiedString = originalString.substring(0, startIndex) + originalString.substring(endIndex + 1); 391 let modifiedString = originalString.substring(0, startIndex) + originalString.substring(endIndex + 1);
335 - this.level_list[3].svg = modifiedString; 392 + this.level_list[level].svg = modifiedString;
393 + // 剔除ID
394 + this.svg_animate_obj[level] = this.svg_animate_obj[level].filter(item => item === id);
336 } 395 }
337 - } 396 + },
338 } 397 }
339 } 398 }
340 </script> 399 </script>
...@@ -391,6 +450,10 @@ export default { ...@@ -391,6 +450,10 @@ export default {
391 top: 8rem; 450 top: 8rem;
392 right: 1rem; 451 right: 1rem;
393 } 452 }
453 + .animate-bar {
454 + top: 12rem;
455 + right: 1rem;
456 + }
394 } 457 }
395 458
396 .level_after { 459 .level_after {
......
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-08-10 17:19:02 4 + * @LastEditTime: 2023-08-11 14:16:19
5 * @FilePath: /map-demo/src/views/inner.vue 5 * @FilePath: /map-demo/src/views/inner.vue
6 * @Description: 内部地图主体页面 6 * @Description: 内部地图主体页面
7 --> 7 -->
...@@ -277,7 +277,7 @@ export default { ...@@ -277,7 +277,7 @@ export default {
277 point_range: [ // 景区范围经纬度 277 point_range: [ // 景区范围经纬度
278 [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005] 278 [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
279 ], 279 ],
280 - show_floor_popup: true, 280 + show_floor_popup: false,
281 } 281 }
282 }, 282 },
283 async mounted() { 283 async mounted() {
......