Cesium 影像卷帘对比

一、概述

Cesium 影像卷帘对比，就是把上层影像卷起来，和下面一层影像做对比。

可左卷也可右卷，具体参考Cesium官网，有例子。

二、效果

三、代码

  1 <!--2  * @Author: 苹果园dog3  * @Date: 2021-01-11 14:45:094  * @LastEditTime: 2021-01-17 18:52:145  * @LastEditors: Please set LastEditors6  * @Description: 影像卷帘对比7  * @FilePath: \code\bayannaoer.web.vue\src\views\visualiPage\imageSplitAnalysis.vue8 -->9 <!--  -->10 <template>11   <div style="width: 100%; height: 100%" class="main">12     <div class="container">13       <el-form :inline="true" class="demo-form-inline">14         <img15           src="../../assets/img/left.png"16           :class="{ selected: tool == 'left' }"17           @click="set(true)"18           title="左卷"19         />20         <img21           src="../../assets/img/right.png"22           :class="{ selected: tool == 'right' }"23           @click="set(false)"24           title="右卷"25         />26       </el-form>27     </div>28   </div>29 </template>30 31 <script>32 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）33 //例如：import 《组件名称》 from '《组件路径》';34 import bus from "../../commonUtil/bus";35 export default {36   //import引入的组件需要注入到对象中才能使用37   components: {},38   data() {39     //这里存放数据40     return {41       left: true,42       imageLayer: undefined,43       slider: undefined,44       tool: "left",45     };46   },47   //监听属性 类似于data概念48   computed: {},49   //监控data中的数据变化50   watch: {},51   //方法集合52   methods: {53     init() {54       let that = this;55       this.initSplit();56       bus.$on("imageSplitAnalysis", (visible) => {57         if (visible) {58           that.show();59         } else {60           that.close();61         }62       });63     },64 65     initSplit() {66       let that = this;67       this.slider = this.$parent.$parent.$refs.splitslider.$el;68       //this.slider = document.getElementById("image_slider");69       var handler = new Cesium.ScreenSpaceEventHandler(this.slider);70       var moveActive = false;71       function move(movement) {72         if (!moveActive) {73           return;74         }75         var relativeOffset = movement.endPosition.x;76         var splitPosition =77           (that.slider.offsetLeft + relativeOffset) /78           that.slider.parentElement.offsetWidth;79         that.slider.style.left = 100.0 * splitPosition + "%";80         viewer.scene.imagerySplitPosition = splitPosition;81       }82       handler.setInputAction(function () {83         moveActive = true;84       }, Cesium.ScreenSpaceEventType.LEFT_DOWN);85       handler.setInputAction(function () {86         moveActive = true;87       }, Cesium.ScreenSpaceEventType.PINCH_START);88       handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);89       handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);90       handler.setInputAction(function () {91         moveActive = false;92       }, Cesium.ScreenSpaceEventType.LEFT_UP);93       handler.setInputAction(function () {94         moveActive = false;95       }, Cesium.ScreenSpaceEventType.PINCH_END);96     },97     show: function () {98       let winSplit = this.$parent.$parent.$refs.imageSplitAnalysis;99       if (!winSplit) {
100         alert("功能初始化失败！");
101         bus.$emit("imageSplitAnalysis", false);
102         return;
103       }
104       var layercontrol = this.$parent.$parent.$refs.leftTreeWin;
105       if (!layercontrol) {
106         bus.$emit("imageSplitAnalysis", false);
107         return;
108       }
109       var selected = layercontrol.$children[0].selected;
110       if (!selected || selected.type != "image") {
111         bus.$emit("imageSplitAnalysis", false);
112         return;
113       }
115       if (!selected.layer) {
116         return;
117       }
118       selected.image = selected.layer;
119       viewer.flyTo(selected.image);
121       viewer.imageryLayers.raiseToTop(selected.image);
122       this.visible = true;
123       this.imageryLayer = selected.image;
124       this.set(true);
125       winSplit.open();
126     },
127     close: function () {
128       this.visible = false;
129       this.imageryLayer.splitDirection = Cesium.ImagerySplitDirection.NONE;
130     },
131     toggle: function () {
132       if (this.visible) {
133         this.close();
134       } else {
135         this.show();
136       }
137     },
138     set: function (v) {
139       this.left = v;
140       if (this.left) {
141         this.tool = "left";
142         if (this.imageryLayer) {
143           this.imageryLayer.splitDirection = Cesium.ImagerySplitDirection.LEFT;
144         }
145       } else {
146         this.tool = "right";
147         if (this.imageryLayer) {
148           this.imageryLayer.splitDirection = Cesium.ImagerySplitDirection.RIGHT;
149         }
150       }
151       viewer.scene.imagerySplitPosition = 0.5;
152       this.slider.style.left = "50%";
153     },
154   },
155   //生命周期 - 创建完成（可以访问当前this实例）
156   created() {},
157   //生命周期 - 挂载完成（可以访问DOM元素）
158   mounted() {
159     this.init();
160   },
161   beforeCreate() {}, //生命周期 - 创建之前
162   beforeMount() {}, //生命周期 - 挂载之前
163   beforeUpdate() {}, //生命周期 - 更新之前
164   updated() {}, //生命周期 - 更新之后
165   beforeDestroy() {}, //生命周期 - 销毁之前
166   destroyed() {}, //生命周期 - 销毁完成
167   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
168 };

Cesium 影像卷帘对比相关推荐

cesium分屏对比
参考地址:https://blog.csdn.net/qq_29808089/article/details/108895254 简单介绍一下:分屏对比和卷帘对比的区别(只是个人理解,不对请指正) 分 ...
Cesium【卷帘】、图层对比。
运用API .splitDirection // 添加图层 const { Viewer } = window const viewer:Cesium.Viewer = Viewer const la ...
08 Cesium—影像服务-1
文章中所有操作均是在 Cesium 1.91 版本下进行的,其它版本差异请自行适配影像服务 1 相关介绍请移步影像服务介绍,这里先介绍其中几个在线服务,包括:ArcGisMapServerImage ...
Cesium：实现卷帘效果
Cesium:实现卷帘效果卷帘效果简介 Cesium:卷帘效果实现 Cesium:实现思路示例代码卷帘效果简介先上一个简动画预演一下. 但是如何介绍"卷帘效果"呢? ...
DTCIM Viewer图形引擎产品之卷帘对比分屏对比
在项目的数字孪生地图的规划过程中,有时候会遇见展示不同时期房屋建造状态.项目规划设计对比等需求,如需查看工程每个周期的建设进度等,在面对这些需求时.比较常用的展示方式有卷帘对比及分屏对比功能,分屏和卷 ...
Cesium 基础知识和文档记录
Cesium开发基础 CesiumLab--系统重启目录 • 一,关于我们 • 二,Cesium介绍 • 三,快速入门 • 四,常见问题 • 五,学习方法一,关于我们 --系统重启 • 2008年 ...
cesium是什么?
Cesium是什么? 一句话概括:一个基于JavaScript编写的使用WebGL的地图引擎. Cesium的由来? 2000年初,Google公司推出Google Earth 桌面软件. 2005年 ...
新图源！季度更新！吉林一号全国亚米级季度更新卫星影像给行业带来更多可能
随着人类社会的不断发展,我们对地球的探索和认知也日益深入.卫星数据作为对地球认知的一种重要数据,它的发展支持了众多学科的应用.近年来被越来越重视,包括用于自然环境.城市规划.民用.军事和科学研究等等. ...
Cesium 系列1 - 简介及源码下载发布
1.简介 cesium 一个开源的javascript三维虚拟地球/地图可视化框架,目标是动态数据可视化的虚拟地球领导者,尽一切可能去优化性能.精度.效果,易用性.平台支撑.内容 cesium特点: ...
WebGL，Cesium以及GeoJSON数据的简单介绍
目录一.WebGL 二.Cesium (1)Cesium:一个用于显示三维地球和地图的开源js库. (2)Cesium的基本功能: (3)cesium的依赖性与技术标准 (4)Cesium与周边产品 ...

Cesium 影像卷帘对比

Cesium 影像卷帘对比相关推荐

最新文章

热门文章