一、概述
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 };