效果.png
<!DOCTYPE html>
<html>
<head>
<title>地图卷帘效果</title>
<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v6.5.0/build/ol.js"></script>
<style>
body {
overflow: hidden;
}
html, body, .map {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.swipe {
position: absolute;
top: 15px;
left: 40px;
z-index: 9;
width: auto;
}
.swipe input[type=range] {
width: 300px;
}
</style>
</head>
<body>
<div class="swipe">
卷帘:<input type="range" min="0" max="100" step="1" id="swipe" value="8"><br />
</div>
<div id="map" class="map"></div>
<script>
function getTdtLayer(lyr) {
var url = "http://t{0-7}.tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}&tk=54******0f00b";//说明：token要去天地图官网注册账号然后申请。
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: url
})
});
return layer;
}
var vec_c = getTdtLayer("vec_w");
var cva_c = getTdtLayer("cva_w");
var img_c = getTdtLayer("img_w");
var veclayerGroup = new ol.layer.Group({
layers: [vec_c, cva_c]
});
var imglayerGroup = new ol.layer.Group({
layers: [img_c, cva_c]
});
var map = new ol.Map({
target: "map",
view: new ol.View({
projection: "EPSG:4326",
center: [115.7555794477557, 22.6070466884657],
zoom: 7
}),
layers: [
imglayerGroup, veclayerGroup
]
});
var swipe = document.getElementById('swipe');
vec_c.on('prerender', function (event) {
var ctx = event.context;
console.log(swipe.value);
var width = ctx.canvas.width * (swipe.value / 100);
ctx.save();
ctx.beginPath();
ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
ctx.clip();
});
vec_c.on('postrender', function (event) {
var ctx = event.context;
ctx.restore();
});
swipe.addEventListener('input', function () {
map.render();
}, false);
</script>
</body>
</html>
