cesium分屏对比

参考地址：https://blog.csdn.net/qq_29808089/article/details/108895254

简单介绍一下：分屏对比和卷帘对比的区别（只是个人理解，不对请指正）
分屏对比：创建了左右两个地球，有两个viewer，两个viewer会同步。
卷帘对比：只有一个地球，一个viewer，只不过这个地球有两个地图。
想看卷帘对比请在我的文章中寻找

使用该段代码请将js和css换成自己的或者网上的

<!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="../../Build/Cesium/Cesium.js"></script><!-- <link rel="stylesheet" href="Cesium/Widgets/widgets.css"> -->
</head><body><div id="cesiumContainer" class="mapview"></div><div id="cesiumContainer2" class="mapview"></div>
</body>
<style>@import url(../../Build/Cesium/Widgets/widgets.css);html,body {width: 100%;height: 100%;margin: 0;}.mapview {float: left;width: 50%;height: 100%;margin: 0;}
</style>
<script>var viewer0, viewer1viewer0 = new Cesium.Viewer('cesiumContainer', {baseLayerPicker: false,imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer'})});viewer1 = new Cesium.Viewer('cesiumContainer2', {baseLayerPicker: false,imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer'})});initHandler(viewer0, viewer1)function initHandler(viewer0, viewer1) {var _self = this;if (_self.handler && _self.handler.getInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)) {return;}_self.handler = new Cesium.ScreenSpaceEventHandler(viewer0.scene.canvas);_self.handler1 = new Cesium.ScreenSpaceEventHandler(viewer1.scene.canvas);_self.handler.setInputAction(function (movement) {var _camerca = viewer0.camera;viewer1.camera.setView({destination: _camerca.position,orientation: {direction: _camerca._direction,up: _camerca.up,heading: _camerca.heading,pitch: _camerca.pitch,roll: _camerca.roll}});}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);_self.handler.setInputAction(function (movement) {var _camerca = viewer0.camera;viewer1.camera.setView({destination: _camerca.position,orientation: {direction: _camerca._direction,up: _camerca.up,heading: _camerca.heading,pitch: _camerca.pitch,roll: _camerca.roll}});}, Cesium.ScreenSpaceEventType.WHEEL);_self.handler1.setInputAction(function (movement) {var _camerca = viewer1.camera;viewer0.camera.setView({destination: _camerca.position,orientation: {direction: _camerca._direction,up: _camerca.up,heading: _camerca.heading,pitch: _camerca.pitch,roll: _camerca.roll}});}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);_self.handler1.setInputAction(function (movement) {var _camerca = viewer1.camera;viewer0.camera.setView({destination: _camerca.position,orientation: {direction: _camerca._direction,up: _camerca.up,heading: _camerca.heading,pitch: _camerca.pitch,roll: _camerca.roll}});}, Cesium.ScreenSpaceEventType.WHEEL);}function clearHandler() {var _self = this;if (_self.handler) {_self.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);_self.handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL);}if (_self.handler1) {_self.handler1.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);_self.handler1.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL);}}
</script></html>

效果图：

cesium分屏对比相关推荐

arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...
arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...
mapbox 分屏对比
我们要做的的是左右分屏后两张地图同步对比,而且可以切换数据,实现的效果图是这样的,原博文地址:https://blog.csdn.net/weixin_42599077/article/details ...
DTCIM Viewer图形引擎产品之卷帘对比分屏对比
在项目的数字孪生地图的规划过程中,有时候会遇见展示不同时期房屋建造状态.项目规划设计对比等需求,如需查看工程每个周期的建设进度等,在面对这些需求时.比较常用的展示方式有卷帘对比及分屏对比功能,分屏和卷 ...
电脑文件夹可以分屏的软件_「原创文」窗口快速分屏，文件对比复制高效不止一点｜每天学一点...
- 原创声明,侵权必究 - 有没有这种情况,你需要频繁从一个文档中复制文字,然后粘贴到网页中. 又或者两篇文档,你需要复制或者对比又或者,两个文件夹中对文件进行检查或者对比这种时候,大家经常频繁的 ...
电脑怎么分屏2个显示器_程序员一台电脑装2个显示屏？因为专业
使用电脑双屏显示已经十分普及,并不一定只有电影里面可以看到. 笔记本通过显示器输出.电脑通过投影输出.单个主机通过两台显示输出,均属于双屏显示. 当然,双频显示可以极大的提高工作效率. 以程序员为例, ...
vue 高德地图不同区域显示不同颜色_高德百度哪家强？苹果Carplay第三方分屏功能评测...
几天前,苹果公司正式更新了iOS13.4版本.一个小版本系统更新,却让车主群热闹了起来.在这个版本中,苹果正式开放了Carplay分屏显示模式下对第三方地图的支持. 车主们的热情,化为高德地图和百度地 ...
windows分屏_windows内到底藏了多少好东西？
恭喜! 点开这篇文章,你将解锁 WIN10 系统内那些不为人知的高效的冷知识! 相信所有的职场人都会搜索过这样的问题:有哪些高效的办公神器? 在之前的文章中,我分享过很多高效神器,如果你感兴趣的话,点 ...

cesium分屏对比

cesium分屏对比相关推荐

最新文章

热门文章