OpenLayers的canvas图层叠加

OpenLayers中在overlayer层使用canvas图层叠加

介绍

我在此做了在canvas layer1层做出滑动效果
layer2层插入图片，实现在layer2层上方做出滑动效果，可以结合数据库做出滑动快慢，和上下滑动的效果

<div id="map" style="width: 100%;position: relative"></div>
<canvas id="layer1" style="position: absolute"></canvas>
<canvas id="layer2" style="position: absolute"></canvas>



<script>
    var canvasLayer1 = new ol.Overlay({
        element: document.getElementById('layer1'),
        scale:0.15
    });
    canvasLayer1.setPosition([115.9507, 31.58]);
    map.addOverlay(canvasLayer1);

    var canvasLayer2 = new ol.Overlay({
        element: document.getElementById('layer2'),
        scale:0.15
    });
    canvasLayer2.setPosition([115.9507, 31.58]);
    map.addOverlay(canvasLayer2);

var layer1=document.getElementById("layer1");
    var wh=layer1.width=60;

    var ht=layer1.height=120;
    var ctx=layer1.getContext("2d");


    var layer2=document.getElementById("layer2");
    layer2.width=60;
    layer2.height=120;
    var ctx2=layer2.getContext("2d");
    var image = new Image();
    image.src = "./img/blue.png";

    image.onload = function() {
        ctx2.drawImage(image, 0,layer2.width,layer2.width,layer2.width );
    }



    //ctx.fillStyle="#FF0000";
    ctx.beginPath();
    ctx.fillRect(0,0,wh,wh);
    ctx.moveTo(0,0);
    ctx.lineTo(wh,0.6*ht);
    ctx.lineTo(0,0.6*ht);
    ctx.lineTo(wh,0);
    // ctx.strokeRect(0,100,100,100);
    //ctx.quadraticCurveTo(130,40,180,150);
    //ctx.bezierCurveTo(60,80,150,30,170,150);
    ctx.stroke();
    timer=setInterval(function(){

        run(ctx);

    }, 300);




    ctx.beginPath();
    ctx.strokeRect(0,wh,wh,wh);

    //ctx.quadraticCurveTo(130,40,180,150);
    //ctx.bezierCurveTo(60,80,150,30,170,150);
    // ctx.fillStyle = "blue";
    //    cxt.closePath();
    ctx.stroke();




    var speed=0;
    var startPoint=0;
    function run(ctx){
        speed=-1;
        back=ht*0.4;
        ctx.clearRect(0,0,wh,wh);

        //cxt.top+=speed;
        startPoint+=speed;
        if(startPoint==back || startPoint==-back)
        {
            clearInterval(timer);

        }
        if(speed>0){
            ctx.beginPath();
            ctx.fillRect(0,startPoint,wh,ht*0.6);
            ctx.closePath();
            ctx.fillStyle = "black";
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(0,startPoint);

            ctx.lineTo(wh,ht*0.6+startPoint);
            ctx.lineTo(0,ht*0.6+startPoint);
            ctx.lineTo(wh,startPoint);
            //ctx.fillStyle="#FF0000";
            ctx.strokeStyle = "white";
            ctx.closePath();
            ctx.stroke();
            //cxt.fill();
        }
        else
        {
            ctx.clearRect(0,wh,wh,wh);
            ctx.strokeRect(0,wh,wh,wh);
            ctx.beginPath();
            ctx.fillRect(0,startPoint+back,wh,ht*0.6);
            ctx.closePath();
            ctx.fillStyle = "black";
            //ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(0,startPoint+back);

            ctx.lineTo(wh,ht*0.6+startPoint+back);
            ctx.lineTo(0,ht*0.6+startPoint+back);
            ctx.lineTo(wh,startPoint+back);
            //ctx.fillStyle="#FF0000";
            ctx.strokeStyle = "white";
            //ctx.stroke();
            ctx.closePath();
            ctx.stroke();
            //cxt.fill();

            //  cxt.beginPath();
            // ctx.moveTo(0,100);

        }
    }
    </script>

类似闸门滑动的效果