卷帘公共代码提取

src/components/sceneAtttribute/otherOptions/otherOptions.vue

@@ -136,8 +136,16 @@
 </template>
 
 <script>
-let rollerShutterConfig;
-import { setImageryRoller,hideImageryRoller } from "@/utils/MapHelper/map.js";
+import {
+  setImageryRoller,
+  hideImageryRoller,
+  initroller,
+  updataLrRoller,
+  updaeTbRoller,
+  useRoller,
+  lrtbRoller,
+  setImageryRollerMode,
+} from "@/utils/MapHelper/map.js";
 export default {
   name: "sceneOtherOptions",
   data() {
@@ -189,161 +197,13 @@ export default {
     //子组件部分
 
     init() {
-      if (rollerShutterConfig) {
-        return;
-      }
-      let windowWidth = document.body.clientWidth; // 窗口宽度
-      let windowHeight = document.body.clientHeight; // 窗口高度
-      // 卷帘配置参数，以对象方式实现地址传递
-      rollerShutterConfig = {
-        splitDirection: Cesium.SplitDirection.NONE,
-        verticalSplitPosition: windowWidth / 2,
-        horizontalSplitPosition: windowHeight / 2,
-      };
-      if (!document.getElementById("verticalSlider")) {
-        let f = document.getElementById("cesiumContainer");
-        let v = document.createElement("div");
-        let h = document.createElement("div");
-        v.classList.add("verticalSlider");
-        v.id = "verticalSlider";
-        h.id = "horizontalSlider";
-        v.style.display = "none";
-        h.style.display = "none";
-        f.appendChild(v);
-        f.appendChild(h);
-      }
-      this.setRollerShutterSplit();
-      this.bindSliderEvt();
-    },
-
-    /**
-     * 设置卷帘的分割方向及分割条的位置。
-     *
-     */
-    setRollerShutterSplit() {
-      let splitPosition = null;
-      if (
-        rollerShutterConfig.splitDirection === Cesium.SplitDirection.LEFT ||
-        rollerShutterConfig.splitDirection === Cesium.SplitDirection.RIGHT
-      ) {
-        splitPosition = rollerShutterConfig.verticalSplitPosition;
-        viewer.scene.imagerySplitPosition.x =
-          rollerShutterConfig.verticalSplitPosition / document.body.clientWidth;
-      } else if (
-        rollerShutterConfig.splitDirection === Cesium.SplitDirection.TOP ||
-        rollerShutterConfig.splitDirection === Cesium.SplitDirection.BOTTOM
-      ) {
-        splitPosition = rollerShutterConfig.horizontalSplitPosition;
-        viewer.scene.imagerySplitPosition.y =
-          rollerShutterConfig.horizontalSplitPosition /
-          document.body.clientHeight;
-      }
-      for (let layer of scene.layers.layerQueue) {
-        layer.splitDirection = rollerShutterConfig.splitDirection;
-        if (splitPosition) {
-          // 如果禁用卷帘就没有必要设置分割位置
-          layer.splitPosition = splitPosition;
-        }
-      }
+      initroller();
     },
-    setImageryRollerMode: function () {
-      store.setrollerType(rollerShutterConfig.splitDirection);
-      // let imageryLayers = viewer.imageryLayers;
-      // for (let i = 0; i < imageryLayers.length; i++) {
-      //   let imageryLayer = imageryLayers.get(i);
-      //   if (this.imageryRoller) this.setImageryRoller(imageryLayer)
-      //   else this.hideImageryRoller(imageryLayer)
-      // }
 
-      //案例展示
-      let imageryLayer = viewer.imageryLayers.get(1);
-      if (this.imageryRoller) setImageryRoller(imageryLayer,rollerShutterConfig);
-      else hideImageryRoller(imageryLayer);
-    },
     setImageryRollers(imageryLayer) {
-      if (this.imageryRoller) setImageryRoller(imageryLayer,rollerShutterConfig);
+      if (this.imageryRoller) setImageryRoller(imageryLayer);
       else hideImageryRoller(imageryLayer);
     },
-
-    /**
-     * 注册卷帘分割条的拖拽事件。
-     */
-    bindSliderEvt: function () {
-      let verticalSlider = document.getElementById("verticalSlider");
-      let horizontalSlider = document.getElementById("horizontalSlider");
-      verticalSlider.addEventListener("mousedown", mouseDown, false);
-      horizontalSlider.addEventListener("mousedown", mouseDown, false);
-      let windowHeight = document.body.clientHeight;
-      let me = this;
-      document.addEventListener("mouseup", mouseUp, false);
-
-      function mouseUp(e) {
-        document.removeEventListener("mousemove", sliderMove, false);
-      }
-
-      function mouseDown(e) {
-        document.addEventListener("mousemove", sliderMove, false);
-      }
-
-      function sliderMove(e) {
-        // 鼠标拖拽时执行
-        // 解决拖拽鼠标粘滞的问题
-        if (e.preventDefault) {
-          e.preventDefault();
-        } else {
-          e.returnValue = false;
-        }
-        if (
-          rollerShutterConfig.splitDirection === Cesium.SplitDirection.LEFT ||
-          rollerShutterConfig.splitDirection === Cesium.SplitDirection.RIGHT
-        ) {
-          verticalSlider.style.left = e.clientX + "px";
-          rollerShutterConfig.verticalSplitPosition = e.clientX;
-        } else if (
-          rollerShutterConfig.splitDirection === Cesium.SplitDirection.TOP ||
-          rollerShutterConfig.splitDirection === Cesium.SplitDirection.BOTTOM
-        ) {
-          let clientY = e.clientY;
-          if (clientY < 0) {
-            clientY = 0;
-          } else if (clientY > windowHeight) {
-            clientY = windowHeight - document.body.clientHeight;
-          }
-          horizontalSlider.style.top = clientY + "px";
-          rollerShutterConfig.horizontalSplitPosition = windowHeight - clientY;
-        }
-        me.setRollerShutterSplit();
-      }
-    },
-    // 更新卷帘
-    updataLrRoller() {
-      switch (this.lrRoller) {
-        case "leftRoller":
-          rollerShutterConfig.splitDirection = Cesium.SplitDirection.LEFT;
-          break;
-        case "rightRoller":
-          rollerShutterConfig.splitDirection = Cesium.SplitDirection.RIGHT;
-          break;
-        default:
-          break;
-      }
-      this.setImageryRollerMode();
-      this.setRollerShutterSplit();
-    },
-    updaeTbRoller() {
-      switch (this.tbRoller) {
-        case "topRoller":
-          rollerShutterConfig.splitDirection = Cesium.SplitDirection.TOP;
-          break;
-        case "bomRoller":
-          rollerShutterConfig.splitDirection = Cesium.SplitDirection.BOTTOM;
-          break;
-        default:
-          break;
-      }
-      this.setImageryRollerMode();
-      this.setRollerShutterSplit();
-    },
   },
 
   watch: {
@@ -379,58 +239,21 @@ export default {
       viewer.scene.bloomEffect.bloomIntensity = Number(val);
     },
     useRoller(val) {
-      let verticalSlider = document.getElementById("verticalSlider");
-      let horizontalSlider = document.getElementById("horizontalSlider");
-      if (val) {
-        switch (this.lrtbRoller) {
-          case "lrRoller":
-            verticalSlider.style.display = "block";
-            horizontalSlider.style.display = "none";
-            this.updataLrRoller();
-            break;
-          case "tbRoller":
-            verticalSlider.style.display = "none";
-            horizontalSlider.style.display = "block";
-            this.updaeTbRoller();
-            break;
-          default:
-            break;
-        }
-      } else {
-        rollerShutterConfig.splitDirection = Cesium.SplitDirection.NONE;
-        verticalSlider.style.display = "none";
-        horizontalSlider.style.display = "none";
-        this.setImageryRollerMode();
-        this.setRollerShutterSplit();
-      }
+      useRoller(val, this.lrtbRoller, this.lrRoller, this.tbRoller);
     },
     imageryRoller(val) {
-      this.setImageryRollerMode();
+      setImageryRollerMode();
+      // store.setrollerType(rollerShutterConfig.splitDirection);
       // this.setRollerShutterSplit();
     },
     lrtbRoller(val) {
-      let verticalSlider = document.getElementById("verticalSlider");
-      let horizontalSlider = document.getElementById("horizontalSlider");
-      switch (val) {
-        case "lrRoller":
-          verticalSlider.style.display = "block";
-          horizontalSlider.style.display = "none";
-          this.updataLrRoller();
-          break;
-        case "tbRoller":
-          verticalSlider.style.display = "none";
-          horizontalSlider.style.display = "block";
-          this.updaeTbRoller();
-          break;
-        default:
-          break;
-      }
+      lrtbRoller(val, this.lrRoller, this.tbRoller);
     },
     lrRoller(val) {
-      this.updataLrRoller();
+      updataLrRoller(val);
     },
     tbRoller(val) {
-      this.updaeTbRoller();
+      updaeTbRoller(val);
     },
   },
 };

src/utils/MapHelper/map.js

@@ -1,4 +1,48 @@
-export function setImageryRoller(imageryLayer, rollerShutterConfig) {
+let rollerShutterConfig;
+export function initroller() {
+    if (rollerShutterConfig) {
+        return;
+    }
+    let windowWidth = document.body.clientWidth; // 窗口宽度
+    let windowHeight = document.body.clientHeight; // 窗口高度
+    // 卷帘配置参数，以对象方式实现地址传递
+    rollerShutterConfig = {
+        splitDirection: Cesium.SplitDirection.NONE,
+        verticalSplitPosition: windowWidth / 2,
+        horizontalSplitPosition: windowHeight / 2,
+    };
+    if (!document.getElementById("verticalSlider")) {
+        let f = document.getElementById("cesiumContainer");
+        let v = document.createElement("div");
+        let h = document.createElement("div");
+        v.classList.add("verticalSlider");
+        v.id = "verticalSlider";
+        h.id = "horizontalSlider";
+        v.style.display = "none";
+        h.style.display = "none";
+        f.appendChild(v);
+        f.appendChild(h);
+    }
+    setRollerShutterSplit();
+    bindSliderEvt();
+}
+export function setImageryRollerMode() {
+    console.log(rollerShutterConfig.splitDirection, 'sxsdx')
+    store.setrollerType(rollerShutterConfig.splitDirection);
+    // let imageryLayers = viewer.imageryLayers;
+    // for (let i = 0; i < imageryLayers.length; i++) {
+    //   let imageryLayer = imageryLayers.get(i);
+    //   if (this.imageryRoller) this.setImageryRoller(imageryLayer)
+    //   else this.hideImageryRoller(imageryLayer)
+    // }
+
+    //案例展示
+    // let imageryLayer = viewer.imageryLayers.get(1);
+    // if (this.imageryRoller) setImageryRoller(imageryLayer);
+    // else hideImageryRoller(imageryLayer);
+}
+
+export function setImageryRoller(imageryLayer) {
     console.log("---", Cesium.SplitDirection.RIGHT)
     switch (rollerShutterConfig.splitDirection) {
         case Cesium.SplitDirection.LEFT:
@@ -38,4 +82,159 @@ export function hideImageryRoller(imageryLayer) {
         Cesium.ImagerySplitDirection.NONE,
         Cesium.ImagerySplitDirection.NONE
     );
-}
+}
+/**
+     * 注册卷帘分割条的拖拽事件。
+     */
+export function bindSliderEvt() {
+    let verticalSlider = document.getElementById("verticalSlider");
+    let horizontalSlider = document.getElementById("horizontalSlider");
+    verticalSlider.addEventListener("mousedown", mouseDown, false);
+    horizontalSlider.addEventListener("mousedown", mouseDown, false);
+    let windowHeight = document.body.clientHeight;
+    let me = this;
+    document.addEventListener("mouseup", mouseUp, false);
+
+    function mouseUp(e) {
+        document.removeEventListener("mousemove", sliderMove, false);
+    }
+
+    function mouseDown(e) {
+        document.addEventListener("mousemove", sliderMove, false);
+    }
+
+    function sliderMove(e) {
+        // 鼠标拖拽时执行
+        // 解决拖拽鼠标粘滞的问题
+        if (e.preventDefault) {
+            e.preventDefault();
+        } else {
+            e.returnValue = false;
+        }
+        if (
+            rollerShutterConfig.splitDirection === Cesium.SplitDirection.LEFT ||
+            rollerShutterConfig.splitDirection === Cesium.SplitDirection.RIGHT
+        ) {
+            verticalSlider.style.left = e.clientX + "px";
+            rollerShutterConfig.verticalSplitPosition = e.clientX;
+        } else if (
+            rollerShutterConfig.splitDirection === Cesium.SplitDirection.TOP ||
+            rollerShutterConfig.splitDirection === Cesium.SplitDirection.BOTTOM
+        ) {
+            let clientY = e.clientY;
+            if (clientY < 0) {
+                clientY = 0;
+            } else if (clientY > windowHeight) {
+                clientY = windowHeight - document.body.clientHeight;
+            }
+            horizontalSlider.style.top = clientY + "px";
+            rollerShutterConfig.horizontalSplitPosition = windowHeight - clientY;
+        }
+        setRollerShutterSplit();
+    }
+}
+
+/**
+    * 设置卷帘的分割方向及分割条的位置。
+    *
+    */
+export function setRollerShutterSplit() {
+    let splitPosition = null;
+    if (
+        rollerShutterConfig.splitDirection === Cesium.SplitDirection.LEFT ||
+        rollerShutterConfig.splitDirection === Cesium.SplitDirection.RIGHT
+    ) {
+        splitPosition = rollerShutterConfig.verticalSplitPosition;
+        viewer.scene.imagerySplitPosition.x =
+            rollerShutterConfig.verticalSplitPosition / document.body.clientWidth;
+    } else if (
+        rollerShutterConfig.splitDirection === Cesium.SplitDirection.TOP ||
+        rollerShutterConfig.splitDirection === Cesium.SplitDirection.BOTTOM
+    ) {
+        splitPosition = rollerShutterConfig.horizontalSplitPosition;
+        viewer.scene.imagerySplitPosition.y =
+            rollerShutterConfig.horizontalSplitPosition /
+            document.body.clientHeight;
+    }
+    for (let layer of scene.layers.layerQueue) {
+        layer.splitDirection = rollerShutterConfig.splitDirection;
+        if (splitPosition) {
+            // 如果禁用卷帘就没有必要设置分割位置
+            layer.splitPosition = splitPosition;
+        }
+    }
+}
+export function useRoller(val, lrtbRoller, lrRoller, tbRoller) {
+    let verticalSlider = document.getElementById("verticalSlider");
+    let horizontalSlider = document.getElementById("horizontalSlider");
+    if (val) {
+        switch (lrtbRoller) {
+            case "lrRoller":
+                verticalSlider.style.display = "block";
+                horizontalSlider.style.display = "none";
+                updataLrRoller(lrRoller);
+                break;
+            case "tbRoller":
+                verticalSlider.style.display = "none";
+                horizontalSlider.style.display = "block";
+                updaeTbRoller(tbRoller);
+                break;
+            default:
+                break;
+        }
+    } else {
+        rollerShutterConfig.splitDirection = Cesium.SplitDirection.NONE;
+        verticalSlider.style.display = "none";
+        horizontalSlider.style.display = "none";
+        setImageryRollerMode();
+        setRollerShutterSplit();
+    }
+}
+
+export function lrtbRoller(val, lrRoller, tbRoller) {
+    let verticalSlider = document.getElementById("verticalSlider");
+    let horizontalSlider = document.getElementById("horizontalSlider");
+    switch (val) {
+        case "lrRoller":
+            verticalSlider.style.display = "block";
+            horizontalSlider.style.display = "none";
+            updataLrRoller(lrRoller);
+            break;
+        case "tbRoller":
+            verticalSlider.style.display = "none";
+            horizontalSlider.style.display = "block";
+            updaeTbRoller(tbRoller);
+            break;
+        default:
+            break;
+    }
+}
+// 更新卷帘
+export function updataLrRoller(lrRoller) {
+    switch (lrRoller) {
+        case "leftRoller":
+            rollerShutterConfig.splitDirection = Cesium.SplitDirection.LEFT;
+            break;
+        case "rightRoller":
+            rollerShutterConfig.splitDirection = Cesium.SplitDirection.RIGHT;
+            break;
+        default:
+            break;
+    }
+    setImageryRollerMode();
+    setRollerShutterSplit();
+}
+export function updaeTbRoller(tbRoller) {
+    switch (tbRoller) {
+        case "topRoller":
+            rollerShutterConfig.splitDirection = Cesium.SplitDirection.TOP;
+            break;
+        case "bomRoller":
+            rollerShutterConfig.splitDirection = Cesium.SplitDirection.BOTTOM;
+            break;
+        default:
+            break;
+    }
+    setImageryRollerMode();
+    setRollerShutterSplit();
+}