添加视角高度，修改geoserver 图层加载方式

Surpriseplus

2023-08-17 e59dc8e54c61e581f452ca53d4ee34d3b52e4ec9

添加视角高度，修改geoserver 图层加载方式

 src/assets/js/Map/config.js

@@ -1,5 +1,5 @@
//是否为生产环境
const isWeb = false;
const isWeb = true;
//是否为生产环境
const webUrl = isWeb ? "/web" : "";
//配置文件地址

 src/assets/js/Map/server.js

@@ -94,7 +94,7 @@
        break;
    }
  },
  setGeoDataType() {
  setGeoDataType(res) {
    switch (res.type) {
      case 0://URL
        break;
@@ -324,7 +324,6 @@
      if (e.id === code) {
        switch (e.type) {
          case "wmts":
            debugger
            window.Viewer.imageryLayers.remove(e.layerData);
            break;
          case "tms":

 src/components/mouseMove.vue

@@ -1,5 +1,8 @@
<template>
  <div class="mouseBox" @setMouseMove="setMouseMove">
  <div
    class="mouseBox"
    @setMouseMove="setMouseMove"
  >
    <div
      class="earthImage"
      :class="{ active: gridIsshow }"
@@ -9,6 +12,9 @@
    <div class="earthLable">{{ longitude }}</div>
    <div class="earthLable">纬度 :</div>
    <div class="earthLable">{{ latitude }}</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>
@@ -27,6 +33,9 @@
const longitude = ref("0.00");
const latitude = ref("0.00");
const rate = ref("0.00");
const alt = ref("0.00");
const alheight = ref("0.00");

let entitiesObj = reactive({
  lonLine: [],
  latLine: [],
@@ -60,6 +69,7 @@
      latitude.value = SmartEarth.Cesium.Math.toDegrees(
        cartographic.latitude
      ).toFixed(6);

      let scene = window.Viewer.scene;
      // 获取画布的大小
      var width = scene.canvas.clientWidth;
@@ -71,15 +81,12 @@
      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 =
@@ -89,6 +96,26 @@
      rate.value = geodesic.surfaceDistance.toFixed(6); //分辨率
    }
  }, SmartEarth.Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  Viewer.camera.changed.addEventListener(() => {
    // 视高 km
    let camera_alt = (Viewer.camera.positionCartographic.height / 1000).toFixed(
      2
    );
    alt.value = camera_alt;
    // // 方位角
    // let heading = Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2);
    // // 俯仰角
    // let pitch = Cesium.Math.toDegrees(viewer.camera.pitch).toFixed(2);
    // // 翻滚角
    // let roll = Cesium.Math.toDegrees(viewer.camera.roll).toFixed(2);
    // // 级别
    // let level = 0;
    // let tileRender = viewer.scene._globe._surface._tilesToRender;
    // if (tileRender && tileRender.length > 0) {
    //   level = viewer.scene._globe._surface._tilesToRender[0]._level;
    // }
  });
};
const gridSwitch = () => {
  gridIsshow.value = !gridIsshow.value;
@@ -292,10 +319,11 @@

  left: 128px;
  bottom: 20px;
  width: 596px;

  position: absolute;
  z-index: 30;
  padding-left: 10px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  .earthImage {