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的放縮聯動,開啟和關閉按鈕等。
相關文章
- 自定義圖片裁剪之雙指縮放思路
- 鷹眼智客營銷系統
- 【IDL】滑鼠資訊顯示介面(同理可實現鷹眼圖等)
- win10怎麼開啟自定義縮放 win10怎麼自定義縮放Win10
- Flutter 自定義縮放控制元件Flutter控制元件
- Knative Autoscaler 自定義彈性伸縮
- QT 自定義QGraphicsItem 縮放後旋轉 圖形出現漂移問題QT
- Vue富文字帶圖片修改圖片大小自定義選擇項自定義字型Vue自定義字型
- Win10電腦怎麼自定義縮放螢幕比例?Win10系統自定義縮放螢幕比例教程Win10
- PNG圖片壓縮原理解析--屌絲的眼淚
- 6.自定義圖片剪下
- uniapp自定義卡片輪播圖APP
- AUTOCAD——新增自定義填充圖案
- Spring Boot - 自定義 Banner 圖案Spring Boot
- Win10如何自定義硬碟圖示_win10自定義硬碟圖示的教程Win10硬碟
- win10 自定義縮放比例被鎖定怎麼辦_win10 自定義縮放比例被鎖定如何解決Win10
- 自定義上傳圖片拼圖遊戲遊戲
- 永宏BI 自定義繪圖(環狀圖)繪圖
- Flutter 112: 圖解自定義 ACEPieWidget 餅狀圖Flutter圖解
- 自定義百度地圖元件地圖元件
- WebView自定義長按圖片功能WebView
- iOS自定義控制元件:自定義TableView、CollectionView空資料佔點陣圖iOS控制元件View
- 眼圖分析
- 自定義檢視---圓角柱狀圖(一)
- 小技巧:Flutter如何引用自定義圖示Flutter
- Highcharts 實現自定義匯出圖片
- Qt繪製自定義箭頭圖元QT
- 自定義View合輯(2)-餅狀圖View
- flutter 用 CustomPaint 繪製自定義圖案FlutterAI
- Typora中自定義命令上傳圖片
- Flutter 自定義列表以及本地圖片引用Flutter地圖
- 百度地圖API : 自定義標註圖示地圖API
- 2018-06-14: JS 自定義 截圖、裁剪JS
- Flutter 自定義 Widget 之餅形圖實戰Flutter
- UEditor 自定義圖片視訊尺寸校驗
- 【Android自定義View】繪圖之文字篇(三)AndroidView繪圖
- 【Android自定義View】繪圖之Path篇(二)AndroidView繪圖
- allure報告自定義logo圖片和文字Go
- Android 自定義帶動畫的柱狀圖Android動畫