openlayers3 自定义鹰眼缩略图

摘要: 使用calculateExtent，通过当前map的view，获得地图显示的坐标范围，并根据范围生成feature。
主要是演示map.getView().calculateExtent(map.getSize())的应用

openlayers3自带的鹰眼缩略图控件功能很局限，想到自己动手去做，结果很容易就做出来了，这里主要用到的是两个map互相联动。我粗糙的做了两种缩略图，介绍如下：

一、缩略图可点击，点击后更改地图

1.创建map和overview的html

<div id='map' src="" style="width: 100%;height: 680px;position: relative;">

<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;" >

<div id="overview" style="background-color: #fff;width: 290px;height:290px;margin: 3px 3px 3px 3px;border:1px solid #7b98bc"></div>

</div>

</div>

2.创建两个地图

var map = new ol.Map({

target: 'map',

layers:[layer],

view: new ol.View({

projection:'EPSG:4326',

center:[121.01371765136719,29.139690399169922],

zoom:14,

maxZoom:18})

});

var overview = new ol.Map({

target: 'overview',

layers:[layer],

view: new ol.View({

projection: 'EPSG:4326',

center:[121.01371765136719,29.139690399169922],

zoom:11,

maxZoom:11,

minZoom:11})

});

3.在缩略图中添加map的extent框

var extent = map.getView().calculateExtent(map.getSize());

var coor=[[[extent[0],extent[1]],[extent[2],extent[1]],[extent[2],extent[3]],[extent[0],extent[3]],[extent[0],extent[1]]]];

var polygonFeature = new ol.Feature(new ol.geom.Polygon(coor));

var vectorSource = new ol.source.Vector({

features: [polygonFeature]

});

var vectorLayer = new ol.layer.Vector({

source:vectorSource,

style: new ol.style.Style({

fill: new ol.style.Fill({color: 'rgba(160,160,160,0.2)'}),

stroke: new ol.style.Stroke({

color: 'white', width: 2

})

})

});

overview.addLayer(vectorLayer);

4.设置map和overview互相联动

map.on('moveend',function(){

var extent = map.getView().calculateExtent(map.getSize());

var coor=[[[extent[0],extent[1]],[extent[2],extent[1]],[extent[2],extent[3]],[extent[0],extent[3]],[extent[0],extent[1]]]];

vectorLayer.getSource().getFeatures()[0].getGeometry().setCoordinates(coor);

setTimeout(function(){

var view = overview.getView();

var pan = ol.animation.pan({

duration: 250,

source: (view.getCenter())

});

overview.beforeRender(pan);

overview.getView().setCenter(map.getView().getCenter());

},300);

})

overview.on('pointermove', function (evt) {

overview.getTargetElement().style.cursor = 'pointer';

});

overview.on('click',function(e){

var coor = e.coordinate;

map.getView().setCenter(coor);

})

效果如下：



更详细，可参考：http://blog.csdn.net/u014529917/article/details/62216130