Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
62c2e8aa 1 parent 8f2cab0a

测试路径动画功能

Inline Side-by-side
Showing 4 changed files with 101 additions and 20 deletions
...@@ -369,17 +369,24 @@ button:focus { ...@@ -369,17 +369,24 @@ button:focus {
369 @media (max-width: 767px) { 369 @media (max-width: 767px) {
370 /* 在窗口宽度小于等于767px时应用的样式 */ 370 /* 在窗口宽度小于等于767px时应用的样式 */
371 .level.level--current { 371 .level.level--current {
372 - -webkit-transform: translateZ(0rem) rotate3d(0,0,1,20deg); 372 + -webkit-transform: translateZ(3rem) rotate3d(0,0,1,20deg);
373 /* go to center */ 373 /* go to center */
374 - transform: translateZ(0rem) rotate3d(0,0,1,20deg); 374 + transform: translateZ(3rem) rotate3d(0,0,1,20deg);
375 -} 375 + }
376 + .mall--content-open .level.level--current {
377 + -webkit-transform: translateZ(-3rem) rotate3d(0,0,1,20deg);
378 + /* go to center */
379 + transform: translateZ(-3rem) rotate3d(0,0,1,20deg);
380 + }
376 } 381 }
377 382
378 /* Navigation classes */ 383 /* Navigation classes */
379 .levels--open .level, 384 .levels--open .level,
380 .levels--open .level::after { 385 .levels--open .level::after {
381 - -webkit-transition: -webkit-transform 1s, opacity 1s; 386 + /* -webkit-transition: -webkit-transform 1s, opacity 1s;
382 - transition: transform 1s, opacity 1s; 387 + transition: transform 1s, opacity 1s; */
388 + -webkit-transition: -webkit-transform 0.45s, opacity 0.45s;
389 + transition: transform 0.45s, opacity 0.45s;
383 -webkit-transition-delay: 0s; 390 -webkit-transition-delay: 0s;
384 transition-delay: 0s; 391 transition-delay: 0s;
385 } 392 }
......
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-07 18:13:15 4 + * @LastEditTime: 2023-08-10 17:13:50
5 * @FilePath: /map-demo/src/components/Floor/index.vue 5 * @FilePath: /map-demo/src/components/Floor/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 <van-icon name="arrow-up" size="1.25rem" /> 24 <van-icon name="arrow-up" size="1.25rem" />
25 </span> 25 </span>
26 </div> 26 </div>
27 - <div v-if="level_show" class="close-level icon" @click.native="onCloseLevel"> 27 + <div v-if="level_show" class="close-level icon" @click.native="onCloseLevelAll">
28 <span> 28 <span>
29 <van-icon name="points" size="1.25rem" /> 29 <van-icon name="points" size="1.25rem" />
30 </span> 30 </span>
...@@ -40,9 +40,9 @@ ...@@ -40,9 +40,9 @@
40 <img class="surroundings__map" src="./surroundings.svg" alt="Surroundings" /> 40 <img class="surroundings__map" src="./surroundings.svg" alt="Surroundings" />
41 </div> --> 41 </div> -->
42 <div class="levels"> 42 <div class="levels">
43 - <div v-for="(level, index) in level_list" :key="index" @click.capture="onFloorClick(index + 1)" 43 + <div v-for="(level, index) in level_list" :key="index" @click.capture="onFloorClick(index + 1, $event)"
44 :class="['level', 'level--' + (index + 1)]"> 44 :class="['level', 'level--' + (index + 1)]">
45 - <div v-html="level.svg"></div> 45 + <div class="level_svg" v-html="level.svg"></div>
46 <div class="level__pins"> 46 <div class="level__pins">
47 <a @click="clickPin(item, $event)" v-for="(item, index) in level.pin" :key="index" class="pin" :style="item.style" 47 <a @click="clickPin(item, $event)" v-for="(item, index) in level.pin" :key="index" class="pin" :style="item.style"
48 :data-category="item.category" :data-space="item.space"> 48 :data-category="item.category" :data-space="item.space">
...@@ -57,6 +57,14 @@ ...@@ -57,6 +57,14 @@
57 </a> 57 </a>
58 </div> 58 </div>
59 <div class="level_after">L{{ index + 1 }}</div> 59 <div class="level_after">L{{ index + 1 }}</div>
60 + <div v-if="level_show && index === 3" class="level_btn">
61 + <div v-if="!svg_animate_status" @click="createSafeAnimation(true)" style="font-size: 0.75rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
62 + 查看安全路线
63 + </div>
64 + <div v-else @click="createSafeAnimation(false)" style="font-size: 0.75rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
65 + 关闭安全路线
66 + </div>
67 + </div>
60 </div> 68 </div>
61 </div> 69 </div>
62 </div> 70 </div>
...@@ -147,15 +155,24 @@ export default { ...@@ -147,15 +155,24 @@ export default {
147 ], 155 ],
148 show: true 156 show: true
149 }, 157 },
150 - ] 158 + ],
159 + svg_animate_status: false,
160 + svg_animate: `
161 + <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"></path>
162 + <circle id="myCircle" cx="0" cy="0" r="10" fill="blue">
163 + <animateMotion dur="8s" repeatCount="indefinite">
164 + <mpath href="#myPath" />
165 + </animateMotion>
166 + </circle>
167 + `
151 } 168 }
152 }, 169 },
153 async mounted() { 170 async mounted() {
154 - if (!wxInfo().isPC) { // 移动端 171 + // if (!wxInfo().isPC) { // 移动端
155 - $('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)'); 172 + // $('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
156 - } else { // PC端 173 + // } else { // PC端
157 - $('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)'); 174 + // $('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
158 - } 175 + // }
159 }, 176 },
160 methods: { 177 methods: {
161 clearPinShow() { 178 clearPinShow() {
...@@ -164,7 +181,7 @@ export default { ...@@ -164,7 +181,7 @@ export default {
164 }); 181 });
165 $('.mall').removeClass('mall--content-open'); 182 $('.mall').removeClass('mall--content-open');
166 }, 183 },
167 - onFloorClick(level) { 184 + onFloorClick(level, evt) {
168 this.level_show = level; 185 this.level_show = level;
169 $('.levels').addClass('levels--open').addClass(`levels--selected-${level}`); 186 $('.levels').addClass('levels--open').addClass(`levels--selected-${level}`);
170 $(`.level--${level}`).addClass('level--current'); 187 $(`.level--${level}`).addClass('level--current');
...@@ -186,8 +203,15 @@ export default { ...@@ -186,8 +203,15 @@ export default {
186 this.level_show = ''; 203 this.level_show = '';
187 this.clearPinShow(); 204 this.clearPinShow();
188 }, 205 },
189 - onClose() { 206 + onCloseLevelAll() {
190 this.onCloseLevel(); 207 this.onCloseLevel();
208 + // 清除动画
209 + if (this.svg_animate_status) {
210 + this.createSafeAnimation(false);
211 + }
212 + },
213 + onClose() {
214 + this.onCloseLevelAll();
191 this.$emit('close'); 215 this.$emit('close');
192 }, 216 },
193 onClickCloseIcon() { 217 onClickCloseIcon() {
...@@ -287,6 +311,27 @@ export default { ...@@ -287,6 +311,27 @@ export default {
287 item.show = false; 311 item.show = false;
288 } 312 }
289 }); 313 });
314 + },
315 + createSafeAnimation(flag) { // 创建安全动画路径，固定生成动画方法
316 + let insertString = '';
317 + let level = 4;
318 + if (flag) { // 打开
319 + this.svg_animate_status = true;
320 + insertString = this.svg_animate;
321 + let insertIndex = this.level_list[3].svg.indexOf('</svg>');
322 + // 添加相应动画
323 + let modifiedString = this.level_list[3].svg.slice(0, insertIndex) + insertString;
324 + this.level_list[3].svg = modifiedString + '</svg>';
325 + } else { // 关闭
326 + this.svg_animate_status = false;
327 + let originalString = this.level_list[3].svg;
328 + let searchTerm = this.svg_animate;
329 + let startIndex = originalString.indexOf(searchTerm);
330 + let endIndex = startIndex + searchTerm.length - 1;
331 + // 删除相应动画
332 + let modifiedString = originalString.substring(0, startIndex) + originalString.substring(endIndex + 1);
333 + this.level_list[3].svg = modifiedString;
334 + }
290 } 335 }
291 } 336 }
292 } 337 }
...@@ -370,4 +415,21 @@ export default { ...@@ -370,4 +415,21 @@ export default {
370 transform: rotateZ(25deg) rotateX(-60deg) translateZ(15vmin); 415 transform: rotateZ(25deg) rotateX(-60deg) translateZ(15vmin);
371 } 416 }
372 } 417 }
418 +
419 +.level_btn {
420 + font-size: 0.75rem;
421 + line-height: 0;
422 + position: absolute;
423 + z-index: 100;
424 + top: -2em;
425 + right: 0;
426 + white-space: nowrap;
427 + color: #7d7d86;
428 + -webkit-transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
429 + transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
430 + -webkit-transition: -webkit-transform 1s, color 0.3s;
431 + transition: transform 1s, color 0.3s;
432 + -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
433 + transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
434 +}
373 </style> 435 </style>
......
1 /* 1 /*
2 * @Date: 2023-08-01 13:55:03 2 * @Date: 2023-08-01 13:55:03
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-08-07 16:02:25 4 + * @LastEditTime: 2023-08-10 16:51:33
5 * @FilePath: /map-demo/src/components/Floor/pin.js 5 * @FilePath: /map-demo/src/components/Floor/pin.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
......
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-07 18:20:34 4 + * @LastEditTime: 2023-08-10 08:36:04
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: false, 280 + show_floor_popup: true,
281 } 281 }
282 }, 282 },
283 async mounted() { 283 async mounted() {
...@@ -761,6 +761,18 @@ export default { ...@@ -761,6 +761,18 @@ export default {
761 this.map.add([this.current_route]); 761 this.map.add([this.current_route]);
762 // 获取定位打标记 762 // 获取定位打标记
763 this.setLocation(); 763 this.setLocation();
764 + // TEMP：临时显示测试地址
765 + this.location_marker = new AMap.LabelMarker({
766 + icon: {
767 + image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
768 + anchor: 'bottom-center',
769 + size: [36, 36],
770 + },
771 + position: new AMap.LngLat(120.587706, 31.314197), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
772 + });
773 + this.map.add(this.location_marker);
774 + // 定位到当前位置中心
775 + this.map.setZoomAndCenter(this.zoom, [120.587706, 31.314197]);
764 // this.location_marker = new AMap.Marker({ 776 // this.location_marker = new AMap.Marker({
765 // icon: new AMap.Icon({ 777 // icon: new AMap.Icon({
766 // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png', 778 // image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
......