资源查询，资源管理修改

Surpriseplus

2023-08-31 d88143708375c191f1e9f0bc567ef1e18dbeaa1e

 src/components/MapView/moonMap.vue

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

  <div
    id="cesiumContainer"
    class="cesiumContainer"
  >

    <div class="mouseBox">
      <div
        class="earthImage"
        :class="{ active: gridIsshow }"
      ></div>
      <div class="earthLable">经度 :</div>
      <div class="earthLable">{{ longitude }}</div>
      <div class="earthLable">纬度 :</div>
      <div class="earthLable">{{ latitude }}</div>
      <div class="earthLable">地形高度 :</div>
      <div class="earthLable">{{ altHeight }} </div>
      <div class="earthLable">米</div>
      <div class="earthLable">视角高度 :</div>
      <div class="earthLable">{{ alt }} </div>
      <div class="earthLable">千米</div>
      <div class="earthLable">分辨率 :</div>
      <div class="earthLable">{{ rate }}</div>
      <div class="earthLable">m/px</div>
    </div>

  </div>
  <!-- <button id="btn1" class="layui-btn" @click="cameraInfo()">相机参数</button> -->

</template>

<script>
@@ -13,85 +38,91 @@
    return {
      earthCtrl: null,
      Viewer: null,
      longitude: "0.00",
      latitude: "0.00",
      rate: "0.00",
      alt: "0.00",
      altHeight: '0.00',
      gridIsshow: false
    };
  },
  methods: {
     cameraInfo() {
            // 获取当前相机位置的xyz坐标
            var cameraPosition = Viewer.camera.position;
    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;
      // 获取当前相机的姿态（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);
      // 构建警报框中的消息
      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);
        },
      // 弹出警报框显示相机位置和姿态
      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;
      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,
        }),
      });

    // let img_layer = Viewer.imageryLayers.addImageryProvider(layer);
    // this.layerList.push({ id: id, type: "dem" });
  },
      // 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() {
      //设置月球坐标系
@@ -106,68 +137,144 @@
        ellipsoidCoordinates: "MOON",
      });
      this.earthCtrl.environment.disableAllEffect();

      this.Viewer = this.earthCtrl._Viewer;

      // this.Viewer.scene.skyAtmosphere.show = false;

      this.Viewer.imageryLayers.removeAll();
      this.Viewer.scene.globe.depthTestAgainstTerrain = false;

      this.Viewer.scene.skyAtmosphere.show = false;
      window.earthCtrl = this.earthCtrl;

      window.Viewer = this.earthCtrl._Viewer;

      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);
      this.getLonLat();
      var token = getToken();
      var demUrl = `${BASE_URL}/proxy/${token}/24`
      var wmtsUrl = `${BASE_URL}/proxy/${token}/17`

      var demUrl = `${BASE_URL}/proxy/${token}/25`
      var wmtsUrl = `${BASE_URL}/proxy/${token}/26`
      this.AddDemLayer(demUrl)
      this.AddWmtesLayer(wmtsUrl)
      //=======================
      // window.Viewer.imageryLayers.removeAll();
      //=======================
      // Viewer.scene.globe.showGroundAtmosphere = false;
    },
    getLonLat() {
      let handlerPoint = new SmartEarth.Cesium.ScreenSpaceEventHandler(
        window.Viewer.scene.canvas
      );
      var ellipsoid = window.Viewer.scene.globe.ellipsoid;
      var that = this;
      handlerPoint.setInputAction(function (movement) {
        //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
        var cartesian = window.Viewer.camera.pickEllipsoid(
          movement.endPosition,
          ellipsoid
        );
        if (cartesian) {
          //将笛卡尔三维坐标转为地图坐标（弧度）
          var cartographic =
            window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
          //将地图坐标（弧度）转为十进制的度数
          that.longitude = SmartEarth.Cesium.Math.toDegrees(
            cartographic.longitude
          ).toFixed(6);
          that.latitude = SmartEarth.Cesium.Math.toDegrees(
            cartographic.latitude
          ).toFixed(6);
          that.altHeight = window.Viewer.scene.globe.getHeight(
            Cesium.Cartographic.fromDegrees(that.longitude, that.latitude, 0)
          )
          if (that.altHeight) {
            that.altHeight = that.altHeight.toFixed(2);
          }
        }
      }, SmartEarth.Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // var terrain = new Cesium.CesiumTerrainProvider({
      //   url: config.moonTerrain,
      //   tilingScheme: new Cesium.GeographicTilingScheme({
      //     ellipsoid: Cesium.Ellipsoid.MOON,
      //   }),
      // });
      // window.Viewer.terrainProvider = terrain;
  
      Viewer.camera.changed.addEventListener(() => {
        // 视高 km
        let camera_alt = (Viewer.camera.positionCartographic.height / 1000).toFixed(
          2
        );
        that.alt = camera_alt;

        let scene = window.Viewer.scene;
        // 获取画布的大小
        var width = scene.canvas.clientWidth;
        var height = scene.canvas.clientHeight;
        //获取画布中心两个像素的坐标（默认地图渲染在画布中心位置）
        var left = scene.camera.getPickRay(
          new SmartEarth.Cesium.Cartesian2((width / 2) | 0, (height - 1) / 2)
        );
        var right = scene.camera.getPickRay(
          new SmartEarth.Cesium.Cartesian2((1 + width / 2) | 0, (height - 1) / 2)
        );
        var globe = scene.globe;
        var leftPosition = globe.pick(left, scene);
        var rightPosition = globe.pick(right, scene);
        if (!Cesium.defined(leftPosition) || !Cesium.defined(rightPosition)) {
          return;
        }
        var leftCartographic =
          globe.ellipsoid.cartesianToCartographic(leftPosition);
        var rightCartographic =
          globe.ellipsoid.cartesianToCartographic(rightPosition);
        var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic();
        geodesic.setEndPoints(leftCartographic, rightCartographic);
        that.rate = geodesic.surfaceDistance.toFixed(2); //分辨率
      });

    },

  },
  mounted() {
    this.init3DMap();
  },
  created() {},
  created() { },
};
</script>

<style lang="less" scoped>
.body_box {
.cesiumContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  .cesiumContainer {
    width: 100%;
    height: 100%;

  .mouseBox {
    height: 30px;
    background: rgba(1, 0, 28, 0.3);
    z-index: 40;
    position: absolute;
    padding: 0px 10px;
    bottom: 30px;
    left: 20px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    .earthImage {
      width: 20px;
      height: 20px;
      background: url("../../assets/img/形状 9.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .earthLable {
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 5px;
      margin-left: 10px;
    }
    .active {
      background-color: #171e2e;
      border: 1px solid;
      border-image: linear-gradient(47deg, #397bc9, #77a5cd, #397bc9) 1 1;
      box-shadow: 0px 0px 6px 0px #080c13,
        0px 7px 8px 0px rgba(38, 47, 71, 0.68);
    }
  }
}

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