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>