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 class="pointingNorth" @click="mapNorth">
      <img src="@/assets/img/menu/shebei.png" alt="" />
    </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.scene.screenSpaceCameraController.enableTranslate = false;
      // map.scene.screenSpaceCameraController.enableRotate = false; // 禁用旋转
      // map.scene.screenSpaceCameraController.enableTilt = false; // 禁用倾斜
      // map.scene.screenSpaceCameraController.enableZoom = false; // 禁用缩放
    },
    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);
      // 在地图初始化后禁用平移
      let camera = window.mapConfig;
      console.log(camera, "camera");
      if (camera.isCamera) {
        let cameraHistory = new mars3d.thing.CameraHistory({
          limit: {
            // 限定视角范围
            position: Cesium.Cartesian3.fromDegrees(
              camera.cameraLon,
              camera.cameraLat,
              0
            ),
            radius: camera.cameraRadius,
            debugExtent: false
          }
        });
        map.addThing(cameraHistory);
        map.scene.screenSpaceCameraController.minimumZoomDistance = 1000; //相机的高度的最小值
        map.scene.screenSpaceCameraController.maximumZoomDistance = 500000; //相机高度的最大值
      }
    },
    mapNorth() {
      // 1. 获取当前视角
      const currentView = window.marsMap.getCameraView();

      // 2. 修改视角的heading为0（正北），保留其他参数
      window.marsMap.setCameraView({
        lat: currentView.lat,
        lng: currentView.lng,
        alt: currentView.alt,
        heading: 0, // 指北
        pitch: currentView.pitch,
        roll: currentView.roll
      });
    }
  }
};
</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%;
  }
  .pointingNorth {
    position: absolute;
    bottom: 5%;
    right: 25%;
    cursor: pointer;
  }
}
</style>