之前在ol2中多图联动需要监听地图move事件,在事件中对其他地图进行位置更新来达到多图联动的效果,在ol4中可以直接通过多个地图共享一个view来达到多图联动的效果。
直接上代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多图联动</title> <link rel="stylesheet" href="ol.css" type="text/css"> <style> body{ height: 100%; width: 100%; position: absolute; overflow: hidden; } .top{ height: 50%; width: 100%; float:left; } .bottom{ height: 50%; width: 100%; float:left; } .left_top { height: 100%; width: 50%; float:left; } .right_top { height: 100%; width: 50%; float:left; } .left_bottom { height: 100%; width: 50%; float:left; } .right_bottom { height: 100%; width: 50%; float:left; } </style> <script src="ol.js" type="text/javascript"></script> </head> <body> <div class="top"> <div id="map1" class="left_top"> </div> <div id="map2" class="right_top"> </div> </div> <div class="bottom"> <div id="map3" class="left_bottom"> </div> <div id="map4" class="right_bottom"> </div> </div> <script> function createMap(_div , _view){ var osm = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ target: _div, layers:[osm], view: _view }); return map ; } var view = new ol.View({ center: [ 120, 30], zoom: 10, projection: 'EPSG:4326' }); var map1 = createMap('map1' , view); var map2 = createMap('map2' , view); var map3 = createMap('map3' , view); var map4 = createMap('map4' , view); </script> </body> </html>
效果: