Don*_*rco 5 javascript openlayers-3
我有一个带有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
})
});
Run Code Online (Sandbox Code Playgroud)
为什么不适合ol.source.Vector的范围?
var source = new ol.source.Vector();
Run Code Online (Sandbox Code Playgroud)
...
map.getView().fitExtent(source.getExtent(), map.getSize());
Run Code Online (Sandbox Code Playgroud)
从版本3.7.0 ol.View.fitExtent()替换为ol.View.fit()
var source = new ol.source.Vector();
map.getView().fit(source.getExtent(), map.getSize());
Run Code Online (Sandbox Code Playgroud)
所以......经过几天的测试和思考我解决了这个问题。并非没有进一步的问题,但计算服务器端边界并将其传输到脚本使其变得更容易一些。
解决问题的 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());
}
Run Code Online (Sandbox Code Playgroud)