CODEWITHSUNDEEP
openlayersprojectionwmsvector-tiles
Jorge Mendes
Jorge Mendes

Reputation: 446

Vector Tiles (tegola) / WMS overlay problem on OpenLayers 6.22

I am trying to understand some of the vector tile logic and implementation on openlayers (6.3.1). I have 2 layers that simply don't overlay, resulting on the screenshoot below. I have looked into multiple example but they just increase my technical doubts, and confusion here is the system:

  1. Vector tile server

Tegola server (gospatial/tegola:v0.10.4) , using default options (tiles at 256 pixel? size source data srid=4326 and SQL SQL:FROM XXX.XXX WHERE geom && !BBOX!)

Server layer description is here: http://tiles.isric.org/capabilities/wosis.json

  1. WMS service

WMS service: http://maps.isric.org/mapserv?map=/map/soc.map

  1. Running example

Full code example in jsfiddle: https://jsfiddle.net/jorgejesus/vt6qndrw/1/

  1. Code parts:

So for the tegola server I have something like this:

var tegola_layer = new ol.layer.VectorTile({
          source: new ol.source.VectorTile({
            format: new ol.format.MVT(),
            projection: 'EPSG:4326',
            url: 'https://tiles.isric.org/maps/wosis/{z}/{x}/{y}.pbf?debug=true',
            tileGrid: new ol.tilegrid.WMTS({
              tileSize: [256,256],
              resolutions:resolutions, //from above check jsfiddle
              origin: [-180,90.0],
            })
          })
        })

And for WMS:

 var wms_layer =  new ol.layer.Tile({
          source: new ol.source.TileWMS({
              projection: 'EPSG:4326',
              url: 'http://maps.isric.org/mapserv?map=/map/soc.map',
              params: {
                  'LAYERS':'soc_0-5cm_mean',
                  crossOrigin: 'anonymous',
                  'TILED': true
              },          
          })
      })

Finally the OL 6 view:

 var map = new ol.Map({
    layers: [
        tegola_layer,
        wms_layer
    ],
    target: 'map',
    view: new ol.View({
      center: [-76.275329586789, 22.153492567373],
      extent: ol.proj.get("EPSG:4326").getExtent(),
      zoom: 5,
      projection: "EPSG:4326"
    })
  });

I have the image bellow as final code result, it would be very pleasant for Western Europe to enjoy the warm waters of the Golf of Mexico, but this is not my objective.

Kindly ask for tips and light into what is the problem, I find that vector tile docs very dispersed and I may have some miss understanding on grids.

enter image description here

Upvotes: 1

Views: 874

Answers (2)

Jorge Mendes
Jorge Mendes

Reputation: 446

There was several issues:

  • Projection
  • Incorrect map resolution tiles

Tegola was not the best option for vector tiles in alternative a non web mercator proj. T-rex was a better option, but even there it was a bit of a fiddle to go get things correct.

Basically resolution, tilesize, projection system and map extension, have to be the same on both sides (server/tiles and OL code).

<!DOCTYPE html>
<html>
  <head>
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">
  	<style>
      .map {
        width: 100%;
        height: 1024px;
      }
    </style>  
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
    //We need to have EXACTLY the same resolution on the trex/
    //on the the server
    //[grid.user]
	//width = 512
	//height = 512
	//extent = { minx = -180, miny = -90, maxx = 180, maxy = 90 }
	//srid = 4326
	//units = "dd"
	//resolutions = [0.3515625,0.17578125,0.087890625,0.0439453125,0.02197265625,0.010986328125,0.0054931640625,0.00274658203125,0.001373291015625,0.0006866455078125,0.00034332275390625,0.000171661376953125,0.0000858306884765625,0.00004291534423828125]
	//origin = "TopLeft"

    defaultResolutions = []
    var maxResolution = 360 / 512; //degrees devided by tile size
    defaultResolutions.length = 14;
    for (var i = 0; i < 14; ++i) {
      defaultResolutions[i] = maxResolution / Math.pow(2, i + 1);
    }
    
    //defaultResolutions as the same as in server
    
     // Custom tile grid for the EPSG:4326 projection
     var tileGrid = new ol.tilegrid.TileGrid({
          extent: [-180, -90, 180, 90],
          tileSize: 512,
          resolutions: defaultResolutions
      });
    
    var vector_layer = new ol.layer.VectorTile({
        source: new ol.source.VectorTile({
          format: new ol.format.MVT(),
          projection: 'EPSG:4326',
          url: 'http://trex.isric.org/wosis/{z}/{x}/{y}.pbf?debug=true',
          tileGrid: tileGrid
        })
      })
    
    
    //The dev soc_0-5cm_mean has no web has no 
    var wms_layer =  new ol.layer.Tile({
  	  source: new ol.source.TileWMS({
  		  url: 'http://dev-maps.isric.org/mapserv?map=/map/soc.map',
  		  projection: "EPSG:4326",
  		  params: {
  			  'LAYERS':'soc_0-5cm_mean',
  			  crossOrigin: 'anonymous',
  			  'TILED': true
  		  },		  
  	  })
    })
 
    var map = new ol.Map({
        layers: [
        	wms_layer,
        	vector_layer
        ],
        target: 'map',
        view: new ol.View({
          center: [-76.275329586789, 22.153492567373],
 //[ -180, -90, 180, 90]
          extent: ol.proj.get("EPSG:4326").getExtent(),
          zoom: 5,
          projection: "EPSG:4326"
        })
      });
    
    </script>
  </body>
</html>

Hope this helps someone else :)

Upvotes: 1

Mike
Mike

Reputation: 17897

Your vector tile source is EPSG:3857 and vector tiles cannot be reprojected. You will need to display both layers in EPSG:3857 (or find an alternative EPSG:4326 source for the vector tile data)

<!DOCTYPE html>
<html>
  <head>
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">
  	<style>
      .map {
        width: 100%;
        height: 600px;
      }
    </style>  
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>

	  var resolutions = [];
      var maxResolution = 360 / 256;
      resolutions.length = 24;
      for (var i = 0; i < 24; ++i) {
    	  resolutions[i] = maxResolution / Math.pow(2, i + 1);  
      }
            
      var wms_layer =  new ol.layer.Tile({
    	  source: new ol.source.TileWMS({
    		//  projection: 'EPSG:4326',
    		  url: 'http://maps.isric.org/mapserv?map=/map/soc.map',
    		  params: {
    			  'LAYERS':'soc_0-5cm_mean',
    			  crossOrigin: 'anonymous',
    			  'TILED': true
    		  },	

    	  })
      })
      
      var tegola_layer = new ol.layer.VectorTile({
          source: new ol.source.VectorTile({
            format: new ol.format.MVT(),
        //    projection: 'EPSG:4326',
            url: 'https://tiles.isric.org/maps/wosis/{z}/{x}/{y}.pbf?debug=true',
           })
        })
      
      var map = new ol.Map({
        layers: [
          wms_layer,
        	tegola_layer
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([-76.275329586789, 22.153492567373]),
          zoom: 5,
        })
      });
    </script>
  </body>
</html>

Upvotes: 3

Related Questions