Cesium 分屏对比效果实现

最新推荐文章于 2024-06-06 14:58:47 发布
最新推荐文章于 2024-06-06 14:58:47 发布
阅读量1.9k 收藏 4
点赞数 3
分类专栏： Cesium 文章标签： 3d gis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29808089/article/details/108895254
版权

实现原理

初始化两个view：viewer0,viewer1

然后给两个viewer添加鼠标事件，当拖动viewer0的时候把相关参数传递给viewer1，

反之，将viewer1的地图事件传递给viewer0即可实现两个球体的分屏联动效果

实现效果

实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script src="Cesium/Cesium.js"></script>
    <link rel="stylesheet"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
一碗老面i
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
专栏目录
订阅专栏
cesium实际开发案例视频案例教程
06-14
本课程可以快速掌握并强化cesiumjs开发GIS+BIM的地理信息系统，三维系统等。学习本课程可以提高对三维渲染，地理信息系统开发的认识，为您的学习与开发工作节约大量宝贵的时间。
cesium视频教程
10-15
本课程是一套基于GIS+BIM的三维地理信息系统框架，学习本课程可以快速掌握cesiumjs开发GIS+BIM的地理信息系统，三维系统等。学习本课程可以提高对三维渲染，地理信息GIS+BIM的认识，为您的学习与开发工作节约大量宝贵的时间，快速入门，上手。   
cesium 分屏对比
最新发布
梦寻汝的博客
06-06 210
vue中使用cesium进行分屏对比
Cesium示例程序学习和讲解(8)-分屏卷帘功能
qq_32077521的博客
03-15 321
本节主要讲解cesium视图中卷帘效果的实现原理
SuperMap iClient如何实现双屏联动
weixin_42066016的博客
07-30 787
在二维地图应用中，有时候会涉及到，两期栅格图或者矢量图的对比。一般我们可以用到卷帘效果，如果卷帘效果不太满足需求或者更多期数据要同时对比，可以通过定义多个map并且配合联动来实现，多期数据对比的需求。下面将采用iClient Classic来进行实现。 联动浏览 在二维地图中没有可以直接使用的多屏浏览接口，如果要实现的话，只能添加多个map组件，同时添加对两个map添加不同的layer。 /...
Cesium卷帘的制作（对比两种影像）
weixin_43311389的博客
09-05 4414
之前一直在想cesium卷帘怎么做，想了很多原理性的东西，比如是否要加载两个具有不同影像的球，然后套两层div，滑动后显示下层的球等。还要根据你得操作同时控制两个球为同一位置，听起来就够复杂的。其实，事实告诉我想的太多了！ 其实实现原理还是一个球，在左侧显示一种影像，右侧显示另一种影像就行了，大大减少了加载两个球消耗的内存。 效果图： 代码我就不贴了，我基本上是在这个案例上稍加改动就出来了：...
cesium 实现风场图效果
08-01
本篇将详细介绍如何利用Cesium实现风场图效果，以及相关的前端技术。 首先，了解Cesium的核心功能。Cesium提供了一个完整的3D地球模型，支持动态数据可视化，包括地形、建筑物、图像覆盖层等。它基于WebGL，能够在...
cesium 实现天气效果雨雪雾
11-04
本文将深入探讨如何利用Cesium实现天气效果，包括雨、雪和雾。 首先，我们要理解Cesium的核心组件。`Viewer`是Cesium的主要入口点，它负责初始化场景、相机、时间线等元素。为了添加天气效果，我们需要在`Viewer`...
Cesium实现动态扩散预警
06-21
在Cesium中，我们可以使用几何体和动画来实现这一效果。通过创建一系列的几何圆圈（代表扩散的边界），并随着时间改变它们的大小和位置，可以模拟出扩散的过程。 1. **扩散范围调整**：用户可以根据需要动态调整...
Cesium实现线条流动效果.rar
10-10
这个压缩包文件“Cesium实现线条流动效果.rar”显然包含了一种利用Cesium库来创建动态线条流动效果的技术实现。这种效果通常用于表示路径、轨迹或者随着时间变化的数据流，比如飞机航线、交通路线等。 首先，要实现...
Cesium 实现动态立体墙效果；可以直接复制代码到 cesium sandcastle 中运行查看效果；
12-31
在本文中，我们将深入探讨如何使用Cesium库来实现动态立体墙效果。Cesium是一个强大的开源JavaScript库，专为在Web浏览器中展示3D地球模型和地理空间数据而设计。它利用 WebGL 技术，提供了丰富的图形渲染功能，使得...
实现openlayers-Cesium二三维联动效果的功能脚本1
11-21
该脚本能够实现openlayers-Cesium二三维联动效果的功能
Openlayers笔记之实现卷帘查看功能
Spider_wang的博客
08-16 1389
在 Web GIS 的开发中，总是会遇到很多新奇的需求，比如卷帘查看功能。 卷帘查看是为了方便比较不同时间、不同类型的两张地图在同一地点的差异性，通过卷帘操作能够快速对比出两张地图的差异性。 1.实现思路 Openlayers API文档中提供了控制地图范围的接口(Extent)。通过加载两张地图，移动前端绘制的卷帘轴，实时获取卷帘轴当前的屏幕坐标（x, y)，并实时控制上面层级地图的显示范围，即可实现该功能。 2.具体实现 首先创建图层，加载两张在线地图： /* * 初始化地图 */ function.
Cesium双屏联动、三屏联动、多屏联动
shanshanqwertyuiop的博客
07-20 799
Cesium多屏联动对比
cesium实现二三维分屏地图同步效果
专注GIS开发
04-26 6302
cesium实现二三维分屏地图同步效果
cesium实现卷帘分屏效果
专注GIS开发
04-09 4951
cesium实现卷帘分屏效果
DEJA_VU3D - Cesium功能集 之 062-天气之雪效果
总得学点什么的博客
08-15 883
本篇主要实现天气效果中的雪天效果，相对来说比较简单，包括完整源代码奉上
ArcGIS API for JavaScript实现地图双屏联动
puyangmengxue的专栏
04-04 6130
使用ArcGIS API for JavaScript，可以很方便的实现地图联动。最简单的方式是借助Map对象的extent-change 事件，当然，也可以借助zoom-end、pan-end、mouse-drag-end等事件，本文使用第一种方式，具体实现代码如下：<!-- 功能：地图分屏 --> <!--The viewport meta tag is used to
09 地图联动（双屏、四屏）
X北辰北的博客
09-12 2545
双屏联动 代码：     效果：   四屏联动 代码：         效果：   注： 此博客中的需求也是和上篇博客一样，是项目需求，所以只粘贴关键代码，如果大家在实际开发中遇到问题，欢迎私聊，手把手指导~  ...
在vue2中实现cesium的分屏效果
05-31
要在 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 样式表中定义相应的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一碗老面i

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值