Openlayers3自定义鹰眼地图

var overviewMap=new TMap('overviewmap',[120.349,30.34],18,'emp'); //初始化鹰眼地图，这是一个自定义的地图类
this.overviewMap=overviewMap;
var map=this.mainmap; // 对主地图的引用

var mainview=map.getView(); // 主视图
var overviewView=overviewMap.getView(); //鹰眼视图


// 增加缩略图框
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(56,166,230,0.4)'}),
        stroke: new ol.style.Stroke({
            color: 'white', width: 2
        })
    }),
    zIndex:1000
});
overviewMap.addLayer(vectorLayer);


// 设置主地图和鹰眼图互动,主地图移动，鹰眼地图跟着移动      


// 下面这两个参数，其实是为了解决循环调用的问题，比如同时定义了主地图的分辨率改变事件，和鹰眼地图的分辨率改变事件，
// 如果不进行区分，在主地图分辨率改变的同时，就应该调用鹰眼，改变鹰眼地图的分辨率
// 同理在改变鹰眼地图的分辨率的同时也应该改变主地图的分辨率，这就会造成一个循环的调用，出现内存问题
// 最本质的就是，就是改变主分辩率的时候，只改变一次鹰眼分辨率，在触发鹰眼分辨率改变事件的时候，不要再次触发主地图分辨率事件的改变，
// 同理在处理鹰眼分别率改变事件的时候也是如此，
// 还有就是主地图和鹰眼地图的地图中心改变事件也是同样的道理。
var overviewMapActiveFlag=false;
var mapActiveFlag=false;


// 主地图分辨率改变了,鹰眼地图的地图中心也应该跟着改变
mainview.on("change:center",function(){
    if(!overviewMapActiveFlag&&!mapActiveFlag){
        overviewMapActiveFlag=true;
        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(){
            overviewMap.getView().setCenter(map.getView().getCenter());
        },300);
    }
    mapActiveFlag=false;
    
});

// 鹰眼地图的中心改变了，主地图的中心也应该跟着改变
overviewView.on("change:center",function(){
    // 激活主地图
    if(!mapActiveFlag&&!overviewMapActiveFlag){
        mapActiveFlag=true;
        mainview.setCenter(overviewView.getCenter());
    }
    overviewMapActiveFlag=false;

});


// 主地图分辨率改变
var overChangeFlag=false;
var mapChangeFlag=false;
mainview.on("change:resolution",function(){
    if(!overChangeFlag&&!mapChangeFlag){
        overChangeFlag=true;
        var zoom=mainview.getZoom();
        zoom=zoom-3<0?0:zoom-3;
        overviewMap.getView().setZoom(zoom);

    }
    mapChangeFlag=false;

});
// 鹰眼地图分辨率改变
overviewView.on("change:resolution",function(){
    if(!mapChangeFlag&&!overChangeFlag){
        mapChangeFlag=true;
        var zoom=overviewView.getZoom();
        zoom=zoom+3>20?20:zoom+3;
        mainview.setZoom(zoom);
    }
    overChangeFlag=false;
});


// 鹰眼图鼠标样式
overviewMap.on('pointermove', function (evt) {
    overviewMap.getTargetElement().style.cursor = 'pointer';
});

// 鹰眼图点击
overviewMap.on('click',function(e){
    var coor = e.coordinate;
    map.getView().setCenter(coor);
});

// 关闭鹰眼
$(".overviewmap-wrap .overviewmap-close").on("click",function(){
    var $this=$(this);
    if($this.hasClass("open")){
        $this.removeClass("open");
        $(".overviewmap-wrap .overviewmap").hide();
        $this.html("&#xe647;");
    }else{
        $this.addClass("open");
        $(".overviewmap-wrap .overviewmap").show();
        $this.html("&#xe60f;");
    }

})

// 增加鹰眼地图可移动的事件
var translateInteraction=new ol.interaction.Translate({
    features:new ol.Collection([polygonFeature])
});
translateInteraction.on("translateend",function(){
    // 获取图形的中心
    var ext=polygonFeature.getGeometry().getExtent();
    var center=ol.extent.getCenter(ext);
    // 调整主地图的中心
    map.getView().setCenter(center);
});
overviewMap.addInteraction(translateInteraction);