Leaflet双屏对比,地图联动

本文展示了一个使用Leaflet库创建双地图并实现联动效果的HTML页面实例。通过设置两个地图视图,加载OpenStreetMap图层,并绑定拖动与缩放事件,实现了地图之间的同步显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>leafletdemo</title>
	<link rel="stylesheet" href="leaflet1.34/leaflet.css">
	<script src="leaflet1.34/leaflet-src.js"></script>
	<style>
	body,html{height:100%;}
		#mapdiv1{
			width: 50%;
			height:100%;
			float: right;
		}
		#mapdiv2{
			float: left;
			width: 50%;
			height:100%;
		}
	</style>
</head>
<body>
	<div id="mapdiv1"></div>
    <div id="mapdiv2"></div>
	<script>
		var map1 = L.map("mapdiv1").setView([51.505, -0.09],13);
		var map2 = L.map('mapdiv2').setView([51.505, -0.09], 13); 
        var lay1 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}
	       );
        var lay2 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:'&copy; <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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值