2

In OpenLayer 5, i've a long rectangular SVG image (like 7000x600 px) as main layer. I need to limit the view and pan only to its bounds. I tried the code below, but when zooming the layer can't panned anymore and get cropped.

In other words, how can i limit the view to image size and zoom and pan only inside it?

var extent = [
    -svgImageSize.width,
    -svgImageSize.height,
    svgImageSize.width,
    svgImageSize.height
]

var projection = new ol.proj.Projection({
    code: 'static-image',
    units: 'pixels',
    extent: extent
});

map = new ol.Map({
    layers: [
        new ol.layer.Image({
            source: new ol.source.ImageStatic({
            url: svgUrl,
            imageExtent: extent,
            projection: projection
            })
        })
    ],
    target: 'map',
    view: new ol.View({
            projection: projection,
            center: [0, 0],  
            extent: extent,
            maxZoom: 5
        })
});

Image

  • 1
    In OpenLayers 3 to 5 the view "extent" is a center constraint, not an extent constraint. For a workaround see stackoverflow.com/questions/53912890/… Alternatively you could use version 6 (still in beta) where extent is an extent constraint unless constrainOnlyCenter is specified openlayers.org/en/master/apidoc/module-ol_View-View.html – Mike Aug 28 at 10:33
  • What mean "is a center constraint, not an extent constraint" ? Anyway, applying the workaround is still possible to pan outside the bounds of image. How to limit the pan only to bounds at every zoom level? – Exp Aug 28 at 13:53
0

In the version 5 API:

extent The extent that constrains the center, in other words, center cannot be set outside this extent.

In the version 6 API:

extent The extent that constrains the view, in other words, nothing outside of this extent can be visible on the map.

Also your extent is twice the width and height of your image, but it should be the sane size

either user

var extent = [
    0,
    0,
    svgImageSize.width,
    svgImageSize.height
]

and center at [ svgImageSize.width/2, svgImageSize.height/2 ]

or

var extent = [
    -svgImageSize.width/2,
    -svgImageSize.height/2,
    svgImageSize.width/2,
    svgImageSize.height/2
]

and center at [ 0, 0 ]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.