[英]Zoom (center) map to markers in OpenLayer3
我的OpenLayer3地圖有問題。 當我在地圖上添加一些標記時,我想調整地圖大小並更改縮放比例,以便在屏幕上設置所有標記。
我的代碼如下:
/** CREATE MARKERS **/
for (var i=0;i<1;i++){
var iconFeature = new ol.Feature({
geometry: new
ol.geom.Point(ol.proj.transform([Math.random()*360-180, Math.random()*180-90], 'EPSG:4326', 'EPSG:3857'))
});
vectorSource.addFeature(iconFeature);
var newBound = ol.Bounds();
newBound.extend([Math.random()*360-180, Math.random()*180-90]);
map.zoomToExtent(newBound);
}
/** MARKER STYLE **/
var iconStyle = [
new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 1,
scale: 0.07,
src: 'marker.png'
}))
})
];
/** ADD LAYER VECTOR **/
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: iconStyle
});
/** INIT MAP **/
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
}),
vectorLayer
],
overlays: [overlay],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
有沒有辦法將地圖縮放到標記?
您的邏輯和某些OL參考中都有一些錯誤。 首先,您應該創建一個包含所有標記的ol.Extent。 然后使用地圖的視圖進行調整。
// create ten random markers
for (var i = 0; i < 10; i++) {
var point = new ol.geom.Point(ol.proj.transform([Math.random() * 50, Math.random() * 50], 'EPSG:4326', 'EPSG:3857'));
var iconFeature = new ol.Feature({
geometry: point
});
vectorSource.addFeature(iconFeature);
}
// make the map's view to zoom and pan enough to display all the points
map.getView().fit(vectorSource.getExtent(), map.getSize());
這是一個矮人:
繪制矢量特征后,您可以使用以下方法獲得范圍:
vector.on('render',function(e){
var myextent = vector.getSource().getExtent();
})
然后,您可以使用以下方法縮放到此程度:
map.getView().fit(myextent , map.getSize());
因此,如果您要使用render
事件
vector.on('render',function(e){
map.getView().fit(vector.getSource().getExtent(), map.getSize());
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.