济菏高速业务端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

132 lines
2.6 KiB

1 year ago
<template>
<div class='AMapContainer' v-loading="loading" element-loading-text="地图加载中..." element-loading-spinner="el-icon-place"
element-loading-background="rgba(0, 0, 0, 0.42)" ref="mapContainerRef"
:style="{ ...this.size, ...getReverseStyle }" />
</template>
<script lang="ts">
import { onceObserver } from "@screen/utils/resizeObserver";
import { loadAMap } from "./loadAMap"
export default {
name: 'AMapContainer',
inject: [
'adpScale'
],
data() {
return {
size: null,
loading: true
}
},
computed: {
getReverseStyle() {
return {
transform: `scale(${1 / this.adpScale.scaleX}, ${1 / this.adpScale.scaleY})`,
}
}
},
async mounted() {
// console.log(this.$refs.mapContainerRef);
this.AMap = await loadAMap();
if (!this.AMap) return;
onceObserver.call(this, this.$refs.mapContainerRef.parentElement, ({ width, height }) => this.size = {
width: `${width}px`,
height: `${height + 24}px`,
});
this.aMapIns = new this.AMap.Map(this.$refs.mapContainerRef, {
resizeEnable: true, //是否监控地图容器尺寸变化
mapStyle: "amap://styles/blue",
zoom: 9,
});
this.aMapIns.on('complete', () => {
this.loading = false;
// var polyline1 = new this.AMap.Polyline({
// path: [],
// strokeColor: "#67EBF7",
// strokeWeight: 6,
// strokeOpacity: 0.9,
// zIndex: 50,
// bubble: true,
// })
// this.aMapIns.add([polyline1])
})
// this.aMapIns.enableAutoResize();
},
methods: {
getMapInstance() {
return {
AMap: this.AMap,
mapIns: this.aMapIns,
}
}
},
unmounted() {
if (!this.aMapIns) return;
this.aMapIns.destroyed();
},
}
</script>
<style lang='scss' scoped>
.AMapContainer {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
transform-origin: left top;
background-color: #103253 !important;
transition: all .15s linear;
::v-deep {
.el-loading-mask {
user-select: none;
.el-loading-spinner {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.el-loading-text,
.el-icon-place {
color: #59D1FE;
font-size: 15px;
}
.el-icon-place {
font-size: 18px;
animation: 1.2s infinite jump;
}
}
}
}
}
@keyframes jump {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
</style>