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/uav.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>