地图相机位置

WX

2023-08-15 ea4a160fb6722dc98492fd7aff5b5a1ebeb06427

 src/components/MapView/moonMap.vue

@@ -1,10 +1,12 @@
 <template>
  <div class="body_box">
    <div id="cesiumContainer"></div>
    <!-- <button id="btn1" class="layui-btn" @click="cameraInfo()">相机参数</button> -->
  </div>
</template>

<script>
import { getToken } from "../../utils/auth.js";
export default {
  components: {},
  data() {
@@ -14,6 +16,82 @@
    };
  },
  methods: {
     cameraInfo() {
            // 获取当前相机位置的xyz坐标
            var cameraPosition = Viewer.camera.position;

            // 获取当前相机的姿态（heading、pitch、roll）
            var cameraHeading = Viewer.camera.heading;
            var cameraPitch = Viewer.camera.pitch;
            var cameraRoll = Viewer.camera.roll;

            // 构建警报框中的消息
            var message = 'Camera Position (x, y, z):\n' +
                            cameraPosition.x.toFixed(2) + ', ' +
                            cameraPosition.y.toFixed(2) + ', ' +
                            cameraPosition.z.toFixed(2) + '\n\n' +
                            'Camera Heading: ' + cameraHeading.toFixed(2) + '\n' +
                            'Camera Pitch: ' + cameraPitch.toFixed(2) + '\n' +
                            'Camera Roll: ' + cameraRoll.toFixed(2);

            // 弹出警报框显示相机位置和姿态
            alert(message);
        },
    // wmts加载
    AddWmtesLayer(url, id) {
    var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
      sourceType: "wmts",
      url: url,
      layer: "",
      format: "image/png",
      tileMatrixSetID: "GoogleCRS84Quad01",
      tileMatrixLabels: [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
      ],
      style: "",
      tilingScheme: new Cesium.GeographicTilingScheme({
        ellipsoid: Cesium.Ellipsoid.MOON,
      }),
    });
    console.log(urlTemplateImageryProvider);
    // this.layerList.push({
    //   id: id,
    //   layerData: urlTemplateImageryProvider._primitive,
    //   type: "wmts",
    // });
  },
  // 地形加载
    AddDemLayer(url, id) {
    var terrain = new Cesium.CesiumTerrainProvider({
      url: url,
      // url: url,
      tilingScheme: new Cesium.GeographicTilingScheme({
        ellipsoid: Cesium.Ellipsoid.MOON,
      }),
    });
    window.Viewer.terrainProvider = terrain;

    // let img_layer = Viewer.imageryLayers.addImageryProvider(layer);
    // this.layerList.push({ id: id, type: "dem" });
  },
    //地图初始化
    init3DMap() {
      //设置月球坐标系
@@ -27,7 +105,7 @@
        StaticFileBaseUrl: StaticFileBaseUrl,
        ellipsoidCoordinates: "MOON",
      });
      // this.earthCtrl.environment.disableAllEffect();
      this.earthCtrl.environment.disableAllEffect();

      this.Viewer = this.earthCtrl._Viewer;

@@ -42,8 +120,15 @@
      window.Cesium = SmartEarth.Cesium;

      window.sgworld = earthCtrl;

      sgworld.Navigate.Stop(); //取消飞行状态
      sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
      sgworld.Navigate.setPosition(-1093596.38, 5729026.12, 4136590.41);
      var token = getToken();
      var demUrl = `${BASE_URL}/proxy/${token}/24`
      var wmtsUrl = `${BASE_URL}/proxy/${token}/17`

      this.AddDemLayer(demUrl)
      this.AddWmtesLayer(wmtsUrl)
      //=======================
      // window.Viewer.imageryLayers.removeAll();
      //=======================
@@ -56,6 +141,8 @@
      //   }),
      // });
      // window.Viewer.terrainProvider = terrain;
  

    },
  },
  mounted() {
@@ -77,4 +164,10 @@
    height: 100%;
  }
}

</style>
<style>
.cesium-viewer-animationContainer{
  display: none !important;
}
</style>