AnswerBun.com

Openlayers 4 and View Extent

I have been working on openlayers 4 and specifically my question is regarding limiting the extent the user sees, let’s say 2 km by 2km is the viewing area, this configuration was done using the ol.View class’s extent attribute.

In that case for the initial zoom level, I’m able to see the entire area of 4kms by panning across, when I zoom into the next level, then the area I can pan across is less than 4kms, how can I maintain the original extent, even on other zoom levels while panning?

Here is the code :

var matrixIds = new Array(14);
for (var i = 0; i < 14; ++i) {
    matrixIds[i] = "EPSG:27700:" + i;
}

var resolutionsArray = [896.0, 448.0, 224.0, 112.0,
    56.0, 28.0, 14.0, 7.0, 3.5, 1.75,
    0.875, 0.4375, 0.21875, 0.109375
];

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.WMTS({
                name: "OS Maps WMTS",
                url: "<layer_url>",
                layer: "Road 27700",
                matrixSet: "EPSG:27700",
                format: 'image/png',
                projection: "EPSG:27700",
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-238375.0, 1376256.0],
                    resolutions: resolutionsArray,
                    matrixIds: matrixIds
                }),
                style: '',
                crossOrigin: "Anonymous"
            })
        })
    ],
    view: new ol.View({
        center: [529449, 189252],
        zoom: 13,
        maxZoom: 16,
        minZoom: 13,
        extent: [529449 - 1000, 189252 - 1000, 529449 + 1000, 189252 + 1000]
    })
});

One Answer

extent is the extent of for the view's center constraint, not the extent of the viewable map. You could set an extent on the layer, but that would result in white space inside the view. To maintain a 2km x 2km constraint on the view's edges as could be done in OpenLayers 2 you would need to change the view as the resolution changes (ignoring very small changes to avoid performance issues):

    var extent = map.getView().calculateExtent(); // opening coverage
//    var extent = [529449 - 1000, 189252 - 1000, 529449 + 1000, 189252 + 1000]; // 2km box
    var resolution = 0;

    function resChange() {
        var newResolution = map.getView().getResolution();
        if (resolution == 0 || Math.abs((newResolution-resolution)/resolution) > 0.01) {
            resolution = newResolution;
            var width = map.getSize()[0] * resolution;
            var height = map.getSize()[1] * resolution;
            var view = new ol.View({
                projection: map.getView().getProjection(),
                extent: [extent[0]+(width/2), extent[1]+(height/2), extent[2]-(width/2), extent[3]-(height/2)],
                center: map.getView().getCenter(),
                resolution: resolution,
                maxZoom: map.getView().getMaxZoom(),
                minZoom: map.getView().getMinZoom()
            });
            view.on('change:resolution', resChange);
            map.setView(view);
        }
    }

    resChange();

enter image description here

Answered by Mike on December 28, 2020

Add your own answers!

Related Questions

Reading raw data into geopandas

7  Asked on December 15, 2021

       

Installing GDAL with MrSID fails on Ubuntu

1  Asked on December 13, 2021

     

QGIS Twisting a Shapefile

2  Asked on December 13, 2021

     

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.