模板增加计算两个点距离

jihongshun

2025-08-08 f79670d51e41f1e762762c73e423fb658556102b

 src/utils/components/init-map.vue

@@ -27,11 +27,12 @@
    </div>

      <!-- 左下角倍率信息 -->
      <div class="zoom-info">
        <el-tag type="success">倍率: {{ zoomRatio.toFixed(1) }}X</el-tag>
      </div>
      
    </div>

    <div class="zoom-info">
      <el-tag type="success">倍率: {{ zoomRatio.toFixed(1) }}X</el-tag>
      <el-tag type="success">距离: {{ betweenDistance.toFixed(1) }}米</el-tag>
    </div>
    
    
    <!-- botton -->
@@ -125,7 +126,7 @@
// let  pois = [0, 0,0] 
let holdingPosition;
let rightKeyMove = false
let  distance = 100; 
let  distance = 25; 
export default {
  props: {
    towerUrl: {
@@ -133,6 +134,9 @@
      default() {
        return ''
      }
    },
    deviceData: {
      type: Object,
    },
  },
  data(){
@@ -169,11 +173,13 @@
          14: '14X',
          28: '28X',
          56: '56X'
        }
        },
        betweenDistance:0
    }
  },
  mounted(){
     this.initCesium();
     console.log(this.deviceData)
  },
  computed: {
    boxWidth() {
@@ -381,8 +387,18 @@
                    "latitude": Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).latitude),
                    "longitude":  Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).longitude),
                }
                const lookPoint = Cesium.Cartesian3.fromDegrees(longitude, latitude)
                const watchPoint = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).longitude), Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).latitude))
                const betweenDistanceWatch = Cesium.Cartesian3.distance(lookPoint, watchPoint)
                _this.betweenDistance = betweenDistanceWatch
                console.log(lookPoint)
                console.log(watchPoint)
                // const guanPoint1 = Cesium.Cartesian3.fromDegrees(longitude, latitude)
                console.log(viewerM.entities.getById('groundPoiId0'))
                //塔的距离和观测点的距离
                const point1 = Cesium.Cartesian3.fromDegrees(0, 0, 50);
                console.log(_this.deviceData)
                const point1 = Cesium.Cartesian3.fromDegrees(0, 0, _this.deviceData?.modelHeight || 45);
                // const point1 = Cesium.Cartesian3.fromDegrees(0, 0, 45);
                const point2 = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).longitude), Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(tagert).latitude), Cesium.Cartographic.fromCartesian(tagert).height);

                // 计算距离（单位：米）
@@ -527,6 +543,19 @@
        } else {
          groupEntity.position = position;
        }
        //计算两个点距离
        console.log(viewerM.entities)
           const groupEntityGround = viewerM.entities.getById("groundPoiId"+(counter-1));
           const groupPosition  = groupEntityGround.position.getValue(Cesium.JulianDate.now());
           if (groupPosition) {
              const cartographic = Cesium.Cartographic.fromCartesian(groupPosition);
              const longitude = Cesium.Math.toDegrees(cartographic.longitude);
              const latitude = Cesium.Math.toDegrees(cartographic.latitude);
              const point1 = Cesium.Cartesian3.fromDegrees(lon, lat);
              const point2 = Cesium.Cartesian3.fromDegrees(longitude, latitude);
              const gure = Cesium.Cartesian3.distance(point1, point2)
              this.betweenDistance  = gure
          }
      }
      const key = event.key;
      const lower = key.toLowerCase();
@@ -896,7 +925,7 @@
      const heading = Cesium.Math.toDegrees(camera.heading);
      const pitch = Cesium.Math.toDegrees(camera.pitch);
      const roll = Cesium.Math.toDegrees(camera.roll);
      const point1 = Cesium.Cartesian3.fromDegrees(0, 0, 50);
      const point1 = Cesium.Cartesian3.fromDegrees(0, 0, this.deviceData?.modelHeight || 45);
      const point2 = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(position.longitude),Cesium.Math.toDegrees(position.latitude),position.height)
      
      var camResult =
@@ -1107,8 +1136,8 @@
/* 左下角倍率标签 */
.zoom-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  bottom: 35px;
  left: 340px;
}

</style>