Cesium 影像卷帘对比

一、概述

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

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

二、效果

三、代码

  1 <!--
  2  * @Author: 苹果园dog
  3  * @Date: 2021-01-11 14:45:09
  4  * @LastEditTime: 2021-01-17 18:52:14
  5  * @LastEditors: Please set LastEditors
  6  * @Description: 影像卷帘对比
  7  * @FilePath: \code\bayannaoer.web.vue\src\views\visualiPage\imageSplitAnalysis.vue
  8 -->
  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         <img
 15           src="../../assets/img/left.png"
 16           :class="{ selected: tool == 'left' }"
 17           @click="set(true)"
 18           title="左卷"
 19         />
 20         <img
 21           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 };