36 lines
641 B
Vue
36 lines
641 B
Vue
|
<template>
|
||
|
|
<div class="mars3dContainer" ref="mapRef" id="mars3dContainer"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { ms3dConfig } from '@/config/mapConfig'
|
||
|
|
export default {
|
||
|
|
name: "Map",
|
||
|
|
mounted() {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
if (this.$refs.mapRef) {
|
||
|
|
this.initMap()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//创建三维地球场景
|
||
|
|
initMap () {
|
||
|
|
this.map = new mars3d.Map(this.$refs.mapRef, ms3dConfig)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.map-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
left: 50%;
|
||
|
|
top: 0;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
</style>
|