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 102 additions and 21 deletions
......@@ -369,17 +369,24 @@ button:focus {
@media (max-width: 767px) {
/* 在窗口宽度小于等于767px时应用的样式 */
.level.level--current {
-webkit-transform: translateZ(0rem) rotate3d(0,0,1,20deg);
/* go to center */
transform: translateZ(0rem) rotate3d(0,0,1,20deg);
}
-webkit-transform: translateZ(3rem) rotate3d(0,0,1,20deg);
/* go to center */
transform: translateZ(3rem) rotate3d(0,0,1,20deg);
}
.mall--content-open .level.level--current {
-webkit-transform: translateZ(-3rem) rotate3d(0,0,1,20deg);
/* go to center */
transform: translateZ(-3rem) rotate3d(0,0,1,20deg);
}
}
/* Navigation classes */
.levels--open .level,
.levels--open .level::after {
-webkit-transition: -webkit-transform 1s, opacity 1s;
transition: transform 1s, opacity 1s;
/* -webkit-transition: -webkit-transform 1s, opacity 1s;
transition: transform 1s, opacity 1s; */
-webkit-transition: -webkit-transform 0.45s, opacity 0.45s;
transition: transform 0.45s, opacity 0.45s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
......
<!--
* @Date: 2023-07-27 11:04:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-07 18:13:15
* @LastEditTime: 2023-08-10 17:13:50
* @FilePath: /map-demo/src/components/Floor/index.vue
* @Description: 文件描述
-->
......@@ -24,7 +24,7 @@
<van-icon name="arrow-up" size="1.25rem" />
</span>
</div>
<div v-if="level_show" class="close-level icon" @click.native="onCloseLevel">
<div v-if="level_show" class="close-level icon" @click.native="onCloseLevelAll">
<span>
<van-icon name="points" size="1.25rem" />
</span>
......@@ -40,9 +40,9 @@
<img class="surroundings__map" src="./surroundings.svg" alt="Surroundings" />
</div> -->
<div class="levels">
<div v-for="(level, index) in level_list" :key="index" @click.capture="onFloorClick(index + 1)"
<div v-for="(level, index) in level_list" :key="index" @click.capture="onFloorClick(index + 1, $event)"
:class="['level', 'level--' + (index + 1)]">
<div v-html="level.svg"></div>
<div class="level_svg" v-html="level.svg"></div>
<div class="level__pins">
<a @click="clickPin(item, $event)" v-for="(item, index) in level.pin" :key="index" class="pin" :style="item.style"
:data-category="item.category" :data-space="item.space">
......@@ -57,6 +57,14 @@
</a>
</div>
<div class="level_after">L{{ index + 1 }}</div>
<div v-if="level_show && index === 3" class="level_btn">
<div v-if="!svg_animate_status" @click="createSafeAnimation(true)" style="font-size: 0.75rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
查看安全路线
</div>
<div v-else @click="createSafeAnimation(false)" style="font-size: 0.75rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
关闭安全路线
</div>
</div>
</div>
</div>
</div>
......@@ -147,15 +155,24 @@ export default {
],
show: true
},
]
],
svg_animate_status: false,
svg_animate: `
<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>
<circle id="myCircle" cx="0" cy="0" r="10" fill="blue">
<animateMotion dur="8s" repeatCount="indefinite">
<mpath href="#myPath" />
</animateMotion>
</circle>
`
}
},
async mounted() {
if (!wxInfo().isPC) { // 移动端
$('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
} else { // PC端
$('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
}
// if (!wxInfo().isPC) { // 移动端
// $('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
// } else { // PC端
// $('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
// }
},
methods: {
clearPinShow() {
......@@ -164,7 +181,7 @@ export default {
});
$('.mall').removeClass('mall--content-open');
},
onFloorClick(level) {
onFloorClick(level, evt) {
this.level_show = level;
$('.levels').addClass('levels--open').addClass(`levels--selected-${level}`);
$(`.level--${level}`).addClass('level--current');
......@@ -186,8 +203,15 @@ export default {
this.level_show = '';
this.clearPinShow();
},
onClose() {
onCloseLevelAll() {
this.onCloseLevel();
// 清除动画
if (this.svg_animate_status) {
this.createSafeAnimation(false);
}
},
onClose() {
this.onCloseLevelAll();
this.$emit('close');
},
onClickCloseIcon() {
......@@ -287,6 +311,27 @@ export default {
item.show = false;
}
});
},
createSafeAnimation(flag) { // 创建安全动画路径，固定生成动画方法
let insertString = '';
let level = 4;
if (flag) { // 打开
this.svg_animate_status = true;
insertString = this.svg_animate;
let insertIndex = this.level_list[3].svg.indexOf('</svg>');
// 添加相应动画
let modifiedString = this.level_list[3].svg.slice(0, insertIndex) + insertString;
this.level_list[3].svg = modifiedString + '</svg>';
} else { // 关闭
this.svg_animate_status = false;
let originalString = this.level_list[3].svg;
let searchTerm = this.svg_animate;
let startIndex = originalString.indexOf(searchTerm);
let endIndex = startIndex + searchTerm.length - 1;
// 删除相应动画
let modifiedString = originalString.substring(0, startIndex) + originalString.substring(endIndex + 1);
this.level_list[3].svg = modifiedString;
}
}
}
}
......@@ -370,4 +415,21 @@ export default {
transform: rotateZ(25deg) rotateX(-60deg) translateZ(15vmin);
}
}
.level_btn {
font-size: 0.75rem;
line-height: 0;
position: absolute;
z-index: 100;
top: -2em;
right: 0;
white-space: nowrap;
color: #7d7d86;
-webkit-transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
-webkit-transition: -webkit-transform 1s, color 0.3s;
transition: transform 1s, color 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
</style>
......
/*
* @Date: 2023-08-01 13:55:03
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-07 16:02:25
* @LastEditTime: 2023-08-10 16:51:33
* @FilePath: /map-demo/src/components/Floor/pin.js
* @Description: 文件描述
*/
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-07 18:20:34
* @LastEditTime: 2023-08-10 08:36:04
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 内部地图主体页面
-->
......@@ -277,7 +277,7 @@ export default {
point_range: [ // 景区范围经纬度
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
],
show_floor_popup: false,
show_floor_popup: true,
}
},
async mounted() {
......@@ -761,6 +761,18 @@ export default {
this.map.add([this.current_route]);
// 获取定位打标记
this.setLocation();
// TEMP：临时显示测试地址
this.location_marker = new AMap.LabelMarker({
icon: {
image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
anchor: 'bottom-center',
size: [36, 36],
},
position: new AMap.LngLat(120.587706, 31.314197), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
this.map.add(this.location_marker);
// 定位到当前位置中心
this.map.setZoomAndCenter(this.zoom, [120.587706, 31.314197]);
// this.location_marker = new AMap.Marker({
// icon: new AMap.Icon({
// image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
......