簡體   English   中英

縮放(中心)地圖到OpenLayer3中的標記

[英]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());

這是一個矮人:

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

繪制矢量特征后,您可以使用以下方法獲得范圍:

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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM