real3d-portalsite/src/utils/MapHelper/map.js

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:
            imageryLayer.splitDirection = new Cesium.Cartesian2(
                Cesium.ImagerySplitDirection.RIGHT,
                Cesium.ImagerySplitDirection.NONE
            );
            break;
        case Cesium.SplitDirection.RIGHT:
            imageryLayer.splitDirection = new Cesium.Cartesian2(
                Cesium.ImagerySplitDirection.LEFT,
                Cesium.ImagerySplitDirection.NONE
            );
            break;
        case Cesium.SplitDirection.TOP:
            imageryLayer.splitDirection = new Cesium.Cartesian2(
                Cesium.ImagerySplitDirection.NONE,
                Cesium.ImagerySplitDirection.BOTTOM
            );
            break;
        case Cesium.SplitDirection.BOTTOM:
            imageryLayer.splitDirection = new Cesium.Cartesian2(
                Cesium.ImagerySplitDirection.NONE,
                Cesium.ImagerySplitDirection.TOP
            );
            break;
        default:
            imageryLayer.splitDirection = new Cesium.Cartesian2(
                Cesium.ImagerySplitDirection.NONE,
                Cesium.ImagerySplitDirection.NONE
            );
            break;
    }
}
export function hideImageryRoller(imageryLayer) {
    imageryLayer.splitDirection = new Cesium.Cartesian2(
        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();
}