使用多个标记居中和缩小视图

Question

已创建地图并在其上添加了多个标记：

 function add_map_point(lat, lon) {
      let vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lat), parseFloat(lon)], 'EPSG:4326', 'EPSG:3857')),
          })]
        }),
        style: new ol.style.Style({
          image: new ol.style.Icon({
            anchor: [0.5, 0.5],
            anchorXUnits: "fraction",
            anchorYUnits: "fraction",
            src: fsi.constants.image_location + "/Maps/marker-red.png"
          })
        })
      });

      map.addLayer(vectorLayer);
    }

    // instantiates map 
    const map = new ol.Map({
      target: identifier,
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([getCurrentPosition().lon, getCurrentPosition().lat]),
        zoom: opts.zoom
      })
    })

并且正在向地图添加标记：

if (pinpoints.length > 0) {
  // shows pinpoints on the map
  pinpoints.map(el => {
    return add_map_point(el.lon, el.lat);
  })
}
else {
  var latLon = getCurrentPosition();

  view: new ol.View({
    center: ol.proj.fromLonLat([latLon.lon, latLon.lon]),
    zoom: opts.zoom
  })
}

添加标记后，我希望地图尽可能地缩放，以便所有标记同时可见。怎么做？

Answer 1

使用您当前的代码，您需要构建一个转换坐标数组并适合它们的边界范围

map.getView().fit(ol.extent.boundingExtent(arrayOfCoordinates));

您真的需要为每个标记创建一个单独的图层吗？如果您创建了一个图层并向其添加了所有标记，您可以使用

map.getView().fit(vectorLayer.getSource().getExtent());

使用多个标记居中和缩小视图

Centering and zooming out view with multiple markers

openlayers-6