Векторные плитки (тегола) / проблема наложения WMS на OpenLayers 6.22

Я пытаюсь понять некоторую логику и реализацию векторной плитки на открытых слоях (6.3.1). У меня есть 2 слоя, которые просто не накладываются друг на друга, как показано на скриншоте ниже. Я рассмотрел несколько примеров, но они только увеличивают мои технические сомнения, и путаница здесь заключается в системе:

  1. Векторный тайловый сервер

Сервер Tegola (gospatial/tegola:v0.10.4) с параметрами по умолчанию (тайлы в 256 пикселях? Размер исходных данных srid=4326 и SQL SQL:FROM XXX.XXX WHERE geom && !BBOX!)

Описание уровня сервера находится здесь: http://tiles.isric.org/capabilities/wosis.json

  1. WMS сервис

Сервис WMS: http://maps.isric.org/mapserv?map=/map/soc.map

  1. Пример выполнения

Пример полного кода в jsfiddle: https://jsfiddle.net/jorgejesus/vt6qndrw/1/

  1. Части кода:

Итак, для сервера тегола у меня есть что-то вроде этого:

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],
            })
          })
        })

А для 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
              },          
          })
      })

Наконец, вид OL 6:

 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"
    })
  });

У меня есть изображение ниже как окончательный результат кода, Западной Европе было бы очень приятно наслаждаться теплыми водами Мексиканского гольфа, но это не моя цель.

Пожалуйста, попросите совета и разъясните, в чем проблема, я считаю, что документы по векторным плиткам очень разрознены, и у меня могут быть некоторые недоразумения по сеткам.

введите здесь описание изображения


openlayers projection wms vector-tiles
person Jorge Mendes    schedule 04.06.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Ваш источник векторных листов - EPSG: 3857, и векторные листы нельзя перепроецировать. Вам нужно будет отобразить оба слоя в EPSG: 3857 (или найти альтернативный источник EPSG: 4326 для данных векторной плитки)

<!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>

person Mike    schedule 04.06.2020
comment
Для карты в EPSG требуется: 4326. Я всегда предполагал, что мы можем иметь слои в разных проекциях, а затем перепроецировать их в View. Значит, это не относится к векторным плиткам? - person Jorge Mendes; 04.06.2020

arrow_upward
0
arrow_downward

Было несколько проблем:

  • Проекция
  • Тайлы с неправильным разрешением карты

Тегола был не лучшим вариантом для векторных плиток в качестве альтернативы проекту без веб-меркатора. T-rex был лучшим вариантом, но даже там было немного сложно найти все правильно.

Обычно разрешение, размер фрагмента, система проекции и расширение карты должны быть одинаковыми с обеих сторон (сервер / фрагменты и код OL).

<!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>

Надеюсь, это поможет кому-то другому :)

person Jorge Mendes    schedule 13.06.2020