OpenLayer3のマーカーにズーム（中央）マップ

Question

私の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 
    }) 
}); 

がマーカーにマップをズームする方法はあります：

私のコードは次のようになりますか？

vector.on('render',function(e){ 
var myextent = vector.getSource().getExtent(); 
}) 

をそしてあなたが使用してこの範囲にズーム可能性があります：あなたが使用しようとしているのであれば

map.getView().fit(myextent , map.getSize()); 

をあなたのベクタフィーチャ一度

Answer 1

ロジックと一部の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()); 

ここplunkerの当時：

https://plnkr.co/edit/KVL14vdOSqJBxZz44s3u?p=preview

Answer 2

は、使用して範囲を得ることが描かれていますrenderイベント

vector.on('render',function(e){ 
map.getView().fit(vector.getSource().getExtent(), map.getSize()); 
})