Cesium Note14:卷帘

预览

代码

<template>
    <div id="HeaderBar">
        <Header />
    </div>
    <div id="mainContent">
        <div id="cesiumContainer">
            <div id="slider"></div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import Header from "@/components/Header.vue";
import { onMounted, inject, getCurrentInstance, reactive } from 'vue';
let { proxy }: any = getCurrentInstance();
let Cesium: any = inject("$Cesium");
onMounted(() => { initCesium() })
const state = reactive({})
const initCesium = () => {
    const viewer = new Cesium.Viewer("cesiumContainer", {
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            url:
                "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
        }),
        baseLayerPicker: false,
        infoBox: false,
    });

    const layers = viewer.imageryLayers;
    const earthAtNight = layers.addImageryProvider(
        new Cesium.BingMapsImageryProvider({
            url: 'https://dev.virtualearth.net',
            key: 'AmnEtdBgHGnGoDMJOCeMKDUX1ms5kgnUBZoMnJZjIV7YF5ClZ9mqxA42PYW_Mk8_',
            mapStyle: Cesium.BingMapsStyle.AERIAL
        })
    );
    earthAtNight.splitDirection = Cesium.SplitDirection.LEFT; // Only show to the left of the slider.

    // Sync the position of the slider with the split position
    const slider = document.getElementById("slider")!;
    viewer.scene.splitPosition =
        slider.offsetLeft / slider.parentElement!.offsetWidth;

    const handler = new Cesium.ScreenSpaceEventHandler(slider);

    let moveActive = false;

    function move(movement: any) {
        if (!moveActive) {
            return;
        }

        const relativeOffset = movement.endPosition.x;
        const splitPosition =
            (slider.offsetLeft + relativeOffset) /
            slider.parentElement!.offsetWidth;
        slider.style.left = `${100.0 * splitPosition}%`;
        viewer.scene.splitPosition = splitPosition;
    }

    handler.setInputAction(function () {
        moveActive = true;
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
    handler.setInputAction(function () {
        moveActive = true;
    }, Cesium.ScreenSpaceEventType.PINCH_START);

    handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

    handler.setInputAction(function () {
        moveActive = false;
    }, Cesium.ScreenSpaceEventType.LEFT_UP);
    handler.setInputAction(function () {
        moveActive = false;
    }, Cesium.ScreenSpaceEventType.PINCH_END);

}
</script>
<style scoped lang='scss'>
#cesiumContainer {
    width: 100%;
    height: 910px;
    // height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;

    #slider {
        position: absolute;
        left: 50%;
        top: 0px;
        background-color: #d3d3d3;
        width: 5px;
        height: 100%;
        z-index: 9999;
    }

    #slider:hover {
        cursor: ew-resize;
    }
}
</style>