cesium 实战记录（六）地图通用工具方法的封装

目录

1、放大

2、缩小

3、回归初始位置

4、全屏

5、前一视图和后一视图

---

地图通用工具：包括放大、缩小、二三维切换、回归初始位置、前一视图、后一视图等等

老规矩看下效果：...

这有啥好看的，直接看封装的方法 js的大体样子吧，如下：

1、放大

/**
 * 放大
 * @param viewer
 */
const zoomIn = (viewer)=>{
    let position = viewer.camera.position;
    let cameraHeight = viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;
    // 每次放大 10 倍，参数可改
    let moveRate = cameraHeight / 10.0;
    viewer.camera.moveForward(moveRate);
}

2、缩小

/**
 * 缩小
 * @param viewer
 */
const zoomOut =(viewer)=>{
    let position = viewer.camera.position;
    let cameraHeight = viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;
    // 每次缩小 10 倍，参数可改
    let moveRate = cameraHeight / 10.0;
    viewer.camera.moveBackward(moveRate);
}

3、回归初始位置

//3D初始位置
const originLocation3D ={
    destination: Cesium.Cartesian3.fromDegrees(117.28, 31.86, 100000.0)
}

/**
 * 回到初始位置
 * @param viewer
 */
const goHome = (viewer)=>{
    viewer.camera.flyTo(originLocation3D,{
        duration:1000
    })
}

4、全屏

/**
 * 全屏
 * @param viewer
 * @param domId
 */
const fullScreen = (viewer,domId)=>{
    // Cesium.Fullscreen.requestFullscreen(document.getElementById('domId'));
    //或 按需
    Cesium.Fullscreen.requestFullscreen(viewer.scene.canvas)
}

5、前一视图和后一视图

let viewPosition=[];
let viewIndex = -1;
let addviewPositionFlag = false;
let _is3D=true;


/**
 * 初始化地图移动监听事件
 * @param viewer
 */
const initWatchMoveEvent=(viewer)=>{
    viewer.camera.moveEnd.addEventListener(()=>{
        if(!addviewPositionFlag){
            if(_is3D){
                viewPosition.push({
                    destination:new Cesium.Cartesian3(
                        Number(viewer.camera.position.x),
                        Number(viewer.camera.position.y),
                        Number(viewer.camera.position.z)
                    ),
                    orientation:{
                        heading : viewer.scene.camera.heading,
                        pitch :viewer.scene.camera.pitch,
                        roll :viewer.scene.camera.roll
                    }
                })
            }else{
                let cp = viewer.camera.positionCartographic;
                viewPosition.push({
                    destination:new Cesium.Cartesian3.fromDegrees(
                        Cesium.Math.toDegrees(cp.longitude).toFixed(6),
                        Cesium.Math.toDegrees(cp.latitude).toFixed(6),
                        cp.height
                    ),
                })
            }
            viewIndex++;
        }
        addviewPositionFlag=false;
    })
}


/**
 * 返回上一视图
 * @param viewer
 */
const previousView =(viewer)=>{
    if (viewIndex != 0) {
        viewer.camera.flyTo(
            viewPosition[viewIndex-1]
        )
        addviewPositionFlag = true;
        viewIndex--;
    }
}


/**
 * 返回下一视图
 * @param viewer
 */
const nextView =(viewer)=>{
    if (viewPosition.length == 0) {
        return;
    }
    if (viewIndex != viewPosition.length - 1) {
        viewer.camera.flyTo(
            viewPosition[viewIndex + 1]
        )
        addviewPositionFlag = true;
        viewIndex++;
    }
}


/**
 * 重置
 */
const _resetWatchEvent=()=>{
    viewPosition = [];
    viewIndex = -1;
    addviewPositionFlag = false;
}

页面调用：

初始化viewer 后 首先调用

//监听移动事件 
​​​​​​​initWatchMoveEvent(viewer);

tips：我这方法适用于进入地图一开始就设置了初始位置的（即默认不是整个球的），如果你没设置初始位置，则需要部分修改，否则会移动2次以上才会生效