OL3实现多图联动

概述：

很多会有多图联动的需求，本文讲述如何在OL3中实现多图的联动。在OL3中，实现多图联动比较简单，只要所有的map通用一个view即可。

 

效果：

 

测试代码：

[html] view plain copy print?
    1. <html xmlns="http://www.w3.org/1999/xhtml">  
    2. <head>  
    3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    4.     <title>multimap</title>  
    5.     <link rel="stylesheet" type="text/css" href="http://localhost/ol3/css/ol.css"/>  
    6.     <style type="text/css">  
    7.         body, #map1,#map2 {  
    8.             border: 0px;  
    9.             margin: 0px;  
    10.             padding: 0px;  
    11.             font-size: 13px;  
    12.             overflow: hidden;  
    13.         }  
    14.         #map1,#map2{  
    15.             width: 45%;  
    16.             height: 100%;  
    17.             float: left;  
    18.             border: 1px solid #f00;  
    19.         }  
    20.     </style>  
    21.     <script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script>  
    22.     <script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script>  
    23.     <script type="text/javascript">  
    24.         function init(){  
    25.             var format = 'image/png';  
    26.             var bounds = [73.4510046356223, 18.1632471876417,  
    27.                 134.976797646506, 53.5319431522236];  
    28.             var untiled = new ol.layer.Image({  
    29.                 source: new ol.source.ImageWMS({  
    30.                     ratio: 1,  
    31.                     url: 'http://localhost:8088/geoserver/lzugis/wms',  
    32.                     params: {'FORMAT': format,  
    33.                         'VERSION': '1.1.1',  
    34.                         LAYERS: 'lzugis:province',  
    35.                         STYLES: ''  
    36.                     }  
    37.                 })  
    38.             });  
    39.             var view  = new ol.View({  
    40.                 projection: new ol.proj.Projection({  
    41.                     code: 'EPSG:4326',  
    42.                     units: 'degrees'  
    43.                 })  
    44.             })  
    45.             var map1 = new ol.Map({  
    46.                 controls: ol.control.defaults({  
    47.                     attribution: false  
    48.                 }),  
    49.                 target: 'map1',  
    50.                 layers: [untiled],  
    51.                 view:view  
    52.             });  
    53.             map1.getView().fitExtent(bounds, map1.getSize());  
    54.             var map2 = new ol.Map({  
    55.                 controls: ol.control.defaults({  
    56.                     attribution: false  
    57.                 }),  
    58.                 target: 'map2',  
    59.                 layers: [untiled],  
    60.                 view:view  
    61.             });  
    62.             map2.getView().fitExtent(bounds, map2.getSize());  
    63.         }  
    64.     </script>  
    65. </head>  
    66. <body onLoad="init()">  
    67. <div id="map1"></div>  
    68. <div id="map2"></div>  
    69. </body>  
    70. </html> 
posted @ 2016-07-18 15:16  韩慧兵  阅读(200)  评论(0)  编辑  收藏  举报