OL2中的多地图联动展示
概述：
在前面有篇文章提到了OL3中的多地图联动展示，在本节中讲述在OL2中实现多地图的联动展示。
效果：
实现思路：
在Ol2中，实现多地图的联动展示也是比较简单的。查看OL2中map的api，可知只要添加map的move事件即可。
实现代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>china EPSG:4326 image/png</title>
<link rel="stylesheet" type="text/css" href="http://localhost/olapi/theme/default/style.css"/>
<style type="text/css">
body { font-family: sans-serif; font-weight: bold; font-size: .8em; }
body { border: 0px; margin: 0px; padding: 0px;overflow: hidden; }
.map { width: 50%; height: 100%; border: 0px; padding: 0px; float: left;}
</style>
<script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
<script src="../../../plugin/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
function init(){
var width = $(window).width();
$(".map").css("width",(width-1)/2+"px");
var bounds = new OpenLayers.Bounds(
87.57582859314434, 19.969920291221204,
126.56713756740385, 45.693810203800794
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.1523098006807012,
projection: "EPSG:4326",
units: 'degrees'
};
var map1 = new OpenLayers.Map('map1', options);
var map2 = new OpenLayers.Map('map2', options);
var layer1 = new OpenLayers.Layer.WMS(
"province", "http://localhost:8088/geoserver/lzugis/wms",
{
"LAYERS": 'capital',
"STYLES": '',
format: 'image/png'
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
var layer2 = new OpenLayers.Layer.WMS(
"province", "http://localhost:8088/geoserver/lzugis/wms",
{
"LAYERS": 'province',
"STYLES": '',
format: 'image/png'
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
map1.addLayer(layer1);
map2.addLayer(layer2);
map1.addControl(new OpenLayers.Control.Zoom());
map1.addControl(new OpenLayers.Control.Navigation());
map2.addControl(new OpenLayers.Control.Zoom());
map2.addControl(new OpenLayers.Control.Navigation());
map1.zoomToExtent(bounds);
map2.zoomToExtent(bounds);
map1.events.register("move",map1,function(){
var extent = map1.getExtent();
map2.zoomToExtent(extent);
});
map2.events.register("move",map2,function(){
var extent = map2.getExtent();
map1.zoomToExtent(extent);
});
}
</script>
</head>
<body onLoad="init()">
<div id="map1" class="map" style="border-right: 1px solid #000"></div>
<div id="map2" class="map"></div>
</body>
</html>