OL3：缩放到地图上的矢量图层 [英] OL3: Zoom to vector layer on map

问题描述

我有一个带有openlayers 3和矢量图层的地图。
我想映射以调整大小到这个矢量图层，但到目前为止，我能够得到的是将地图置于此向量的最后一个点上，因为在创建时无法访问矢量图层的点地图：

I have a map with openlayers 3 and a vector layer. I want to map to be resized to this vector layer, but so far all I was able to get was to center the map on the last point of this vector, since the points of the vector layer are not accessible while creating the map:

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

推荐答案

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

So... after a few days of testing and thinking I solved the problem. Not without further problems, but calculating the borders serverside and transmitting them to the script made it a bit easier.

Javascript解决问题的时间很短：

The Javascript is fairly short for solving the problem:

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

这篇关于OL3：缩放到地图上的矢量图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！