Vector Tiles (tegola) / WMS 在 OpenLayers 6.22 上的叠加问题

Question

我正在尝试了解 openlayers (6.3.1) 上的一些矢量图块逻辑和实现。我有 2 层根本不重叠，导致下面的屏幕截图。我研究了多个示例，但它们只会增加我的技术疑虑和困惑这是系统：

矢量磁贴服务器

Tegola 服务器 (gospatial/tegola:v0.10.4)，使用默认选项（256 像素处的图块？大小源数据 srid=4326 和 SQL SQL:FROM XXX.XXX WHERE geom && !BBOX!）

服务器层描述在这里：http://tiles.isric.org/capabilities/wosis.json

WMS 服务

WMS 服务：http://maps.isric.org/mapserv?map=/map/soc.map

运行例子

jsfiddle 中的完整代码示例：https://jsfiddle.net/jorgejesus/vt6qndrw/1/

代码部分：

所以对于 tegola 服务器，我有这样的东西：

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

我有下面的图片作为最终的代码结果，西欧享受墨西哥高尔夫的温暖水域会很愉快，但这不是我的objective。

请指点提示并指出问题所在，我发现矢量切片文档非常分散，我可能对网格有一些误解。

Answer 1

您的矢量切片源是 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>

Answer 2

有几个问题：

投影
不正确的地图分辨率图块

Tegola 不是替代非 Web 墨卡托项目的矢量切片的最佳选择。 T-rex 是一个更好的选择，但即使在那里它也有点 fiddle 去纠正问题。

基本上两边的分辨率，tilesize，投影系统和地图扩展必须相同（server/tiles和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>

希望这对其他人有帮助:)

Vector Tiles (tegola) / WMS 在 OpenLayers 6.22 上的叠加问题

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

openlayers

projection

wms

vector-tiles