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

有没有办法将地图缩放到标记？

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

这是一个吸烟者：

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

Answer 2

绘制完向量要素后，您可以使用以下方式获取范围：

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

将（中心）地图缩放到OpenLayer3中的标记

2 个答案: