如何实现cesium 分屏的功能（vue3+cesium）

实现的效果如下

第一步来定义我们的地图样式

  


        


        layerValue 表示要分成几个屏

            


                经纬度表示我们划过屏幕可以显示我们当前屏幕的经纬度信息
                
                

                    {{ item.longitude }}, 
                    {{ item.latitude }}
                
            
        
    

第二步来初始化地图实现地图的展示、记录鼠标移入地图

let radioValue=4;表示我们要将生成几张地图

function initMap() {

    for (let i = 0; i < radioValue; i++) {

        let viewerScreen = new Cesium.Viewer('screenCesiumContainer' + i, {
            animation: false, //动画
            homeButton: false, //home键
            geocoder: false, //地址编码
            baseLayerPicker: false, //图层选择控件
            timeline: false, //时间轴
            fullscreenButton: false, //全屏显示
            infoBox: false, //点击要素之后浮窗
            sceneModePicker: false, //投影方式  三维/二维
            sceneMode: Cesium.SceneMode.SCENE2D, //初始场景模式 为二维
            navigationInstructionsInitiallyVisible: false, //导航指令
            navigationHelpButton: false, //帮助信息
            selectionIndicator: false, // 选择
            orderIndependentTranslucency: false, // orderIndependentTranslucency需要设置为true，才能去掉地球表面的大气效果的黑圈问题
            contextOptions: {
                webgl: {
                    alpha: true,
                },
            },
        })

        viewerScreen._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion
        viewerScreen.scene.morphTo2D(0)

        将地图定位到地图的位置和高度
        viewerScreen.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(111.73, 27.8, radioValue == 2 ? 1200000 : 1700000),
        })

        viewerScreen.scene.skyBox.show = false
        viewerScreen.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0)
        //设置球体背景色
        viewerScreen.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0)
        // 先把所有的影像图层的透明度设置为0
        // viewerScreen.imageryLayers._layers.forEach((layer) => {
        //     // layer.alpha = 0.0;
        //     viewerScreen.imageryLayers.remove(layer)
        // })
        // 保存云瑶的图层indexs
        // layerValue.value[i].YyImgList.push(addYyImgEvery(viewerScreen, layerValue.value[i].YyImg), 0)

             
          用来保存地图的值
        layerValue.value[i].viewerScreen = viewerScreen
            

      
    }
}

 

第三步实现鼠标划过记录当前的地图的经纬度信息

1. 给地图添加 handleMouseEnter 方法 记录当前鼠标进入了哪个地图

2. 计算当前鼠标的经纬度信息并更新

给地图添加 handleMouseEnter 方法 记录当前鼠标进入了哪个地图



                

                    
                


这个方法在初始化中存放
moveLonLatFn(viewerScreen, i)

//计算并保存经纬度信息
function moveLonLatFn(viewerScreen, i) {
    new Cesium.ScreenSpaceEventHandler(viewerScreen.scene.canvas).setInputAction(function (movement) {
        const res = getLatLon(movement)
        layerValue.value[i].longitude = res.longitude
        layerValue.value[i].latitude = res.latitude
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
}



let currentView = null
let currentIndex = undefined
// 鼠标移入
function handleMouseEnter(item, index) {
    currentView = item.viewerScreen
    currentIndex = index
}

 

 

第四步实现随便一个地图拖拽另外3个地图跟随移动

   给地图添加事件
   viewerScreen.camera.changed.addEventListener(handleMapChange)
   viewerScreen.scene.preRender.addEventListener(handleMapChange)

// 监听地图变化 跟随移动的方法
function handleMapChange() {
    if (!currentView) return
    const destination = Cesium.Cartographic.toCartesian(currentView.camera.positionCartographic)
    layerValue.value.forEach((item, index) => {
        if (index != currentIndex) {
            item.viewerScreen.camera.setView({
                destination: new Cesium.Cartesian3(destination.x, destination.y, destination.z),
                orientation: {
                    direction: currentView.scene.camera._direction,
                    up: currentView.scene.camera.up,
                    heading: currentView.scene.camera.heading,
                    pitch: currentView.scene.camera.pitch,
                    roll: currentView.scene.camera.roll,
                },
            })
        }
    })
}

全部代码