leaflet左右影像对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>leafletdemo</title>
<link rel="stylesheet" href="../leaflet/leaflet.css">
<script src="../leaflet/leaflet.js"></script>
<style>
body,html{height:100%;margin: 0;padding: 0;}
#mapdiv1{
width: 49.5%;
height:100%;
float: left;
}
#mapdiv2{
float: left;
width: 49.5%;
height:100%;
}
#line{
float:left;
width:1%;
height:100%;
}
</style>
</head>
<body>
<div id="mapdiv1"></div>
<div id="line">
</div>
<div id="mapdiv2"></div>
<script>
var map1 = L.map("mapdiv1").setView([51.505, -0.09],8);
var map2 = L.map('mapdiv2').setView([51.505, -0.09], 8);
var lay1 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}
);
var lay2 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});
lay1.addTo(map1);
lay2.addTo(map2);
var maps = [map1,map2];
//地图联动实现
function maplink(e){
var _this = this;
maps.map(function (t) {
t.setView(_this.getCenter(),_this.getZoom())
})
}
//绑定
maps.map(function (t) {
t.on({drag:maplink,zoom:maplink})
})
</script>
</body>
</html>