图层管理临时图层，sdk包更新

surprise

2023-10-17 25ad6779e118f2f01e9cda45c67f7b27d55a984a

 src/components/mouseMove.vue

@@ -3,18 +3,30 @@
    class="mouseBox"
    @setMouseMove="setMouseMove"
  >
    <div class="earthImage"></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"> {{ rate }}</div>
    <div class="earthLable"> m/px</div>
    <div
      class="earthImage"
      :class="{ active: gridIsshow }"
      @click="gridSwitch"
    ></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>
</template>

<script lang="ts" setup>
import InitMap from "@/assets/js/Map";
import server from "@/assets/js/Map/server";
import {
  ref,
  onMounted,
@@ -26,6 +38,20 @@
const longitude = ref("0.00");
const latitude = ref("0.00");
const rate = ref("0.00");
const alt = ref("0.00");
const altHeight = ref("0.00");

let entitiesObj = reactive({
  lonLine: [],
  latLine: [],
});
let gridIsshow = ref(false);
let levelArray = [
  0, 40000000, 20000000, 10000000, 5000000, 2000000, 1000000, 500000, 250000,
  200000, 100000, 50000, 17000, 9000, 5000, 2000, 1000, 500, 200, 100, 50, 25,
  10, 0,
];
let heightlevel = "";
const setMouseMove = (res) => {
  let handlerPoint = new SmartEarth.Cesium.ScreenSpaceEventHandler(
    window.Viewer.scene.canvas
@@ -48,35 +74,214 @@
      latitude.value = SmartEarth.Cesium.Math.toDegrees(
        cartographic.latitude
      ).toFixed(6);
      let scene = window.Viewer.scene;
      // 获取画布的大小
      altHeight.value = window.Viewer.scene.globe.getHeight(
        Cesium.Cartographic.fromDegrees(longitude.value, latitude.value, 0)
      );
      if (altHeight.value) {
        altHeight.value = altHeight.value.toFixed(2);
      }
    }
  }, 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 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 ellipsoid = SmartEarth.Cesium.Ellipsoid.MOON200;
    var leftCartographic =
      globe.ellipsoid.cartesianToCartographic(leftPosition);
    var rightCartographic =
      globe.ellipsoid.cartesianToCartographic(rightPosition);
    var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic();

    geodesic.setEndPoints(leftCartographic, rightCartographic, ellipsoid);
    // rate.value = geodesic.surfaceDistance.toFixed(2); //分辨率
  });


   Viewer.scene.postRender.addEventListener(() => {
      // // 获取画布的大小
      let scene = earthCtrl.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 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)) {
      var leftPosition = scene.globe.pick(left, scene);
      var rightPosition = scene.globe.pick(right, scene);
      if (!SmartEarth.Cesium.defined(leftPosition) || !SmartEarth.Cesium.defined(rightPosition)) {
        return;
      }
      const ellipsoid = SmartEarth.Cesium.Ellipsoid.MOON2000
      var leftCartographic = ellipsoid.cartesianToCartographic(leftPosition);
      var rightCartographic = ellipsoid.cartesianToCartographic(rightPosition);
      var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic(leftCartographic, rightCartographic, ellipsoid);
      var distance = geodesic.surfaceDistance;// 分辨率
      rate.value =distance.toFixed(2); //分辨率
    })
};
const gridSwitch = () => {
  server.showlonlatLine();
};
const getHeight = () => {
  let removeListener = Viewer.camera.changed.addEventListener(() => {
    // 当前高度
    let height = Viewer.camera.positionCartographic.height;
    heightlevel = getLevel(height);

      var leftCartographic =
        globe.ellipsoid.cartesianToCartographic(leftPosition);
      var rightCartographic =
        globe.ellipsoid.cartesianToCartographic(rightPosition);
      var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic();
      geodesic.setEndPoints(leftCartographic, rightCartographic);
      rate.value = geodesic.surfaceDistance.toFixed(6); //分辨率
    if (heightlevel == 6) {
      gridDel();
      grid(5);
    }
  }, SmartEarth.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    // if (heightlevel <= 6) {
    //   gridDel();
    //   grid(10);
    // }
    if (heightlevel == 8) {
      gridDel();
      grid(1);
    }
  });
};
const getLevel = (height) => {
  for (var i = 1, len = levelArray.length; i < len - 1; i++) {
    if (height >= (levelArray[i] + levelArray[i + 1]) / 2) {
      return i;
    }
  }
  return levelArray.length - 1;
};
const createPrimitives = (degree) => {
  var GridImagery = new Cesium.GridImageryProvider();
  var imageryLayers = Viewer.imageryLayers;
  var GridImageryLayer = imageryLayers.addImageryProvider(GridImagery); // 添加网格图层
  imageryLayers.raiseToTop(GridImageryLayer); // 将网格图层置顶
};
const grid = (degree) => {
  const entities = Viewer.entities;
  for (let longitude = -180; longitude <= 180; longitude += degree) {
    let text = "";
    if (longitude === 0) {
      text = "0";
    }
    text += longitude === 0 ? "" : "" + longitude + "°";
    if (longitude === -180) {
      text = "";
    }
    let obj = entities.add({
      position: Cesium.Cartesian3.fromDegrees(longitude, 0),
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
          longitude,
          -90,
          longitude,
          0,
          longitude,
          90,
        ]),
        width: 4.0,
        material: new Cesium.Color.fromCssColorString("#c8b284"),
        clampToGround: true, //开启贴地
      },
      label: {
        text: text,
        verticalOrigin: Cesium.VerticalOrigin.LEFT,
        font: "16px sans-serif",
        fillColor: new Cesium.Color.fromCssColorString("#000"),
        outlineWidth: "6px sans-serif", // 字体外圈线宽度（同样也有颜色可设置）
        outlineColor: new Cesium.Color.fromCssColorString("#000"),
        // 这里设置了就不会被遮盖了，设为负值则在更上层
        eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
      },
    });
    entitiesObj.lonLine.push(obj);
  }
  let langS = [];
  for (let longitude = -180; longitude <= 180; longitude += 5) {
    langS.push(longitude);
  }
  //每隔10读绘制一条纬度线和纬度标注,自己控制间隔
  for (let lat = -80; lat <= 80; lat += degree) {
    let text = "";
    text += "" + lat + "°";
    if (lat === 0) {
      text = "";
    }

    let obj = entities.add({
      position: Cesium.Cartesian3.fromDegrees(0, lat),
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray(
          langS
            .map((long) => {
              return [long, lat].join(",");
            })
            .join(",")
            .split(",")
            .map((item) => Number(item))
        ),
        width: 4.0,
        material: new Cesium.Color.fromCssColorString("#c8b284"),
        clampToGround: true, //开启贴地
      },
      label: {
        text: text,
        font: "18px sans-serif",
        fillColor: new Cesium.Color.fromCssColorString("#000"),
        outlineWidth: 6, // 字体外圈线宽度（同样也有颜色可设置）
        outlineColor: new Cesium.Color.fromCssColorString("#000"),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直位置
        pixelOffset: new Cesium.Cartesian2(0, 15), // 中心位置
        // 这里设置了就不会被遮盖了，设为负值则在更上层
        eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
      },
    });
    entitiesObj.latLine.push(obj);
  }

  // 抗锯齿
  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    //判断是否支持图像渲染像素化处理
    Viewer.resolutionScale = window.devicePixelRatio;
  }
  //开启抗锯齿
  Viewer.scene.fxaa = true;
  Viewer.scene.postProcessStages.fxaa.enabled = true;
};
const gridDel = () => {
  if (entitiesObj.lonLine.length > 0) {
    entitiesObj.lonLine.forEach((e) => {
      Viewer.entities.remove(e);
    });
    entitiesObj.lonLine = [];
  }
  if (entitiesObj.latLine.length > 0) {
    entitiesObj.latLine.forEach((e) => {
      Viewer.entities.remove(e);
    });
    entitiesObj.latLine = [];
  }
};
onMounted(() => {
  window.setMouseMove = setMouseMove;
@@ -89,12 +294,13 @@
  height: 47px;
  background: rgba(1, 0, 28, 0.3);

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

  position: absolute;
  z-index: 40;
  z-index: 30;
  padding-left: 10px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  .earthImage {
@@ -103,6 +309,7 @@
    background: url("../assets/img/形状 9.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 10px;
    cursor: pointer;
  }
  .earthLable {
    font-size: 16px;
@@ -112,5 +319,11 @@
    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>