openlayers3 自定義鷹眼縮圖

jiym發表於2017-03-15
S3

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的放縮聯動，開啟和關閉按鈕等。


相關文章