版本更新，阴影分析，等高线添加

surprise

2023-10-23 538d7313f98da3c304365f1c2b22c3e23d91db35

 src/components/mouseMove.vue

@@ -1,14 +1,16 @@
<template>
  <div class="mouseBox" @setMouseMove="setMouseMove">
    <div
      class="earthImage"
      :class="{ active: gridIsshow }"
      @click="gridSwitch"
    ></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>
@@ -16,6 +18,8 @@
</template>

<script lang="ts" setup>
import InitMap from "@/assets/js/Map";
import server from "@/assets/js/Map/server";
import {
  ref,
  onMounted,
@@ -27,6 +31,9 @@
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: [],
@@ -42,13 +49,15 @@
  let handlerPoint = new SmartEarth.Cesium.ScreenSpaceEventHandler(
    window.Viewer.scene.canvas
  );
  const pickGlobeSlope = new SmartEarth.Cesium.PickGlobeSlope(earthCtrl.Viewer)
  var ellipsoid = window.Viewer.scene.globe.ellipsoid;
  handlerPoint.setInputAction(function (movement) {
  handlerPoint.setInputAction((movement) => {
    //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
    var cartesian = window.Viewer.camera.pickEllipsoid(
      movement.endPosition,
      ellipsoid
    );
   
    if (cartesian) {
      //将笛卡尔三维坐标转为地图坐标（弧度）
      var cartographic =
@@ -60,52 +69,82 @@
      latitude.value = SmartEarth.Cesium.Math.toDegrees(
        cartographic.latitude
      ).toFixed(6);
      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)
      altHeight.value = window.Viewer.scene.globe.getHeight(
        Cesium.Cartographic.fromDegrees(longitude.value, latitude.value, 0)
      );
      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;
      if (altHeight.value) {
        altHeight.value = altHeight.value.toFixed(2);
      }

      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); //分辨率
    }
  }, 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 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 = () => {
  gridIsshow.value = !gridIsshow.value;
  if (gridIsshow.value) {
    grid(10);
    // getHeight();
    // createPrimitives();
  } else {
    gridDel();
  }
  server.showlonlatLine();
};
const getHeight = () => {
  let removeListener = Viewer.camera.changed.addEventListener(() => {
    // 当前高度
    let height = Viewer.camera.positionCartographic.height;
    heightlevel = getLevel(height);
    console.log(heightlevel);

    if (heightlevel == 6) {
      gridDel();
      grid(5);
@@ -129,36 +168,6 @@
  return levelArray.length - 1;
};
const createPrimitives = (degree) => {
  // let ps = [];
  // for (let longitude = -180; longitude <= 180; longitude += 10) {
  //   ps.push(
  //     Cesium.Cartesian3.fromDegreesArray([
  //       longitude,
  //       -90,
  //       longitude,
  //       0,
  //       longitude,
  //       90,
  //     ])
  //   );
  // }
  // console.log(ps);
  // let polylineGeometry = new Cesium.PolylineGeometry({
  //   positions: ps,
  //   width: 5,
  //   id: "polylineGeometry",
  // });
  // Viewer.scene.primitives.add(
  //   new Cesium.Primitive({
  //     geometryInstances: new Cesium.GeometryInstance({
  //       geometry: polylineGeometry,
  //     }),
  //     // vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
  //     appearance: new Cesium.EllipsoidSurfaceAppearance({
  //       material: Cesium.Material.fromType("Stripe"),
  //     }),
  //   })
  // );
  var GridImagery = new Cesium.GridImageryProvider();
  var imageryLayers = Viewer.imageryLayers;
  var GridImageryLayer = imageryLayers.addImageryProvider(GridImagery); // 添加网格图层
@@ -167,16 +176,6 @@
const grid = (degree) => {
  const entities = Viewer.entities;
  for (let longitude = -180; longitude <= 180; longitude += degree) {
    console.log(
      Cesium.Cartesian3.fromDegreesArray([
        longitude,
        -90,
        longitude,
        0,
        longitude,
        90,
      ])
    );
    let text = "";
    if (longitude === 0) {
      text = "0";
@@ -224,7 +223,7 @@
    if (lat === 0) {
      text = "";
    }
    // console.log(lat, "---lat");

    let obj = entities.add({
      position: Cesium.Cartesian3.fromDegrees(0, lat),
      polyline: {
@@ -255,7 +254,7 @@
    });
    entitiesObj.latLine.push(obj);
  }
  console.log(entitiesObj);

  // 抗锯齿
  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    //判断是否支持图像渲染像素化处理
@@ -287,17 +286,19 @@

<style lang="less" scoped>
.mouseBox {
  height: 47px;
  height: 30px;
  background: rgba(1, 0, 28, 0.3);

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

  position: absolute;
  z-index: 30;
  padding-left: 10px;
  padding-left: 5px;
  padding-right: 10px;
  display: flex;
  align-items: center;

  .earthImage {
    width: 20px;
    height: 20px;
@@ -306,14 +307,16 @@
    margin-left: 10px;
    cursor: pointer;
  }

  .earthLable {
    font-size: 16px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    color: rgba(214, 228, 255, 0.8);
    line-height: 5px;
    margin-left: 10px;
    margin-left: 5px;
  }

  .active {
    background-color: #171e2e;
    border: 1px solid;