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() {
      // let graphicLayer = new mars3d.layer.GraphicLayer();
      // window.marsMap.addLayer(graphicLayer);
      // const fixedRoute = new mars3d.graphic.FixedRoute({
      //   name: "贴地表表面漫游",
      //   position: {
      //     type: "time", // 时序动态坐标
      //     speed: 160,
      //     list: [
      //       [116.043233, 30.845286, 392.48],
      //       [116.046833, 30.846863, 411.33],
      //       [116.052137, 30.848801, 439.45],
      //       [116.060838, 30.850918, 442.91],
      //       [116.069013, 30.852035, 435.14],
      //       [116.18739, 30.854441, 244.53],
      //       [116.205214, 30.859332, 300.96]
      //     ]
      //   },
      //   clockLoop: false, // 是否循环播放
      //   camera: {
      //     type: "gs",
      //     pitch: -30,
      //     radius: 500
      //   },
      //   // model: {
      //   //   show: true,
      //   //   url: "https://data.mars3d.cn/gltf/mars/qiche.gltf",
      //   //   scale: 0.2,
      //   //   minimumPixelSize: 50
      //   // },
      //   model: {
      //     scale: 1,
      //     url: "/uav/scene.gltf",
      //     heading: 90,
      //     mergeOrientation: true, // 用于设置模型不是标准的方向时的纠偏处理,在orientation基础的方式值上加上设置是heading值
      //     minimumPixelSize: 50
      //   },
      //   polyline: {
      //     color: "rgba(255,0,0,0.5)",
      //     width: 2,
      //     showAll: true
      //   },
      //   path: {
      //     color: "rgba(255,255,0,1.0)",
      //     width: 4,
      //     leadTime: 0
      //   }
      // });
      // graphicLayer.addGraphic(fixedRoute);
      // fixedRoute.start();
      // 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>