Cesium image roller shutter comparison

I. Overview

Cesium image roll-up comparison is to roll up the upper layer image and compare it with the lower layer image.

You can scroll left or right, refer to Cesium official website for specific examples.

Second, the effect

 

Three, the code

  1 <!--
  2 * @Author: Apple garden dog
  3  * @Date: 2021-01-11 14:45:09
  4  * @LastEditTime: 2021-01-17 18:52:14
  5  * @LastEditors: Please set LastEditors
  6 * @Description: Image rolling comparison
  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 //Other files can be imported here (for example: components, tool js, third-party plug-in js, json files, image files, etc.)
 33 //For example: import "component name" from'"component path"';
 34 import bus from "../../commonUtil/bus";
 35 export default {
 36 //The components introduced by import need to be injected into the object to be used
 37   components: {},
 38   data() {
 39 //store data here
 40     return {
 41       left: true,
 42       imageLayer: undefined,
 43       slider: undefined,
 44       tool: "left",
 45     };
 46   },
 47 //Monitoring attributes are similar to the concept of data
 48   computed: {},
 49 //Monitor data changes in data
 50   watch: {},
 51 //Method collection
 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 was relativeOffset = movement.endPosition.x;
 76 was 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("Function initialization failed!");
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 //Life cycle-creation completed (you can access the current this instance)
156   created() {},
157 //Life cycle-mount complete (can access DOM elements)
158   mounted() {
159     this.init();
160   },
161 beforeCreate() {}, //Life cycle-before creation
162 beforeMount() {}, //Life cycle-before mounting
163 beforeUpdate() {}, //Life cycle-before update
164 updated() {}, //Life cycle-after update
165 beforeDestroy() {}, //Life Cycle-Before Destroy
166 destroyed() {}, //life cycle-destruction completed
167 activated() {}, //If the page has a keep-alive cache function, this function will trigger
168 };