如何根据GeoJSON功能自动设置缩放和居中

时间:2015-03-24 15:23:56

标签: openlayers-3

我从.json文件加载一些功能,并希望自动设置视图wuth缩放以查看所有加载的功能。我用户OpenLayers版本3。 这就是我所拥有的:

var gjsonFile = new ol.layer.Vector({
    source: new ol.source.GeoJSON({
        url: 'map.json',
        projection: 'EPSG:3857'
    })
    })
});

var map = new ol.Map({
    view: new ol.View({
        center: ol.proj.transform([-77.0087,38.8691], 'EPSG:4326', 'EPSG:3857'),
        zoom: 12
    }),
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
        }),
        gjsonFile
    ],
    target: 'map1'
});

1 个答案:

答案 0 :(得分:0)

矢量源具有#getExtent()方法,该方法为您提供当前在源中加载的所有功能的范围。要在加载文件后立即将地图视图设置为该范围,请添加以下代码:

var source = gjsonFile.getSource();
var onChangeKey = source.on('change', function() {
  if (source.getState() == 'ready') {
    source.unByKey(onChangeKey);
    map.getView().fitExtent(source.getExtent(), map.getSize());
  }
});