代码更新

surprise

2024-03-01 12075d0fa73d963ff5d6dbc4727fb95fb6084961

 src/components/mouseMove.vue

@@ -1,13 +1,6 @@
<template>
  <div
    class="mouseBox"
    @setMouseMove="setMouseMove"
  >
    <div
      class="earthImage"
      :class="{ active: gridIsshow }"
      @click="gridSwitch"
    ></div>
  <div class="mouseBox" @setMouseMove="setMouseMove">
    <div class="earthImage" :class="{ active: gridIsshow }" @click="gridSwitch"></div>
    <div class="earthLable">经度 :</div>
    <div class="earthLable">{{ longitude }}</div>
    <div class="earthLable">纬度 :</div>
@@ -56,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 =
@@ -117,30 +112,66 @@
    geodesic.setEndPoints(leftCartographic, rightCartographic, ellipsoid);
    // rate.value = geodesic.surfaceDistance.toFixed(2); //分辨率
  });
  Viewer.camera.moveEnd.addEventListener(() => {
    const height = Viewer.camera.positionCartographic.height;
    const zoom = getZoomLevel(height)
    rate.value = zoom;
    // console.log('缩放层级是--', zoom)
  })
  const getZoomLevel = (height) => {
    const A = 40487.57;
    const B = 0.00007096758;
    const C = 91610.74;
    const D = -40467.74;
    var obj= Math.round(D + (A - D) / (1 + Math.pow(height / C, B)));
    var fgis = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.00017166137695312, 0.000085830688476562, 0.000042915344238281, 0.000021457672119141, 0.00001072883605957, 0.0000053644180297852, 0.0000026822090148926, 0.0000013411045074463, 0.00000067055225372314, 0.00000033527612686157]
  
    return( fgis[obj]*30318.4).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); //分辨率
    })
  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 dpi = getDPI();
    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 * dpi;// 分辨率
    // rate.value = distance.toFixed(2); //分辨率
  })
};
const getDPI = () => {

  var arrDPI = new Array();
  if (window.screen.deviceXDPI != undefined) {
    arrDPI[0] = window.screen.deviceXDPI;
    arrDPI[1] = window.screen.deviceYDPI;
  }
  else {
    var tmpNode = document.createElement("DIV");
    tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
    document.body.appendChild(tmpNode);
    arrDPI[0] = parseInt(tmpNode.offsetWidth);
    arrDPI[1] = parseInt(tmpNode.offsetHeight);

  }
  return arrDPI[0]

}
const gridSwitch = () => {
  server.showlonlatLine();
};
@@ -291,18 +322,19 @@

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

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

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

  .earthImage {
    width: 20px;
    height: 20px;
@@ -311,14 +343,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;