<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>
