Openlayers2多地图联动

地图实际使用中经常会出现多地图对比的情况，多图联动需求明确，通过openlayers中的map.center 控制多个地图直接联动，主要代码为：

 
当存在两个地图的时候 _maps = [map1 , map2] ;
_maps[0].events.register("move", _maps[0], function() { 
		
			
				if(_test_move) {
				
					var  c1 = this.getCenter();
					var z1 = this.getZoom();
				
					_test_move = false;
					if(_maps[1])
						_maps[1].setCenter(c1,z1);
				
					_test_move = true;
				}
			
			
			 
			
			});
			if(_maps[1])
				_maps[1].events.register("move", _maps[1], function() { 
		 
					if(_test_move) {
					
						var  c1 = this.getCenter();
						var z1 = this.getZoom();
				
						_test_move = false;
				
						_maps[0].setCenter(c1,z1);
				
						_test_move = true;
					}
			 
			
				});

测试页面为：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test markers </title>
<script src="OpenLayers.js"></script> 
<script src="TdtSwitcher.js"></script> 


<style>

html,body{
    height:100%;
}

.div_class{
	height: 100%;
	width:50%;
	float:left;
	position: relative;
}

</style>

<script type="text/javascript">
	
	 
	function init() {
		 
		
	 
		var map1  = new OpenLayers.Map("map1", {
				controls : [ new OpenLayers.Control.Navigation(),
								new OpenLayers.Control.Zoom(),
								new OpenLayers.Control.LayerSwitcher(),
								new OpenLayers.Control.MousePosition() ],
						projection : new OpenLayers.Projection('EPSG:900913'),
						displayProjection : new OpenLayers.Projection('EPSG:4326'),
						//units : 'm',
						numZoomLevels : 20,
						//maxResolution : 156543.0339,
						maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,20037508.34, 20037508.34)
				   	} ) ;
		var map2  = new OpenLayers.Map("map2",{
				controls : [ new OpenLayers.Control.Navigation(),
								new OpenLayers.Control.Zoom(),
								new OpenLayers.Control.LayerSwitcher(),
								new OpenLayers.Control.MousePosition() ],
						projection : new OpenLayers.Projection('EPSG:900913'),
						displayProjection : new OpenLayers.Projection('EPSG:4326'),
						//units : 'm',
						numZoomLevels : 20,
						//maxResolution : 156543.0339,
						maxExtent : new OpenLayers.Bounds(-20037508.34, -20037508.34,20037508.34, 20037508.34)
				   	} ) ;
		 
		 
		//添加选择背景地图的control
		  
		map1.addControl(new OpenLayers.Control.TdtSwitcher());
		map2.addControl(new OpenLayers.Control.TdtSwitcher());
		
		
		

		togeterMove([map1 , map2]);
		
		var lon = 120;
		var lat = 30;

		var point = new OpenLayers.LonLat(lon, lat);
		point.transform(map1.displayProjection,
				map1.projection);

	 
		map1 .setCenter(point, 12);

		
	  
	}

	_test_move = true ;

	function togeterMove(_maps) {
	
		  if(_maps.length == 2) {
			 
			 _maps[0].events.register("move", _maps[0], function() { 
		
			
				if(_test_move) {
				
					var  c1 = this.getCenter();
					var z1 = this.getZoom();
				
					_test_move = false;
					if(_maps[1])
						_maps[1].setCenter(c1,z1);
				
					_test_move = true;
				}
			
			
			 
			
			});
			if(_maps[1])
				_maps[1].events.register("move", _maps[1], function() { 
		 
					if(_test_move) {
					
						var  c1 = this.getCenter();
						var z1 = this.getZoom();
				
						_test_move = false;
				
						_maps[0].setCenter(c1,z1);
				
						_test_move = true;
					}
			 
			
				});
		}
		
	
	
	}
	 

</script>

</head>
<body onload="init()" >

<div id="div1" class="div_class"  >
	 <div id="map1" style="height:100%;width:100%"> </div>
</div>
<div id="div1" class="div_class"  >
	 <div id="map2" style="height:100%;width:100%"> </div>
</div>

</body>
</html>

实际效果为：

附件中有demo

Openlayers2多地图联动

猜你喜欢