Zoom (Mitte) Karte zu Markern in OpenLayer3

Question

Ich habe ein Problem mit meiner OpenLayer3 Karte. Wenn ich einige Markierungen zur Karte hinzufüge, möchte ich die Größe meiner Karte ändern und den Zoom so ändern, dass alle Markierungen auf dem Bildschirm gesetzt sind.

Mein Code sieht so aus:

/** 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 
    }) 
}); 

Gibt es eine Möglichkeit, die Karte zu Marker vergrößern?

Answer 1

Sie haben einige Fehler in Ihrer Logik und in einigen OL-Referenzen . Zuerst sollten Sie einen ol.Extent erstellen, der alle Marker enthält. Dann die Ansicht der Karte verwenden Sie es in passen

// 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()); 

Hier ist ein Plunker.

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

Answer 2

Sobald Ihre Vektor-Features wurde gezogen Sie das Ausmaß erhalten können mit:

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

Und dann können Sie in diesem Umfang heran mit:

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

Also, wenn Sie die verwenden werden render Ereignis

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