0

Now i have changed my code but the output is still not what is expected, because the resolution provided is of 0 - 8 zoom but my minZoom starts from 12 itself, will i get my tiles rendered ?? how exactly openlayers will understand that at a zoom of 12 it needs to fetch 0(zoom) resolution tile image or at zoom 13 it needs to fetch 1(zoom) resolution???

var resolutions = [156367.7919628329, 78183.89598141646, 39091.94799070823, 19545.973995354114, 9772.986997677057,
 4886.4934988385285,2443.2467494192642,1221.6233747096321,610.8116873548161];

 var extent  = [454019.0871110868, 36291.71352911883, 454248.1414938449, 
  36399.381018930886];

 const map = new ol.Map({
      target: 'map',
      loadTilesWhileAnimating: true,
      controls: [],
      view: new ol.View({
         projection: ol.proj.get('EPSG:21096'),
         center: ol.proj.transform([32.6000, 0.3290], 'EPSG:4326', 'EPSG:21096'),
         resolutions: resolutions,
         zoom: 12
    })
});


const tileGrid = new ol.tilegrid.TileGrid({
     extent : extent,
     resolutions : resolutions})

   var xyzLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
            url: "http://localhost:8089/gis-web/map/tiles/{z}/{x}/{y}.png",
            tileGrid: tileGrid
    })
});

map.addLayer(xyzLayer);


 const setOlNonHierarchical = (layer) => {
 var vectorSource = new ol.source.Vector({
   format: new ol.format.GeoJSON(),
   loader: function(extent, resolution, projection) {
    showLoader(loader);
    let startIndex, maxFeatures, workspace;
    workspace = $('#prop_workspace').val();
    maxFeatures = $('#prop_max').val();
    startIndex = $('#prop_start_index').val();
    var proj = projection.getCode();
      var url = `${common_layers_url}${workspace}/${layer.geom}/${layer.title}/${maxFeatures}/${startIndex}`;
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      var onError = function() {
        vectorSource.removeLoadedExtent(extent);
      }
      xhr.onerror = onError;
      xhr.onload = function() {

        if (xhr.status == 200) {
          fadeLoader(loader);
          vectorSource.addFeatures(
              vectorSource.getFormat().readFeatures(xhr.responseText));
               //Set House No for Building
               if(layer.title=='Buildings'){
                      if(!isHouseNoSet)
                      setTimeout(setHouseNo,100);
               }
               //Open Draw Event for New Building Survey 
               if(layer.title==$("#newBuildingSurveyId").attr('layer-text') && openSurveyNew==1){
                setTimeout(()=>{
                    selectedOpenEditFeatures();
                },100);
               }
        } else {
          onError();
        }
      }
      xhr.send();
    }
  });


 map.addLayer(new ol.layer.Vector({
       zIndex: layer.layerZindex,
       name_: layer.title,
       shortcode_:layer.layerShortCode,
       geomType: layer.geom,
       renderMode: 'image',
       customStyle: false,
       source:vectorSource
    }));

}

Okk so this the code from where my vector sources are getting added which show up at zoom 12

11
  • 1
    When you ask for a help with the code, existing code should always be included in the question. Please, edit the question and include relevant part of your code in the body of the question.
    – TomazicM
    Feb 12, 2020 at 8:03
  • @TomazicM I have edited the question with other code and image , can u please help me with this issue ?? Feb 12, 2020 at 8:20
  • I don't see any declaration of min zoom in your code.
    – TomazicM
    Feb 12, 2020 at 8:22
  • Even if i specify minZoom which is 12 , i will not get the tiles right?? because the tiles that are generated are from zoom 0 - 8 only, there are no tiles after 8 zoom , so basically what i want is zoom manupilation for example if my minZoom is 12 the tiles of 0 zoom should be loaded , if my zoom is 13 the tiles of 1 zoom should be loaded Feb 12, 2020 at 8:27
  • As I wrote: please, include all code relevant to your problem in the question.
    – TomazicM
    Feb 12, 2020 at 8:31

1 Answer 1

1

If you have tile layer with different tile schema than base layer, you have to define tile grid ol.tilegrid.TileGrid for that layer, where you specify layer extent with extent option and and zoom resolutions (tile resolution for each zoom) with resolutions option.

You have to specify these resolutions also in view definition, so they become you native map resolutions and also limit min and max zoom.

Below is an example from my map I'm actually using for testing purposes (tile schema is a bit specific, but that's not relevant for this case).

proj4.defs('EPSG:3912',
           '+proj=tmerc +lat_0=0 +lon_0=15 +k=0.9999 +x_0=500000 +y_0=-5000000 +ellps=bessel +towgs84=682,-203,480,0,0,0,0 +units=m +no_defs');                   
ol.proj.proj4.register(proj4);

var layerResol = [658, 500, 130, 125, 42, 41, 21,  12,  4, 2, 1];          
var layerExtent = [374371.84, 30513.32, 624119.18, 195517.48];

var tileGrid = new ol.tilegrid.TileGrid({
      extent: layerExtent,
      resolutions: layerResol
    });

var layer = new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: 'http://prostor4.gov.si:80/ows2-m-pub/wms',
    attributions: '&copy <a href="http://www.gu.gov.si/">GURS</a>',
    params: {
      'LAYERS': '',
      'FORMAT': 'image/png',
      'VERSION': '1.3.0'
    },
    tileGrid: tileGrid,
    projection: 'EPSG:3912'
  })
});

var urlFunc = layer.getSource().getTileUrlFunction().bind(layer.getSource());
layer.getSource().setTileUrlFunction(function (tileCoord, pixelRatio, projection) {
    var products = [ "DPK1000", "DPK750", "DPK750", "DPK750", "DPK500", "DPK250", 'DPK250', 'DTK50', 'DTK50', "DTK25", "DTK25", "SVR", "SV" ];
    var z = tileCoord[0];
    this.updateParams({ 'LAYERS':'SI.GURS.DK:' + products[z]});
    return urlFunc(tileCoord, pixelRatio, projection);
});

var view = new ol.View({
    projection: 'EPSG:3912',
    center: ol.extent.getCenter(layerExtent),
    resolutions: layerResol,
    zoom: 2
  });

var osmLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var map = new ol.Map({
  target: 'map',
  layers: [osmLayer, layer]
});

map.setView(view);

13
  • But I'm not using any WMS service, I have created tiles using gdal library which is locally present, is there any way that i can manipulate my zoom , such that if my zoom is 12 , 0th zoom tile is fetched , if zoom is 13, 1st zoom tile is fetched and so on , using ol.source.XYZ Feb 13, 2020 at 7:22
  • Tile source is not important in this case, only layer extent and layer resolutions. For your tile layer you have to specify layer extent with extent option and layer resolutions for each of your nine zooms with resolutions options.
    – TomazicM
    Feb 13, 2020 at 7:44
  • I have edited my code and posted but no results , if u can review it please Feb 13, 2020 at 9:43
  • Option zoom: 12 is not OK. On the basis of resolutions, your zooms now go from 0 to 8.
    – TomazicM
    Feb 13, 2020 at 10:34
  • Set zoom option to zoom: 2 and see what happens.
    – TomazicM
    Feb 13, 2020 at 13:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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