cesium实现卷帘效果(一张地图同时加载两个不同服务)

逃跑的羊

已于 2023-07-26 15:30:54 修改

阅读量638

点赞数 1

分类专栏： cesium 文章标签：前端 javascript

于 2023-07-26 15:24:29 首次发布

本文链接：https://blog.csdn.net/m0_55766628/article/details/131938156

版权

cesium 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

第一步使用css画出卷帘中间的分界线

<template>
<div class="swiper-class" ref="swiper-class"></div>
</template>

<style>

.swiper-class {
    height: 100%;
    width: 5px;
    background: #d3d3d3;
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 10;
    cursor: pointer;
}
</style>

第二步给左右两边添加不同的服务

<script setup>
onMonted(()=>{

    function initRoller() {
          
        viewer.vlaue 是保存的地图对象 
        
        图层的加载方式根据你的需求来加载 

        let leftLayer=viewer.value.imageryLayers.addImageryProvider(
         new Cesium.WebMapTileServiceImageryProvider({
            url: 放你的服务地址,
            layer:  '',
            style: 'default',
            format: 'image/webp',
            tileMatrixSetID: 'EGSP:3857',
            tilematrixset: 'EGSP:3857',
            tileWidth: 256,
            tileHeight: 256,
            service: 'WMTS',
            tilerow: 'TileRow',
            tilecol: 'TileCol',
            tilematrix: 'TileMatrix',
            version: '1.0.0',
            request: 'GetTile',
        }))   
    
           let rightLayer=viewer.value.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
            url: 放你的服务地址,
            layer: '',
            style: 'default',
            format: 'image/webp',
            tileMatrixSetID: 'EGSP:3857',
            tilematrixset: 'EGSP:3857',
            tileWidth: 256,
            tileHeight: 256,
            service: 'WMTS',
            tilerow: 'TileRow',
            tilecol: 'TileCol',
            tilematrix: 'TileMatrix',
            version: '1.0.0',
            request: 'GetTile',
        }))  
            
        设置左右两边的图层服务

        leftLayer.splitDirection = Cesium.SplitDirection.LEFT

        rightLayer.splitDirection = Cesium.SplitDirection.RIGHT
        }  
    }

})

</script>

第三步实现卷帘轴的左右跟随滑动

<script setup>


onMonted(()=>{

function initRoller() {
        nextTick(() => {
            获取到当前的分割线dom
            let  swiperSlider = proxy.$refs['swiper-class']

            进行左右的分割
            viewer.value.scene.splitPosition = swiperSlider.offsetLeft / swiperSlider.parentElement.offsetWidth

                viewer.value 是保存的初始化的viewer数据

                const handler = new Cesium.ScreenSpaceEventHandler(swiperSlider)

                moveActive = false

                添加地图的滑动点击事件等 开启拖拽
                handler.setInputAction(function () {
                        moveActive = true
                }, Cesium.ScreenSpaceEventType.LEFT_DOWN)

                handler.setInputAction(function () {
                        moveActive = true
                }, Cesium.ScreenSpaceEventType.PINCH_START)
                
                handler.setInputAction(swiperMove, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
                handler.setInputAction(swiperMove, Cesium.ScreenSpaceEventType.PINCH_MOVE)

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

}


function swiperMove(movement) {
        if (!moveActive) {
                return
        }
        const relativeOffset = movement.endPosition.x
        const splitPosition = (swiperSlider.offsetLeft + relativeOffset) / swiperSlider.parentElement.offsetWidth
        swiperSlider.style.left = `${100.0 * splitPosition}%`
        viewer.value.scene.splitPosition = splitPosition
}


})


</script>