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

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量1.2k 收藏 7
点赞数 2
分类专栏： cesium 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55766628/article/details/131983028
版权
实现的效果如下

第一步来定义我们的地图样式
  <div class="split-screen-map">

        <div class="screen-map-container">

        layerValue 表示要分成几个屏

            <div v-for="(item, index) in layerValue" :key="index" :id="'screenCesiumContainer' + index" @mouseenter="handleMouseEnter(item, index)"
                class="scereen-map-content">

                经纬度表示我们划过屏幕可以显示我们当前屏幕的经纬度信息
                <!-- 经纬度 -->
                <div class="infoText">
                    <span>{{ item.longitude }}, </span>
                    <span>{{ item.latitude }}</span>
                </div>
            </div>
        </div>
    </div>
<style>
.split-screen-map {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 1999;
    padding: 10px;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
}
.screen-map-container {
    height: calc(100vh - 60px);
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: center;
}
.scereen-map-content {
    border: 1px solid #8d99ff;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-rows: repeat(2, 100%);
    grid-template-columns: repeat(2, 100%);
    position: relative;
}
.infoText {
    padding-left: 10px;
    text-align: left;
    line-height: 26px;
    position: absolute;
    width: 100%;
    height: 26px;
    color: #f00;
    bottom: 60px;
    z-index: 1000;
}

</style>
第二步来初始化地图实现地图的展示、记录鼠标移入地图
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 方法 记录当前鼠标进入了哪个地图


<div v-for="(item, index) in layerValue" :key="index" :id="'screenCesiumContainer' + index"
                class="scereen-map-content" @mouseenter="handleMouseEnter(item, index)">
                <div class="layer-select-class">
                    <!-- <el-select style="min-width: 230px" v-model="item.layerUrlList" @change="handleSelect(item, index)"
                        collapse-tags-tooltip collapse-tags multiple filterable placeholder="请选择">
                        <el-option v-for="val in layerOptions" :key="val.value" :label="val.name" :value="val.value">
                        </el-option>
                    </el-select> -->
                </div>
</div>

这个方法在初始化中存放
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,
                },
            })
        }
    })
}

全部代码
<template>
    <div class="split-screen-map">

        <div class="screen-map-container">
            <div v-for="(item, index) in layerValue" :key="index" :id="'screenCesiumContainer' + index"
                class="scereen-map-content" @mouseenter="handleMouseEnter(item, index)">
                <div class="layer-select-class">
                </div>
                <!-- 经纬度 -->
                <div class="infoText">
                    <span>{{ item.longitude }}, </span>
                    <span>{{ item.latitude }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as Cesium from 'cesium'
let props = defineProps({
    isShowSplitScreen: {
        type: Boolean,
        default: false,
    },
    radioValue: {
        type: Number,
        default: 2,
    },
})
let emit = defineEmits(['update:isShowSplitScreen', 'isShowSplitScreenFn'])
let layerValue = ref([])
watch(
    () => props.radioValue,
    () => {
        layerValue.value = []
        let defaultUrl = layerOptions.map((item) => item.value)[0]
        for (let i = 0; i < props.radioValue; i++) {
            // let indexs = layerMapOptions[0].children[0].children.length - 1
            // console.log(indexs, 'indexs')
            layerValue.value.push({
                layerUrlList: [],
                layerList: [],
                longitude: 112.59,
                latitude: 28.12,
                viewerScreen: null,
                viewEvent: null,
                stairModel: 1123,
                omenModel: 11232,
                // children: layerMapOptions[0].children, //时间轴二级1m列表
                // indexs: indexs, //记录云瑶的最大下标
                YyImg: {}, //云瑶地址信息
                YyImgList: [], //云瑶加过的服务
            })
        }
        nextTick(() => {
            initMap()
        })
    },
    {
        deep: true,
        immediate: true,
    }
)

function initMap() {
    for (let i = 0; i < props.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, props.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)
        layerValue.value[i].viewerScreen = viewerScreen
        //camera监听函数
        viewerScreen.camera.changed.addEventListener(handleMapChange)
        viewerScreen.scene.preRender.addEventListener(handleMapChange)
        //设置触发监听函数的时间
        viewerScreen.camera.percentageChanged = 0.01
        moveLonLatFn(viewerScreen, i)
    }
}
let currentView = null
let currentIndex = undefined
// 鼠标移入
function handleMouseEnter(item, index) {
    currentView = item.viewerScreen
    currentIndex = index
}
// 监听地图变化
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,
                },
            })
        }
    })
}

}
//滑动获取点经纬度
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)
}
// 组件卸载之前销毁地图
onUnmounted(() => {
    if (layerValue.value && layerValue.value.length) {
        layerValue.value.forEach((item) => {
            if (item.viewerScreen) {
                item.viewerScreen.destroy()
                item.viewerScreen = null
            }
        })
    }
})

</script>

<style scoped lang="scss">
.split-screen-map {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 1999;
    padding: 10px;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
}

.switch_time_line {
    position: absolute;
    right: 85px;
    top: 9px;
    display: flex;
    align-items: center;
    font-size: 12px;
}

.close-btn {
    width: 100%;
    text-align: right;
    cursor: pointer;
}

.screen-map-container {
    height: calc(100vh - 60px);
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: center;
}

.scereen-map-content {
    border: 1px solid #8d99ff;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-rows: repeat(2, 100%);
    grid-template-columns: repeat(2, 100%);
    position: relative;
}

.infoText {
    padding-left: 10px;
    text-align: left;
    line-height: 26px;
    position: absolute;
    width: 100%;
    height: 26px;
    color: #f00;
    bottom: 60px;
    z-index: 1000;
}

.scereen-map-content:nth-child(2) {
    margin-left: 5px;
}

.scereen-map-content:nth-child(3) {
    margin-top: 5px;
}

.scereen-map-content:nth-child(4) {
    margin-left: 5px;
    margin-top: 5px;
}

.layer-select-class {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    padding-top: 5px;
    justify-content: space-around;
    align-items: center;
    z-index: 10;
}

.time_line_sceren {
    position: absolute;
    bottom: 1px;
}

// #timeAxisLeft {
//     position: absolute;
//     bottom: 0px;
//     width: 100%;
//     left: 0;
// }
// .timer_shaft {
//     // width: 840px;
//     /* position: absolute; */
//     display: flex;
//     align-items: center;
//     position: relative;
//     bottom: 1px;
//     z-index: 999;
//     height: 66px;
//     background: #eee;
//     border-radius: 5px;
//     opacity: 0.9;
//     .select-type {
//         // position: absolute;
//         // top: 20px;
//         // left: 15px;
//         display: flex;
//     }
//     .time_inner {
//         width: calc(100% - 250px);
//         // position: absolute;
//         position: relative;
//         display: flex;
//         margin-left: 3%;
//         margin-bottom: 20px;
//         .time_inner_left {
//             position: absolute;
//             left: -15px;
//             top: -2px;
//             font-size: 24px;
//             cursor: pointer;
//         }
//         .time_inner_right {
//             position: absolute;
//             right: -33px;
//             top: -2px;
//             font-size: 24px;
//             cursor: pointer;
//         }
//         .time_inner_center {
//             height: 20px;
//             margin-left: 10px;
//             display: flex;
//             position: absolute;
//             top: 0;
//             left: 0;
//             justify-content: space-evenly;
//             border-radius: 8px;
//             background: linear-gradient(180deg, #2f97fe, #0262c1);
//             .long_css {
//                 width: calc(100% / 4);
//                 // width: 4px;
//                 // border-right: 4px;
//                 // border-color: black;
//                 // border-width:;
//                 border-right: 1px solid black;
//                 background-color: red;
//                 height: 100%;

//                 // height: 100%;
//                 // background-color: black;
//                 // margin-right: calc(100% / 5);
//                 // margin-left: calc((100% - 14px) / 5);
//             }
//             // .long_css:nth   ::after {
//             //     content: '';
//             //     width: calc(100% / 4);
//             //     // width: 4px;
//             //     // border-right: 4px;
//             //     // border-color: black;
//             //     // border-width:;
//             //     border-right: 1px solid black;
//             //     background-color: red;
//             //     height: 100%;
//             // }
//         }
//     }
// }
</style>

逃跑的羊
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
DEJA_VU3D - Cesium功能集 之 084-分屏对比（控制联动）
总得学点什么的博客
11-05 1358
本篇我们主要介绍实现的是分屏对比的效果，支持联动控制，可以根据自己实际的需要完成2分屏、4分屏、六分屏等，包括完整源代码奉上
vue3.x中使用cesium，vue3.x+Cesium
05-04
Vue3.x是一个流行的JavaScript...通过以上步骤，你可以在Vue3.x项目中成功集成Cesium，构建出具有3D地图功能的应用。记住，理解和掌握Cesium的API以及Vue3.x的最佳实践是关键，这样可以创建出既美观又高效的用户界面。
Cesium实现分屏联动
XFIRR的博客
02-26 1984
主体思路就是：当鼠标移入左边的div时，利用cesium自带的api监听鼠标的移动事件，然后获取此时左边的视角，将右边的视角与左边的设置为一致。移出div时就将之前绑定好的关系解除。至于展示的动图里面点击HomeButton会有一小段没有处理我就只能等之后在慢慢看看怎么解决了。因为我用的时vue，所以在这个组件中运用了一些“全局”变量，方便我在不同的函数中进行调用。就是两个div标签用来初始化两个地球，同时监听了鼠标的移入和移出事件。当鼠标移动到右侧的div时也是同理。使用的方法也在代码块里了。
cesium 分屏对比
梦寻汝的博客
06-06 253
vue中使用cesium进行分屏对比
摆脱枯燥的二维界面，用cesium+vue3动态渲染一个3D弹窗
前端、nodejs、3D、GIS、人工智能
06-03 1246
好了，言归正传，今天我将给大家带来一个3D弹窗，并结合vue3的createApp动态渲染。打POI点位；创建cesium中的事件交互，监听点位点击；创建Dialog弹窗大类，支持弹窗动态创建，并跟随viewer场景移动，弹窗模板单独创建;【开源地址】：https://github.com/tingyuxuan2302/cesium-vue3-vite/blob/github/src/views/mark/primitive.vue。
Cesium实现卷帘分屏效果
qq_26610239的博客
11-04 1083
Cesium实现卷帘分屏效果
cesium实现卷帘分屏效果
专注GIS开发
04-09 5015
cesium实现卷帘分屏效果
Cesium分屏对比实现
HPUGIS的博客
11-07 5106
不向现实低头，不服输，永不放弃学习 送给每一位战斗的工程师，这几天写了一个简单的分屏效果，在这记录一下，希望能帮到有缘人，原理很简单就是两个Viewer，话不多说直接上代码 /* * @Author: your name * @Date: 2019-11-07 09:00:17 * @LastEditTime: 2019-11-07 20:22:04 * @LastEditors: ...
vue cesium地图分屏联动
m0_58017645的博客
07-07 1567
根据项目要求：用户在点击切换下方卡片式的“时次”时候，下方左侧和右侧的地图可以进行联动，即用户点击、放大左侧时，右侧会有同等操作 具体的实现： 在components组件中添加index.vue文件，该组件作为子组件，里面是一些地图的初始化操作 使用props属性去接收父组件rainCheckContent.vue中的data和container值 写initViewer方法，并在页面加载时mounted要调用该方法 根据小哥哥提供的cesium双屏联动总结了下：1.实现思路： ...
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
该模板提供了一个简单的示例，展示了如何在Vue3应用程序中使用Cesium.js API创建一个基本的地球场景，并实现了一些基本的交互功能。除此之外，该模板还提供了一些常用的依赖和插件，如axios、element-plus、vuex等，...
基于vue3+vite+cesium 生成热力图CesiumHeatmap源码
11-22
在vue3+vite+cesium加载CesiumHeatmap生成热力图时不能直接使用， 需对源码进行重新封装及修改后方可在vue3+vite中调用； 源码已修改并验证可用；
vue3+ts+vite+cesium 加载天地图影像、标注等多服务器随机加载切换版本
04-02
这段基于 Vue.js 的 Cesium 地图应用示例展示了如何使用 Cesium.js 创建一个具有自定义配置的 3D 地球视图。Cesium.js 是一个开源 WebGL 虚拟地球引擎，可以构建交互式的 3D 地图应用。示例中的底图和注记图层来自...
cesium+vue实现飞机模型按照预定航线飞行
01-17
在本项目中，“cesium+vue实现飞机模型按照预定航线飞行”是一个利用Cesium和Vue.js技术构建的3D地球应用，旨在展示如何在虚拟环境中让飞机模型沿着预设的航线移动。Cesium是一个强大的开源JavaScript库，用于创建...
网站基本布局CSS
m0_46608027的博客
07-24 837
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 808
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 395
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 279
【代码】TS如何处理js模块的类型？
vue3+cesium实现自定义框
07-27
回答: 要在Vue3中使用Cesium实现自定义框，你可以按照以下步骤进行操作。首先，在vite.config.js中配置vite-plugin-cesium插件，引入Cesium和vite-plugin-cesium，并将其添加到plugins中。\[1\]然后，安装Cesium和vite-plugin-cesium插件，可以使用npm命令进行安装。\[2\]接下来，创建一个子组件，使用template标签定义组件的模板，其中包含自定义框的HTML结构和样式。\[3\]在script setup标签中，使用defineProps定义props属性，用于接收父组件传递的数据。最后，在style标签中定义组件的样式。这样就可以实现自定义框了。 #### 引用[.reference_title] - *1* *2* [使用vue3+vite+cesium，在地图上显示图标，并且点击实体弹出消息框](https://blog.csdn.net/weixin_46212682/article/details/127348864)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue3+cesium添加自定义弹窗并设置随地图移动位置移动](https://blog.csdn.net/qq_43474235/article/details/129230006)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值