openlayers-17-卷帘对比

news2025/1/16 1:53:32

卷帘对比运行示例

实现卷帘对比功能，没有进一步测试版本兼容问题，不错从ol的官网来看，ol6之前的版本的示例与ol6及其之后的版本示例并不相同

ol5 示例https://openlayers.org/en/v5.3.0/examples/layer-swipe.html?q=layer+swipe
ol6示例 https://openlayers.org/en/latest/examples/layer-swipe.html

看下图，对canvas进行clip的时期不一致

在这里插入图片描述

以下代码仅作为一个思路参考,如果对你有所帮助，请帮忙点个赞，谢谢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>卷帘对比</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        #mapCon {
            width: 100%;
            height: 100%;
        }
        /*拖拽区div样式*/
        .swipe  {
            position: absolute;
            top: 50%;
            z-index: 882128;
            height: 0px; /*横条的高度*/
        }
        /*修改滑块默认样式*/
        input[type=range]{
            margin-top: 8px;
            outline: none;
            -webkit-appearance: none;/*清除系统默认样式*/
            width:99% !important;
            background: -webkit-linear-gradient(#61bd12, #61bd12) no-repeat, #ddd;
            background-size: 100% 100%;/*设置左右宽度比例*/
            height: 0px;/*横条的高度*/
        }
        /*拖动块的样式*/
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;/*清除系统默认样式*/
            height:32px;/*拖动块高度*/
            width: 32px;/*拖动块宽度*/
            background: #ffffff;/*拖动块背景*/
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC");
            background-size: 100% 100%;
            border-radius: 50%; /*外观设置为圆形*/
            border: solid 1px #e1e1e1; /*设置边框*/
            background-position: left;
        }
    </style>
</head>
<body>
<!-- 地图容器 -->
<div id="mapCon">
    <input id="swipe" type="range" class="swipe"/>
</div>

<script type="text/javascript">
    var key = "4689fc6b9bc0fdc8c48298f751ebfb41";//天地图密钥

    //创建天地图矢量图层
    var TiandiMap_vec = new ol.layer.Tile({
        title: "天地图矢量图层",
        source: new ol.source.XYZ({
            url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,
            wrapX: false
        })
    });
    //创建天地图影像图层
    var TiandiMap_img = new ol.layer.Tile({
        name: "天地图影像图层",
        source: new ol.source.XYZ({
            url: "http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + key,//TiandituKey为天地图密钥,
            crossOrigin: 'anonymous',
            wrapX: false
        })
    });

    //实例化Map对象加载地图
    var map = new ol.Map({
        //地图容器div的ID
        target: 'mapCon',
        //地图容器中加载的图层
        layers: [TiandiMap_vec,TiandiMap_img],
        //地图视图设置
        view: new ol.View({
            //地图初始中心点（经纬度）
            center: [118.37, 37.14],
            //地图初始显示级别
            zoom: 7,
            projection: "EPSG:4326"
        })
    });
    var swipe = document.getElementById('swipe');   // 用于控制卷帘位置的DOM元素
    TiandiMap_img.on('precompose', function(event){          // 在地图渲染之前触发
        var ctx = event.context;                 //获得canvas渲染上下文
        var width = ctx.canvas.width * (swipe.value / 100);  // 用于保存卷帘的位置

        ctx.save();                 // 保存canvas设置
        ctx.beginPath();            // 开始绘制路径
        ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);    // 绘制矩形
        ctx.clip();                 // 裁剪Bing地图，以形成卷帘效果
    })

    TiandiMap_img.on('postcompose', function(event){     // 在地图渲染之后触发
        var ctx = event.context;
        ctx.restore();              // 恢复canvas设置
    });

    swipe.addEventListener('input', function(){     // 在每次用户改变swipe控件时触发
        map.render();               // 渲染地图
    }, false);
</script>
</body>
</html>