概述：
在前面有篇文章提到了OL3中的多地图联动展示，在本节中讲述在OL2中实现多地图的联动展示。
效果：
实现思路：
在Ol2中，实现多地图的联动展示也是比较简单的。查看OL2中map的api，可知只要添加map的move事件即可。
实现代码如下：
<html xmlns=""><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=""/><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", ":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", ":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>
版权声明：本文为博主原创文章，，未经博主允许不得转载。
依赖别人的人等于折断了自己的翅膀，永远也体会不到飞翔的快乐。
