openlayers3 自定義鷹眼縮略圖

openlayers3自帶的鷹眼縮略圖控件功能很侷限，想到本身動手去作，結果很容易就作出來了，這裏主要用到的是兩個map互相聯動。我粗糙的作了兩種縮略圖，介紹以下：

1、縮略圖可點擊，點擊後更改地圖

1.建立map和overview的html

1. <div id='map'  src="" style="width: 100%;height: 680px;position: relative;">  
2.     <div style="position: absolute;bottom:0px;right: 0px;z-index: 200;width: 296px;height:296px;background-color: #fff;border: 1px solid #555;border-radius: 3px;" >  
3.         <div id="overview" style="background-color: #fff;width: 290px;height:290px;margin: 3px 3px 3px 3px;border:1px solid #7b98bc"></div>  
4.     </div>  
5. </div>  

2.建立兩個地圖

1. var map = new ol.Map({  
2.         target: 'map',  
3.         layers:[layer],  
4.         view: new ol.View({  
5.             projection:'EPSG:4326',  
6.             center:[121.01371765136719,29.139690399169922],  
7.             zoom:14,  
8.             maxZoom:18})  
9.     });  
10.   
11.     var overview = new ol.Map({  
12.         target: 'overview',  
13.         layers:[layer],  
14.         view: new ol.View({  
15.             projection: 'EPSG:4326',  
16.             center:[121.01371765136719,29.139690399169922],  
17.             zoom:11,  
18.             maxZoom:11,  
19.             minZoom:11})  
20.     });  

3.在縮略圖中添加map的extent框

1. var extent = map.getView().calculateExtent(map.getSize());  
2. var coor=[[[extent[0],extent[1]],[extent[2],extent[1]],[extent[2],extent[3]],[extent[0],extent[3]],[extent[0],extent[1]]]];  
3. var polygonFeature = new ol.Feature(new ol.geom.Polygon(coor));  
4.   
5. var vectorSource =  new ol.source.Vector({  
6.     features: [polygonFeature]  
7. });  
8.   
9. var vectorLayer = new ol.layer.Vector({  
10.     source:vectorSource,  
11.     style: new ol.style.Style({  
12.         fill: new ol.style.Fill({color: 'rgba(160,160,160,0.2)'}),  
13.         stroke: new ol.style.Stroke({  
14.             color: 'white', width: 2  
15.         })  
16.     })  
17. });  
18. overview.addLayer(vectorLayer);  

4.設置map和overview互相聯動

1. map.on('moveend',function(){  
2.     var extent = map.getView().calculateExtent(map.getSize());  
3.     var coor=[[[extent[0],extent[1]],[extent[2],extent[1]],[extent[2],extent[3]],[extent[0],extent[3]],[extent[0],extent[1]]]];  
4.     vectorLayer.getSource().getFeatures()[0].getGeometry().setCoordinates(coor);  
5.     setTimeout(function(){  
6.         var view = overview.getView();  
7.         var pan = ol.animation.pan({  
8.             duration: 250,  
9.             source: (view.getCenter())  
10.         });  
11.         overview.beforeRender(pan);  
12.         overview.getView().setCenter(map.getView().getCenter());  
13.     },300);  
14. })  
15.   
16. overview.on('pointermove', function (evt) {  
17.     overview.getTargetElement().style.cursor = 'pointer';  
18. });  
19.   
20. overview.on('click',function(e){  
21.     var coor = e.coordinate;  
22.     map.getView().setCenter(coor);  
23. })  

效果以下：

更詳細，可參考：http://blog.csdn.net/u014529917/article/details/62216130