月球大数据地理空间分析展示平台-【前端】-月球2期前端
WX
2023-09-15 bf35d6b5a12bf713af95b43be7953b4794610170
src/components/mouseMove.vue
@@ -12,6 +12,9 @@
    <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>
@@ -22,6 +25,7 @@
</template>
<script lang="ts" setup>
import InitMap from "@/assets/js/Map";
import {
  ref,
  onMounted,
@@ -34,7 +38,7 @@
const latitude = ref("0.00");
const rate = ref("0.00");
const alt = ref("0.00");
const alheight = ref("0.00");
const altHeight = ref("0.00");
let entitiesObj = reactive({
  lonLine: [],
@@ -69,31 +73,12 @@
      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);
@@ -103,36 +88,41 @@
      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;
    // }
    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);
    rate.value = geodesic.surfaceDistance.toFixed(2); //分辨率
  });
};
const gridSwitch = () => {
  gridIsshow.value = !gridIsshow.value;
  if (gridIsshow.value) {
    grid(10);
    // getHeight();
    // createPrimitives();
  } else {
    gridDel();
  }
  InitMap.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);
@@ -169,7 +159,7 @@
  //     ])
  //   );
  // }
  // console.log(ps);
  // let polylineGeometry = new Cesium.PolylineGeometry({
  //   positions: ps,
  //   width: 5,
@@ -194,16 +184,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";
@@ -251,7 +231,7 @@
    if (lat === 0) {
      text = "";
    }
    // console.log(lat, "---lat");
    let obj = entities.add({
      position: Cesium.Cartesian3.fromDegrees(0, lat),
      polyline: {
@@ -282,7 +262,7 @@
    });
    entitiesObj.latLine.push(obj);
  }
  console.log(entitiesObj);
  // 抗锯齿
  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    //判断是否支持图像渲染像素化处理