feat: flyVisual

罗广辉

2026-01-21 b4d75c3917bab54f677dab0570ff028c0609a99a

feat: flyVisual

 applications/drone-command/src/components/PlaybackVideo/components/MapContainer.vue

@@ -15,7 +15,7 @@

import PlanarRouteLineList from '@/components/PlanarRouteLineList/PlanarRouteLineList.vue'

import { flyVisual } from '@/utils/cesium/mapUtil'
import { flyVisual } from '@ztzf/utils'

import * as Cesium from 'cesium'
import { PublicCesium } from '@/utils/cesium/publicCesium'

 applications/drone-command/src/components/map-container/mapContainer.vue

@@ -30,7 +30,7 @@
import { Cartesian3, Terrain, Viewer } from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial';
import { flyVisual } from '@/utils/cesium/mapUtil';
import { flyVisual } from '@ztzf/utils';
import * as turf from '@turf/turf';

import { nextTick, onBeforeUnmount, onMounted, onUnmounted } from 'vue';

 applications/drone-command/src/hooks/useRouteLine/useRouteLine.js

@@ -11,7 +11,7 @@
import endPointImg from '@/assets/images/EndPointicon.png'

import { ArrowLineMaterialProperty } from '@/utils/cesium/Material'
import { flyVisual } from '@/utils/cesium/mapUtil'
import { flyVisual } from '@ztzf/utils'

import { useStore } from 'vuex'


 applications/drone-command/src/utils/cesium/DrawPolygon.js

@@ -2,7 +2,8 @@
import * as turf from '@turf/turf'
import { boxTransformScale } from '@/utils/turfFunc'
import { ElMessage } from 'element-plus'
import { flyVisual, getPointPositionsHeight } from '@/utils/cesium/mapUtil'
import { getPointPositionsHeight } from '@/utils/cesium/mapUtil'
import { flyVisual } from '@ztzf/utils'

/**
 * 多边形绘制与编辑工具类

 applications/drone-command/src/utils/cesium/mapUtil.js

@@ -449,67 +449,6 @@
    }
}

/**
 * 飞到中心点并且所有点在可视范围
 *  @param positionsData 二维数组，每项为 [lon, lat] 或 三维数组 [lon, lat, height]
 *  @param viewer Cesium.Viewer 实例
 *  @param multiple 缩放倍数-默认为4
 *  @param pitch 俯仰角-默认为-90
 */
export function flyVisual({ positionsData, viewer, multiple = 4, pitch = -90 }) {
    if (!Array.isArray(positionsData) || positionsData.length === 0) return

    // 如果是一个点，加两个点方便后续生成外包围盒
    if (positionsData.length === 1) {
        const [lon, lat, height = 0] = positionsData[0]
        positionsData = [
            [lon + 0.001, lat + 0.001, height],
            [lon - 0.001, lat - 0.001, height],
            [lon, lat, height],
        ]
    }
    const positions = positionsData.map(([lon, lat, height = 0]) =>
        Cesium.Cartesian3.fromDegrees(Number(lon), Number(lat), Number(height || 0))
    )

    // 计算最高高度和中心点经纬度
    let maxHeight = -Infinity
    let sumLon = 0,
        sumLat = 0
    for (const [lon, lat, height] of positionsData) {
        sumLon += Number(lon)
        sumLat += Number(lat)
        maxHeight = Math.max(maxHeight, Number(height || 0))
    }
    const centerLon = sumLon / positionsData.length
    const centerLat = sumLat / positionsData.length
    const boundingSphere = Cesium.BoundingSphere.fromPoints(positions)
    // 暂时飞向 BoundingSphere
    viewer.camera.flyToBoundingSphere(Cesium.BoundingSphere.fromPoints(positions), {
        duration: 0,
        offset: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(pitch),
            range: boundingSphere.radius * multiple,
        },
        complete: () => {
            // 飞行完成后检查相机高度是否小于最高点
            const cameraHeight = Cesium.Cartographic.fromCartesian(viewer.camera.position).height
            if (cameraHeight < maxHeight) {
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(centerLon, centerLat, maxHeight + 100), // 加100米缓冲
                    duration: 1.5,
                    orientation: {
                        heading: viewer.camera.heading,
                        pitch: viewer.camera.pitch,
                        roll: viewer.camera.roll,
                    },
                })
            }
        },
    })
}

// 获取视口地图中心点
export function getMapCenterPoint(viewer) {
    const centerResult = viewer.camera.pickEllipsoid(

 applications/drone-command/src/views/job/components/DeviceJobDetailsMap.vue

@@ -2,7 +2,7 @@
    <div id="deviceJobDetailsMap" class="command-cesium"></div>
</template>
<script setup>
import { flyVisual } from '@/utils/cesium/mapUtil'
import { flyVisual } from '@ztzf/utils'
import _ from 'lodash'

import * as Cesium from 'cesium'

 applications/drone-command/src/views/layerManagement/index.vue

@@ -57,7 +57,7 @@
import { dataFolderApi } from '@/api/layer/index';
import folderFile from '@/views/layerManagement/components/folderFile.vue';
import { parseGeoDataToPositions } from '@/utils/geoParseUtil';
import { flyVisual } from '@/utils/cesium/mapUtil';
import { flyVisual } from '@ztzf/utils';
import rightEdit from '@/views/layerManagement/components/rightEdit.vue';
import leftList from '@/views/layerManagement/components/leftList.vue';
import { DrawPolygon } from '@/views/layerManagement/components/utils';

 applications/drone-command/src/views/monitor/log/flightLog.vue

@@ -123,7 +123,7 @@
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import {Delete, Refresh, Search} from '@element-plus/icons-vue';
import { ArrowLineMaterialProperty } from '@/utils/cesium/Material'
import { flyVisual } from '@/utils/cesium/mapUtil'
import { flyVisual } from '@ztzf/utils'
import rwqfdImg from '@/assets/images/signMachineNest/rwqfd.png'
import endPointImg from '@/assets/images/EndPointicon.png'
import { nextTick } from 'vue';

 applications/drone-command/src/views/recordManage/historyTracks/TrajectoryDiaLog.vue

@@ -71,7 +71,7 @@
import { fwDroneFlightRecordDetailPageApi } from '@/views/recordManage/historyTracks/flyTrajectory'
import { PublicCesium } from '@/utils/cesium/publicCesium'
import * as Cesium from 'cesium'
import { flyVisual } from '@/utils/cesium/mapUtil'
import { flyVisual } from '@ztzf/utils'
import { ArrowLineMaterialProperty } from '@/utils/cesium/Material'
import droneIcon from '@/assets/images/dataCockpit/map/drone.png'


 applications/drone-command/src/views/resource/components/spotDetails.vue

@@ -141,7 +141,7 @@
</template>

<script setup>
import { flyVisual } from '@/utils/cesium/mapUtil'
import { flyVisual } from '@ztzf/utils'
import { pxToRem, pxToRemNum } from '@/utils/rem'
import DrawPolygon from '@/views/resource/components/DrawPolygon.vue';
import { ElMessage, ElMessageBox } from 'element-plus';

 applications/task-work-order/src/components/PlaybackVideo/components/MapContainer.vue

@@ -15,7 +15,7 @@

import PlanarRouteLineList from '@/components/PlanarRouteLineList/PlanarRouteLineList.vue'

import { flyVisual } from '@/utils/cesium/mapUtil'
import { flyVisual } from '@ztzf/utils'

import * as Cesium from 'cesium'
import { PublicCesium } from '@/utils/cesium/publicCesium'

 applications/task-work-order/src/components/map-container/mapContainer.vue

@@ -30,7 +30,7 @@
import { Cartesian3, Terrain, Viewer } from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial';
import { flyVisual } from '@/utils/cesium/mapUtil';
import { flyVisual } from '@ztzf/utils';
import * as turf from '@turf/turf';

import { nextTick, onBeforeUnmount, onMounted, onUnmounted } from 'vue';

 applications/task-work-order/src/hooks/useRouteLine/useRouteLine.js

@@ -11,7 +11,7 @@
import endPointImg from '@/assets/images/EndPointicon.png'

import { ArrowLineMaterialProperty } from '@/utils/cesium/Material'
import { flyVisual } from '@/utils/cesium/mapUtil'
import { flyVisual } from '@ztzf/utils'

import { useStore } from 'vuex'


 applications/task-work-order/src/utils/cesium/DrawPolygon.js

@@ -2,7 +2,8 @@
import * as turf from '@turf/turf'
import { boxTransformScale } from '@/utils/turfFunc'
import { ElMessage } from 'element-plus'
import { flyVisual, getPointPositionsHeight } from '@/utils/cesium/mapUtil'
import { getPointPositionsHeight } from '@/utils/cesium/mapUtil'
import { flyVisual } from '@ztzf/utils'

/**
 * 多边形绘制与编辑工具类

 applications/task-work-order/src/utils/cesium/mapUtil.js

@@ -449,66 +449,7 @@
    }
}

/**
 * 飞到中心点并且所有点在可视范围
 *  @param positionsData 二维数组，每项为 [lon, lat] 或 三维数组 [lon, lat, height]
 *  @param viewer Cesium.Viewer 实例
 *  @param multiple 缩放倍数-默认为4
 *  @param pitch 俯仰角-默认为-90
 */
export function flyVisual({ positionsData, viewer, multiple = 4, pitch = -90 }) {
    if (!Array.isArray(positionsData) || positionsData.length === 0) return

    // 如果是一个点，加两个点方便后续生成外包围盒
    if (positionsData.length === 1) {
        const [lon, lat, height = 0] = positionsData[0]
        positionsData = [
            [lon + 0.001, lat + 0.001, height],
            [lon - 0.001, lat - 0.001, height],
            [lon, lat, height],
        ]
    }
    const positions = positionsData.map(([lon, lat, height = 0]) =>
        Cesium.Cartesian3.fromDegrees(Number(lon), Number(lat), Number(height || 0))
    )

    // 计算最高高度和中心点经纬度
    let maxHeight = -Infinity
    let sumLon = 0,
        sumLat = 0
    for (const [lon, lat, height] of positionsData) {
        sumLon += Number(lon)
        sumLat += Number(lat)
        maxHeight = Math.max(maxHeight, Number(height || 0))
    }
    const centerLon = sumLon / positionsData.length
    const centerLat = sumLat / positionsData.length
    const boundingSphere = Cesium.BoundingSphere.fromPoints(positions)
    // 暂时飞向 BoundingSphere
    viewer.camera.flyToBoundingSphere(Cesium.BoundingSphere.fromPoints(positions), {
        duration: 0,
        offset: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(pitch),
            range: boundingSphere.radius * multiple,
        },
        complete: () => {
            // 飞行完成后检查相机高度是否小于最高点
            const cameraHeight = Cesium.Cartographic.fromCartesian(viewer.camera.position).height
            if (cameraHeight < maxHeight) {
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(centerLon, centerLat, maxHeight + 100), // 加100米缓冲
                    duration: 1.5,
                    orientation: {
                        heading: viewer.camera.heading,
                        pitch: viewer.camera.pitch,
                        roll: viewer.camera.roll,
                    },
                })
            }
        },
    })
}

// 获取视口地图中心点
export function getMapCenterPoint(viewer) {

 applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue

@@ -201,7 +201,7 @@
<script setup>
import { computed, ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { dateRangeFormat, fieldRules, geomAnalysis, getDictLabel } from '@ztzf/utils'
import { dateRangeFormat, fieldRules, flyVisual, geomAnalysis, getDictLabel } from '@ztzf/utils'
import {
    gdWorkOrderDetailApi,
    gdWorkOrderFlowListApi,
@@ -403,7 +403,10 @@
            material: Cesium.Color.RED,
        },
    })
    viewer.flyTo(mian, { duration: 0 })
    flyVisual({
        positionsData: pointList.map(i => [i.longitude, i.latitude, i.height || 0]),
        viewer,
    })
}

// 同步关联场景

 applications/task-work-order/src/views/resource/components/spotDetails.vue

@@ -141,7 +141,7 @@
</template>

<script setup>
import { flyVisual } from '@/utils/cesium/mapUtil'
import { flyVisual } from '@ztzf/utils'
import { pxToRem, pxToRemNum } from '@/utils/rem'
import DrawPolygon from '@/views/resource/components/DrawPolygon.vue';
import { ElMessage, ElMessageBox } from 'element-plus';

 packages/utils/map/index.js

@@ -1,16 +1,4 @@
/*
 * @Author       : yuan
 * @Date         : 2025-12-26 11:01:31
 * @LastEditors  : yuan
 * @LastEditTime : 2025-12-31 16:00:54
 * @FilePath     : \packages\utils\map\index.js
 * @Description  : 
 * Copyright 2025 OBKoro1, All Rights Reserved. 
 * 2025-12-26 11:01:31
 */

import * as Cesium from 'cesium'


// 获取正射影像4至点
export function getOrthoImageBoundaryPoints (data) {
@@ -30,3 +18,64 @@
        north
    )
}

/**
 * 飞到中心点并且所有点在可视范围
 *  @param positionsData 二维数组，每项为 [lon, lat] 或 三维数组 [lon, lat, height]
 *  @param viewer Cesium.Viewer 实例
 *  @param multiple 缩放倍数-默认为4
 *  @param pitch 俯仰角-默认为-90
 */
export function flyVisual({ positionsData, viewer, multiple = 4, pitch = -90 }) {
    if (!Array.isArray(positionsData) || positionsData.length === 0) return

    // 如果是一个点，加两个点方便后续生成外包围盒
    if (positionsData.length === 1) {
        const [lon, lat, height = 0] = positionsData[0]
        positionsData = [
            [lon + 0.001, lat + 0.001, height],
            [lon - 0.001, lat - 0.001, height],
            [lon, lat, height],
        ]
    }
    const positions = positionsData.map(([lon, lat, height = 0]) =>
        Cesium.Cartesian3.fromDegrees(Number(lon), Number(lat), Number(height || 0))
    )

    // 计算最高高度和中心点经纬度
    let maxHeight = -Infinity
    let sumLon = 0,
        sumLat = 0
    for (const [lon, lat, height] of positionsData) {
        sumLon += Number(lon)
        sumLat += Number(lat)
        maxHeight = Math.max(maxHeight, Number(height || 0))
    }
    const centerLon = sumLon / positionsData.length
    const centerLat = sumLat / positionsData.length
    const boundingSphere = Cesium.BoundingSphere.fromPoints(positions)
    // 暂时飞向 BoundingSphere
    viewer.camera.flyToBoundingSphere(Cesium.BoundingSphere.fromPoints(positions), {
        duration: 0,
        offset: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(pitch),
            range: boundingSphere.radius * multiple,
        },
        complete: () => {
            // 飞行完成后检查相机高度是否小于最高点
            const cameraHeight = Cesium.Cartographic.fromCartesian(viewer.camera.position).height
            if (cameraHeight < maxHeight) {
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(centerLon, centerLat, maxHeight + 100), // 加100米缓冲
                    duration: 1.5,
                    orientation: {
                        heading: viewer.camera.heading,
                        pitch: viewer.camera.pitch,
                        roll: viewer.camera.roll,
                    },
                })
            }
        },
    })
}