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的放缩联动，打开和关闭按钮等。
转载自：https://blog.csdn.net/u014529917/article/details/62216130
