ly-front/src/views/mapControl/index.vue

<template>
  <div class="HomeMpa">
    <div class="zoom-level">当前缩放等级: {{ zoomLevel }}</div>
    <div id="mars3dContainer" ref="MarsMap" class="mars3d-container"></div>
  </div>
</template>

<script>
"use script";
import { mapGetters } from "vuex";
export default {
  name: "HomeMap",
  data() {
    return {
      player: null,
      zoomLevel: null
    };
  },
  created() {
    // console.clear();
  },
  mounted() {
    this.getMapJson();
  },
  computed: {
    ...mapGetters(["statePage", "cityCode"])
  },
  methods: {
    getMapJson() {
      // eslint-disable-next-line no-undef
      mars3d.Util.fetchJson({
        // ***_***
        url: "/configJson/map.json"
      }).then((res) => {
        this.initMarsMap({
          // 合并配置项
          ...res.map3d
        });
      });
    },
    initMarsMap(options) {
      let map;
      // eslint-disable-next-line no-undef
      map = new mars3d.Map(this.$refs.MarsMap, options);
      // eslint-disable-next-line no-unused-vars
      window.marsMap = map;
      // 禁止右键菜单
      // map.unbindContextMenu();
      //禁用切换动画效果
      if (map.viewer.sceneModePicker) {
        map.viewer.sceneModePicker.viewModel.duration = 0.0;
      }
      // map构造完成后的一些处理
      this.onMapLoad(map);
      // eslint-disable-next-line no-undef
      map.on(mars3d.EventType.click, this.map_clickHandler, map);
      map.on(mars3d.EventType.cameraMoveEnd, this.map_zoomHandler, map);
    },
    map_clickHandler(event) {
      console.log(event);
    },
    map_zoomHandler(event) {
      let { alt } = window.marsMap.getCameraView();
      this.zoomLevel = this.estimateZoomLevel(alt);
      console.log(this.zoomLevel);
    },
    estimateZoomLevel(height) {
      const maxZoom = 18;
      const baseHeight = 1000;
      const zoom = maxZoom - Math.log2(height / baseHeight);
      return Math.round(zoom);
    },
    onMapLoad(map) {
      map.changeMouseModel(true);
    }
  }
};
</script>
<style scoped lang="scss">
.HomeMpa {
  width: 100%;
  height: 100%;
  .zoom-level {
    position: absolute;
    bottom: 0.8%;
    left: 1%;
    z-index: 5;
    color: #fff;
  }

  #mars3dContainer {
    width: 100%;
    height: 100%;
  }
}
</style>