CODEWITHSUNDEEP
openlayers-3
amitdar
amitdar

Reputation: 927

change openlayers3 zoom sensitivity

I'm currently using OL3 with tiled map (ol.layer.Tile) with 4 zoom levels of tiles. I want the zoom to be more sensitive and allow 8 zoom levels instead of 4, each 2 for each tile level. any ideas ?

Upvotes: 1

Views: 1631

Answers (1)

tfidelis
tfidelis

Reputation: 453

According to docs, you can manage zoom setting with several properties in your View object:

  • maxResolution: The maximum resolution used to determine the resolution constraint. It is used together with minResolution (or maxZoom) and zoomFactor. If unspecified it is calculated in such a way that the projection's validity extent fits in a 256x256 px tile. If the projection is Spherical Mercator (the default) then maxResolution defaults to 40075016.68557849 / 256 = 156543.03392804097.
  • minResolution: The minimum resolution used to determine the resolution constraint. It is used together with maxResolution (or minZoom) and zoomFactor. If unspecified it is calculated assuming 29 zoom levels (with a factor of 2). If the projection is Spherical Mercator (the default) then minResolution defaults to 40075016.68557849 / 256 / Math.pow(2, 28) = 0.0005831682455839253.
  • maxZoom: The maximum zoom level used to determine the resolution constraint. It is used together with minZoom (or maxResolution) and zoomFactor. Default is 28. Note that if minResolution is also provided, it is given precedence over maxZoom.
  • minZoom: The minimum zoom level used to determine the resolution constraint. It is used together with maxZoom (or minResolution) and zoomFactor. Default is 0. Note that if maxResolution is also provided, it is given precedence over minZoom.
  • zoomFactor: The zoom factor used to determine the resolution constraint. Default is 2.

Example to get 2 view zoom levels for each tile grid zoom level of your XYZ sourece:

var source = new ol.source.XYZ({
  // your source configuration here
});
var resolutions = source.getTileGrid().getResolutions();
var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: source
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 0,
    maxResolution: resolutions[0],
    minResolution: resolutions[resolutions.length-1],
    zoomFactor: 1.5
  })
});

Upvotes: 3

Related Questions