openlayers3 : center and zoom extent to KML limits

Question

Basic script to display a kml file on a tiled background with openlayer; I just switched from version 2 to 4.65, how can I zoom to the limits of the kml geometry ("vector" here) ?

        var wmsSource = new ol.source.TileWMS({
            url: "https://sedac.ciesin.columbia.edu/geoserver/wms",
            params: {"LAYERS": "other:wwf-terrestrial-biomes", "TILED": true},
            serverType: "geoserver"
          });

        var wmsLayer = new ol.layer.Tile({
            opacity: 0.15,
            visible: true,
            source: wmsSource
          });

        var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
            url: "kml_file.kml",
            format: new ol.format.KML()
        })
    });

        var map = new ol.Map({
            target: "map-canvas",
            layers: [wmsLayer, vector],
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({units: "metric"}), 
                new ol.control.FullScreen()
            ]),
            view: new ol.View({
                center: ol.proj.transform([37.41, 8.82], "EPSG:4326", "EPSG:3857"),
                zoom: 3
            })
        });

I'd like to replace the zoom: 3 and have the map centered and extended to the kml limits ?

Note : I used kmllayer.events.register("loadend", kmllayer, function(evt){map.zoomToExtent(kmllayer.getDataExtent())}); with OpenLayers2...

Thomas Gratier · Accepted Answer · 2018-05-29T08:55:34.340

1

The following should do what you want

var vectorSource = vector.getSource();
vectorSource.once('change', function(e){
    if (vectorSource.getState() === 'ready') {
        var extent = vectorSource.getExtent();
        map.getView().fit(extent);
    }
});

Solution mainly adapted from How to get the extent of a GeoJSON vector source? (changed the variable name & removed second argument in map.getView().fit (required in the old time, now optional, not needed most of the time, like here)

edited May 29 '18 at 08:55

answered May 28 '18 at 21:41

Thomas Gratier

2,311
1
14
15

Thanks, but I get a `TypeError: vector.getState is not a function` in the console, and no centering or zoom effect... I added your code after mine. Maybe I should use an older library than 4.65 or 5.0.0, I see some of the kml polygons are white while they should be colored and the full screen display is quite dark at least the background is nearly black, but maybe this is normal... – S.E. May 29 '18 at 05:31
Changed: I was using the layer instead of the source. Try again :) – Thomas Gratier May 29 '18 at 08:56

score 0 · Answer 2 · answered May 29 '18 at 09:39

OK, I need to declare the kml source as a separate new ol.source.Vectorvariable, here vectorSource, and read .getExtent() from this variable, not from the ol.layer.Vector :

        var wmsSource = new ol.source.TileWMS({
            url: "https://sedac.ciesin.columbia.edu/geoserver/wms",
            params: {"LAYERS": "other:wwf-terrestrial-biomes", "TILED": true},
            serverType: "geoserver"
          });

        var wmsLayer = new ol.layer.Tile({
            opacity: 0.15,
            visible: true,
            source: wmsSource
          });

        var vectorSource = new ol.source.Vector({
            url: "'.$kml_f.'",
            format: new ol.format.KML()
        });

        var vector = new ol.layer.Vector({
            source: vectorSource
    });

        var map = new ol.Map({
            target: "map-canvas",
            layers: [wmsLayer, vector],
            controls: ol.control.defaults().extend([
                new ol.control.ScaleLine({units: "metric"}), 
                new ol.control.FullScreen()
            ]),
            view: new ol.View({
                center: ol.proj.transform([37.41, 8.82], "EPSG:4326", "EPSG:3857"),
                zoom: 4,
            })
        });

        vector.once("change", function(e){
                var extent = vectorSource.getExtent();
                map.getView().fit(extent);
        });

Thanks for your help !

openlayers3 : center and zoom extent to KML limits

2 Answers2