javascript OL3：放大到地图上的矢量图层
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20947149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
OL3: Zoom to vector layer on map
提问by DonMarco
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:
我有一个带有 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
})
});
采纳答案by DonMarco
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.
所以......经过几天的测试和思考，我解决了这个问题。并非没有进一步的问题，但是计算服务器端的边界并将它们传输到脚本使它变得更容易一些。
The Javascript is fairly short for solving the problem:
解决问题的 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());
}
回答by goodies4uall
Why not just fit to the extent of the ol.source.Vector?
为什么不适合 ol.source.Vector 的范围？
var source = new ol.source.Vector();
...
...
map.getView().fitExtent(source.getExtent(), map.getSize());
回答by Peter
回答by Jenna Leaf
I have a way of doing the view centering without worrying about transforming the degrees from one standard to another. Wondering this trick would apply to you. You first get the extents from all your sources. Factorizing their center and input that center to your viewport:
我有一种方法可以使视图居中，而不必担心将度数从一个标准转换为另一个标准。想知道这个技巧是否适用于你。您首先从所有来源获取范围。分解它们的中心并将该中心输入到您的视口中：
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
] ....
