Cesium 实现分屏卷帘

最新推荐文章于 2024-05-14 16:51:05 发布

好281

最新推荐文章于 2024-05-14 16:51:05 发布

阅读量278

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_63357695/article/details/130559516

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分屏卷帘</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="../Build/Cesium/Widgets/widgets.css">
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
        }
        #slider{
            width: 5px;
            height: 100%;
            position: absolute;
            left: 50%;   
            background-color: blue;
            z-index: 10;
        }
        #cesium-container{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer">
        <div id="slider"></div>
    </div>
    <script>
        //存储新地图信息     ArcGisMapServer主流GIS地图服务器
        var esri = new Cesium.ArcGisMapServerImageryProvider({
            //地图服务地址
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        })
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhY2NjY2JiNy0yZmI1LTQ2ZjktYjkyNi1hZjUxYTUzZmEyYmIiLCJpZCI6MTM2NTk3LCJpYXQiOjE2ODMxNjc1OTJ9.R5W18yvpi47TwSbj2hViTi7BVXC48NJpPm24OVKwJB8"
        const viewer = new Cesium.Viewer('cesiumContainer', {
            baseLayerPicker: false,
            imageryProvider: esri,
            terrainProvider: new Cesium.CesiumTerrainProvider({
                url: Cesium.IonResource.fromAssetId(1),
                requestVertexNormals: true,
                requestWaterMask: true
            })
        })
        const left =viewer.scene.primitives.add(
            new Cesium.Cesium3DTileset({
                url: Cesium.IonResource.fromAssetId(69380),
                maximumScreenSpaceError: 2,        //最大屏幕空间误差,数字越低，效果越好
                maximunNumberOfLoadedTiles: 1000,         //最大加载瓦片个数
            })
        )
            
        left.splitDirection = Cesium.SplitDirection.LEFT
        const right = viewer.scene.primitives.add(
            Cesium.createOsmBuildings()
        )
        right.splitDirection = Cesium.SplitDirection.RIGHT
        viewer.zoomTo(left)

        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){
            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.PINCK_MOVE)

        handler.setInputAction(function(){
            moveActive=false
        },Cesium.ScreenSpaceEventType.LEFT_UP)
        handler.setInputAction(function(){
            moveActive=false
        },Cesium.ScreenSpaceEventType.PINCH_END)
</script>
</body>
</html>