5

我有一张带有 openlayers 3 和矢量图层的地图。我想将映射调整为该矢量图层的大小，但到目前为止，我所能得到的只是将地图集中在该矢量的最后一个点上，因为在创建地图时无法访问矢量图层的点：

if (trackMap != null) {
  for (var i = 0; i < trackMap.length; i++) {
    var trackInfo = trackMap[i];
    lat = parseFloat(trackInfo.lat);
    lon = parseFloat(trackInfo.lon);

    var layergpx = new ol.layer.Vector({
      source: new ol.source.Vector({
        parser: new ol.parser.GPX(),
        url: '${contextRoot}/gps/gpx2' + trackInfo.url
      })
    });
    layers.push(layergpx);
    vectorLayers.push(layergpx);
  }
}

map = new ol.Map({
  controls: ol.control.defaults().extend([
    new ol.control.FullScreen()
  ]),
  layers: layers,
  renderer: ol.RendererHint.CANVAS,
  target: 'map',
  view: new ol.View2D({
    center: ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'),
    zoom: 13
  })
});
4

4 回答 4

6

为什么不适合 ol.source.Vector 的范围？

var source = new ol.source.Vector();

...

map.getView().fitExtent(source.getExtent(), map.getSize());
于 2014-05-01T02:38:01.280 回答
6

从版本3.7.0 ol.View.fitExtent()被替换为ol.View.fit() 

var source = new ol.source.Vector();
map.getView().fit(source.getExtent(), map.getSize());
于 2015-10-09T08:13:01.640 回答
1

所以......经过几天的测试和思考，我解决了这个问题。并非没有进一步的问题，但计算边界服务器端并将它们传输到脚本使其更容易一些。

Javascript 对于解决问题来说相当简短：

if (minLon != null && minLat != null && maxLon != null && maxLat != null){
 var bottomLeft = ol.proj.transform([minLon, minLat], 'EPSG:4326', 'EPSG:3857');
 var topRight = ol.proj.transform([maxLon, maxLat], 'EPSG:4326', 'EPSG:3857');
 extent = new ol.extent.boundingExtent([bottomLeft,topRight]);
 map.getView().fitExtent(extent, map.getSize());
}
于 2014-01-13T17:32:40.183 回答
0

我有一种方法可以使视图居中，而不必担心将度数从一个标准转换为另一个标准。想知道这个技巧是否适用于你。您首先从所有来源获取范围。分解它们的中心并将该中心输入到您的视口：

try {
    extentEMRG = geoSrcEMRG.getExtent();
    extentWARN = geoSrcWARN.getExtent();
    ext2Layers = ol.extent.getIntersection(extentEMRG, extentWARN);
    center2Layers = ol.extent.getCenter(ext2Layers);
    //alert(center2Layers);
} catch (e) {
    alert(e.message);
}
 var map = new ol.Map({
    view: new ol.View({
        center: center2Layers
        , zoom: 8
    })
    , layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
        , vLayerWARN 
        , vLayerEMRG 
    ] ....
于 2014-11-12T17:27:55.203 回答