概述：
本文讲述在openlayers中如何实现多图联动。
思路：
1、判断鼠标在哪个地图上；
2、添加该地图的地图移动事件；
3、设置另外一个地图的bound为该地图的。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>openlayers map</title>
<link rel="stylesheet" href="http://localhost/olapi/theme/default/style.css" type="text/css">
<style>
html, body, table{
padding:0;
margin:0;
height:100%;
width:100%;
overflow: hidden;
}
#map1,#map2{
width: 100%;
height: 100%;
}
</style>
<script src="http://localhost/olapi/OpenLayers.js"></script>
<script src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script>
<script src="http://localhost/jquery/jquery-1.8.3.js"></script>
<script>
var map1,map2;
$(window).load(function() {
var bounds = new OpenLayers.Bounds(
73.45100463562233, 18.16324718764174,
134.97679764650596, 53.531943152223576
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.2403351289487642,
projection: "EPSG:4326",
units: 'degrees'
};
map1 = new OpenLayers.Map('map1', options);
map2 = new OpenLayers.Map('map2', options);
map1.addLayer(getWms("china"));
map1.addControl(new OpenLayers.Control.Zoom());
map1.addControl(new OpenLayers.Control.Navigation());
map1.zoomToExtent(bounds);
map2.addLayer(getWms("province"));
map2.addControl(new OpenLayers.Control.Zoom());
map2.addControl(new OpenLayers.Control.Navigation());
map2.zoomToExtent(bounds)
$("table").on("mousemove", function(e){
var _x = e.clientX;
var _tabWidth = $("table").width();
if(_x>0 && _x<_tabWidth/2){
map1.events.register("move",map1,function(){
map2.zoomToExtent(map1.getExtent());
});
}
else{
map2.events.register("move",map2,function(){
map1.zoomToExtent(map2.getExtent());
});
}
})
});
function getWms(layer){
return new OpenLayers.Layer.WMS(
"Geoserver layers - Tiled",
"http://localhost:8081/geoserver/lzugis/wms",
{
"LAYERS": layer,
"STYLES": '',
format: 'image/png'
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td style="width: 50%; height: 100%; border-right: 1px solid #000;">
<div id="map1"></div>
</td>
<td style="width: 50%; height: 100%; border-right: 1px solid #000;">
<div id="map2"></div>
</td>
</tr>
</table>
</body>
</html>
