openlayers3 自定义鹰眼缩略图

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);
    })

效果如下：

二、缩略图的地图视图框可拖动，拖动后更改地图

1. 创建map和overview的html

同方法一，步骤1

2. 定义缩略图视图框的拖拽事件(handleDown、handledrag、handleMove、handleUp),并在拖拽结束后，获取试图框的中心点，关于拖拽事件，参照地图交互示例：

http://openlayers.org/en/latest/examples/custom-interactions.html?q=polygon

 var app = {};


    /**
     * @constructor
     * @extends {ol.interaction.Pointer}
     */
    app.Drag = function() {

        ol.interaction.Pointer.call(this, {
            handleDownEvent: app.Drag.prototype.handleDownEvent,
            handleDragEvent: app.Drag.prototype.handleDragEvent,
            handleMoveEvent: app.Drag.prototype.handleMoveEvent,
            handleUpEvent: app.Drag.prototype.handleUpEvent
        });

        /**
         * @type {ol.Pixel}
         * @private
         */
        this.coordinate_ = null;

        /**
         * @type {string|undefined}
         * @private
         */
        this.cursor_ = 'pointer';

        /**
         * @type {ol.Feature}
         * @private
         */
        this.feature_ = null;

        /**
         * @type {string|undefined}
         * @private
         */
        this.previousCursor_ = undefined;

    };
    ol.inherits(app.Drag, ol.interaction.Pointer);


    /**
     * @param {ol.MapBrowserEvent} evt Map browser event.
     * @return {boolean} `true` to start the drag sequence.
     */
    app.Drag.prototype.handleDownEvent = function(evt) {
        var map = evt.map;

        var feature = map.forEachFeatureAtPixel(evt.pixel,
                function(feature) {
                    return feature;
                });

        if (feature) {
            this.coordinate_ = evt.coordinate;
            this.feature_ = feature;
        }

        return !!feature;
    };


    /**
     * @param {ol.MapBrowserEvent} evt Map browser event.
     */
    app.Drag.prototype.handleDragEvent = function(evt) {
        var deltaX = evt.coordinate[0] - this.coordinate_[0];
        var deltaY = evt.coordinate[1] - this.coordinate_[1];

        var geometry = /** @type {ol.geom.SimpleGeometry} */
                (this.feature_.getGeometry());
        geometry.translate(deltaX, deltaY);

        this.coordinate_[0] = evt.coordinate[0];
        this.coordinate_[1] = evt.coordinate[1];
    };


    /**
     * @param {ol.MapBrowserEvent} evt Event.
     */
    app.Drag.prototype.handleMoveEvent = function(evt) {
        if (this.cursor_) {
            var map = evt.map;
            var feature = map.forEachFeatureAtPixel(evt.pixel,
                    function(feature) {
                        return feature;
                    });
            var element = evt.map.getTargetElement();
            if (feature) {
                if (element.style.cursor != this.cursor_) {
                    this.previousCursor_ = element.style.cursor;
                    element.style.cursor = this.cursor_;
                }
            } else if (this.previousCursor_ !== undefined) {
                element.style.cursor = this.previousCursor_;
                this.previousCursor_ = undefined;
            }
        }
    };


    /**
     * @return {boolean} `false` to stop the drag sequence.
     */
    app.Drag.prototype.handleUpEvent = function() {
        var testPolygon = new ol.geom.Polygon(this.feature_.getGeometry().getCoordinates());
        tooltipCoord = testPolygon.getInteriorPoint().getCoordinates();//线的形成面的中间点
        map.getView().setCenter(tooltipCoord);
        this.coordinate_ = null;
        this.feature_ = null;
        return false;
    };

3.创建地图和缩略图,并将拖拽交互事件添加到缩略图中

    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({
        interactions: ol.interaction.defaults().extend([new app.Drag()]),
        target: 'overview',
        layers:[layer],
        view: new ol.View({
            projection: 'EPSG:4326',
            center:[121.01371765136719,29.139690399169922],
            zoom:11,
            maxZoom:11,
            minZoom:11})
    });

4.在缩略图中添加map的extent框
同方法一，步骤3

5.设置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);
    })

效果如下：

结束...如果想更完善的话可以设置map和overview的放缩联动，打开和关闭按钮等。