CODEWITHSUNDEEP
javascriptopenlayers-3
Scott Lee
Scott Lee

Reputation: 31

openlayers 3 - Load TileLayer with highest zoom level tiles but display at all zoom levels

Is is possible to load a Tile layer from a TileImage source with tiles in its highest resolution (zoom) for a specific extent and have these tiles show for all zoom levels. I have high resolution imagery I wish to show as a layer above another Tile layer such as Bing or OSM.

Example source

var source = new ol.source.TileImage({
projection: 'EPSG:900913',
tileGrid: new ol.tilegrid.TileGrid({
projection: 'EPSG:900913',
extent: projectionExtent,
//extent: ol.proj.transformExtent([-83.7893967, 42.851353, -83.7855987, 42.849371], "EPSG:4326", "EPSG:900913"),
resolutions: resolutions,
tileSize:[pictometryImageSize, pictometryImageSize]
}),
tileUrlFunction: function(tileCoord, pixelRatio, projection){
var zoom = tileCoord[0];

console.log(zoom)

if(zoom == 21){
    var tileGrid = this.getTileGrid();
    var center = ol.proj.transform(ol.extent.getCenter(tileGrid.getTileCoordExtent(tileCoord)),"EPSG:900913", "EPSG:4326");
    return 'www.myrealtileurl;
}
//return undefined;
//return 'https://dummy.com';
},
minZoom: 0,
maxZoom: 21

});

Upvotes: 1

Views: 1785

Answers (1)

Sergey Kolosov
Sergey Kolosov

Reputation: 183

I hope I understand you correctly. First, you can restrict layer extent with extent. Second, you can lock zoom with maxZoom and minZoom properties. OpenLayers will resize tiles on his own. Here is an example, where ArcGIS tile layer is locked in extent and zoom:

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.OSM() }),
    new ol.layer.Tile({
      extent: ol.proj.transformExtent([-110, 42, -100, 48], "EPSG:4326", "EPSG:3857"),
      source: new ol.source.XYZ({
          maxZoom: 6,
          minZoom: 6,
          url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
          'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
      })
    })
  ],
  view: new ol.View({
      center: ol.proj.fromLonLat([-105.89, 45.09]),
      zoom: 6
  })
});

Upvotes: 1

Related Questions