OpenLayers 6.22 上的矢量平铺 (tegola) / WMS 叠加问题答案

【问题标题】：Vector Tiles (tegola) / WMS overlay problem on OpenLayers 6.22OpenLayers 6.22 上的矢量平铺 (tegola) / WMS 叠加问题
【发布时间】：2020-06-13 19:43:38
【问题描述】：

我正在尝试了解 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"
    })
  });

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

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

【问题讨论】：

标签： openlayers projection wms vector-tiles

【解决方案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>

【讨论】：

地图必须是EPSG:4326。我一直认为我们可以在不同的投影中拥有图层，然后重新投影到视图中。所以矢量瓦片不是这种情况？

【解决方案2】：

有几个问题：

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

Tegola 不是替代非 Web 墨卡托项目中矢量切片的最佳选择。 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>

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

【讨论】：