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 };
Cesium 影像卷帘对比
最新推荐文章于 2023-12-04 15:48:50 发布