feat: 播放按钮居中

罗广辉

8 hours ago ad57696cef86a678512e93207bc5538d30bc40ee

 applications/drone-command/src/views/detectionCountermeasure/detectionRange/DetectionRangeDialog.vue

@@ -17,6 +17,7 @@
               :terrain="true"
               :layer-mode="4"
               :boundary="false"
               :zoom-to-boundary="dialogMode === 'add'"
            />
         </div>

@@ -167,7 +168,7 @@
const formRef = ref(null) // 表单实例
const formData = ref(initForm()) // 表单数据
const visible = defineModel() // 弹框显隐
const dialogMode = ref('add') // 弹框模式
const dialogMode = ref('') // 弹框模式
const submitting = ref(false) // 提交中
const deviceOptions = ref([])
const dialogReadonly = computed(() => dialogMode.value === 'view')
@@ -310,6 +311,7 @@
            width: 40,
            height: 56,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 设置图片底部对齐坐标点
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
         },
         label: {
            text: `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`,
@@ -324,7 +326,7 @@
            outlineWidth: 1,
            outlineColor: Cesium.Color.WHITE,
            pixelOffset: new Cesium.Cartesian2(0, -72),
            eyeOffset: new Cesium.Cartesian3(0, 0, -20),
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
         },
      })
   } else {
@@ -332,6 +334,31 @@
      redPointEntity.label.text = `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`
   }
   updateRangeCircle(longitude, latitude, formData.value.effectiveRangeKm)
}

function flyToRange(longitude, latitude, range) {
   if (!viewer || longitude == null || latitude == null) return
   const rangeMeters = Number(range)
   if (Number.isFinite(rangeMeters) && rangeMeters > 0) {
      const center = Cesium.Cartesian3.fromDegrees(longitude, latitude)
      const radius = Math.max(rangeMeters, 1000)
      const sphere = new Cesium.BoundingSphere(center, radius)

      viewer.camera.flyToBoundingSphere(sphere, {
         duration: 0,
         offset: new Cesium.HeadingPitchRange(viewer.camera.heading, Cesium.Math.toRadians(-90), radius * 1.8),
      })
      return
   }
   viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, 2000),
      orientation: {
         heading: viewer.camera.heading,
         pitch: Cesium.Math.toRadians(-65),
         roll: 0,
      },
      duration: 0,
   })
}

function parseDeployLocation(value) {
@@ -365,7 +392,7 @@
            material: Cesium.Color.fromCssColorString('#6b9ca8').withAlpha(0.6),
            outline: true,
            outlineColor: Cesium.Color.fromCssColorString('#6b9ca8').withAlpha(0.6),
            heightReference: Cesium.HeightReference.NONE,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
         },
      })
      return
@@ -411,7 +438,9 @@

function handleMapClick(click) {
   const pos = click.position
   const cartesian3 = viewer.camera.pickEllipsoid(pos, viewer.scene.globe.ellipsoid)
   const ray = viewer.camera.getPickRay(pos)
   if (!ray) return
   const cartesian3 = viewer.scene.globe.pick(ray, viewer.scene)
   if (!cartesian3) return
   const carto = Cesium.Cartographic.fromCartesian(cartesian3)
   const longitude = Number(Cesium.Math.toDegrees(carto.longitude).toFixed(6))
@@ -427,6 +456,8 @@
   await nextTick()
   initMap()
   if (dialogMode.value === 'add') {
      mapRef.value?.zoomToAdminBoundary?.()

      await loadDeviceOptions()
      formData.value = initForm()
      return
@@ -449,7 +480,8 @@
      const parsed = parseDeployLocation(location)
      if (parsed) {
         setMapPoint(parsed.longitude, parsed.latitude)
         viewer.flyTo(redPointEntity, { duration: 0 })

         flyToRange(parsed.longitude, parsed.latitude, formData.value.effectiveRangeKm)
      }
   }
}