cesium分屏效果实现(视图同步)

5 篇文章 0 订阅
2 篇文章 0 订阅

cesium实现分屏,与其他框架类似,需设置视图的显示范围,在arcgis中是设置map的extent,在cesium中设置viewer的camera参数。代码如下:

viewer.camera.changed.addEventListener(function(){

viewer1.camera.setView({

        destination :  viewer.camera.computeViewRectangle();     

    });

})

 

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 Vue2 中实现 Cesium分屏效果,可以使用 Cesium 的 `Viewer` 对象,并将其放置在 Vue 组件的 `mounted` 钩子中。 具体方法如下: 1. 在 `mounted` 钩子中创建两个 `Viewer` 对象,分别代表左右两个屏幕。 2. 将两个 `Viewer` 对象的 `container` 属性设置为不同的 DOM 元素,以实现分屏效果。 3. 在 `destroyed` 钩子中销毁两个 `Viewer` 对象,释放内存。 示例代码如下: ```vue <template> <div class="cesium-container"> <div class="cesium-left"></div> <div class="cesium-right"></div> </div> </template> <script> import * as Cesium from "cesium"; export default { mounted() { // 创建左右两个 Viewer 对象 this.viewerLeft = new Cesium.Viewer("cesium-left"); this.viewerRight = new Cesium.Viewer("cesium-right"); // 设置左右两个 Viewer 对象的属性 this.viewerLeft.scene.globe.enableLighting = false; this.viewerRight.scene.globe.enableLighting = false; // 设置左右两个 Viewer 对象的 container 属性 this.viewerLeft.container = "cesium-left"; this.viewerRight.container = "cesium-right"; }, destroyed() { // 销毁左右两个 Viewer 对象 this.viewerLeft.destroy(); this.viewerRight.destroy(); }, }; </script> <style scoped> .cesium-container { display: flex; height: 100%; } .cesium-left { flex: 1; height: 100%; } .cesium-right { flex: 1; height: 100%; } </style> ``` 注意:在上述示例代码中,代码中的 `cesium-container` 、 `cesium-left` 、 `cesium-right` 分别代表 DOM 元素的 class 名称,需要在 CSS 样式表中定义相应的样式。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值