<template>
  <div :id="`mapView_${mapKey}`" class="map-container"></div>
</template>

<script>
import Vue from "vue";
import "mars3d/mars3d.css";
import * as mars3d from "mars3d";
// 为了方便使用,绑定到原型链，在其他vue文件，直接this.mars3d 来使用
Vue.prototype.mars3d = mars3d;
Vue.prototype.Cesium = mars3d.Cesium;

export default {
  name: "MapViewer",
  props: {
    // 地图唯一性标识
    mapKey: { type: String, default: "" },
    // 初始化配置config.json的地址
    url: String,
    // 自定义参数
    options: Object,
  },

  mounted() {
    mars3d.Util.fetchJson({ url: this.url }).then((data) => {
      this.initMars3d({ ...data.map3d, ...this.options }); // 构建地图
    });
  },

  beforeDestroy() {
    const map = this[`_map${this.mapKey}`];
    if (map) {
      map.destroy();
      delete this[`_map${this.mapKey}`];
    }
    console.log(">>>>> 地图卸载完成 >>>>");
  },

  methods: {
    initMars3d(mapOptions) {
      if (this[`_map${this.mapKey}`]) {
        this[`_map${this.mapKey}`].destroy();
      }
      // 创建三维地球场景
      const map = new mars3d.Map(`mapView_${this.mapKey}`, mapOptions);
      window.map = map;
      console.log(">>>>> 地图创建成功 >>>>", map);
      // webgl渲染失败后，刷新页面
      map.on(mars3d.EventType.renderError, async () => {
        warning("程序内存消耗过大，请重启浏览器");
        window.location.reload();
      });
      // 抛出事件
      this.$emit("onload", map);
    },
  },
};
</script>

<style lang="scss">
.map-container {
  height: 100%;
  overflow: hidden;
}
</style>
