如何通过调用 TMS 来调整旧的 openlayers 代码 openlayers 6

Question

如何使旧代码适应 openlayers 6

var layer_ais = new OpenLayers.Layer.TMS(
    "Traffic maritime",
    "https://tiles.marinetraffic.com/ais_helpers/shiptilesingle.aspx?output=png&sat=1&grouping=shiptype&tile_size=512&legends=1&zoom=${z}&X=${x}&Y=${y}",
    {
    "layerId":2,
    "displayOutsideMaxExtent":true,
    "isBaseLayer":false,
    "numZoomLevels":18,
    "type":"png",
    "url":"https:\/\/tiles.marinetraffic.com\/ais_helpers\/shiptilesingle.aspx?output=png&sat=1&grouping=shiptype&tile_size=512&legends=1&zoom=${z}&X=${x}&Y=${y}" ,
    'getURL': getTileURLMarine,
    'tileSize': new OpenLayers.Size(512,512)
    });

我必须使用 XYZ 或 WMS 来源吗？
我必须像本示例中那样使用 tileUrlFunction 对 z x y 参数重新排序吗？
https://openlayers.org/en/latest/examples/xyz-esri-4326-512.html

根据@Mike 的帮助，这里是 ol 6.2 的工作代码

      var defaultGrid = new ol.tilegrid.createXYZ({ tileSize: 256,  maxZoom: 18 });
      var layer_ais = new ol.layer.Tile({
         source: new ol.source.XYZ({
            tileGrid: new  ol.tilegrid.TileGrid({
               tileSize: 512,
               resolutions: defaultGrid.getResolutions(),
               extent: defaultGrid.getExtent()
            }),
         url: "https://tiles.marinetraffic.com/ais_helpers/shiptilesingle.aspx?output=png&sat=1&grouping=shiptype&tile_size=512&legends=1&zoom={z}&X={x}&Y={y}"
        })
      });

感谢您的帮助！

Answer 1

你有一个 XYZ url 所以你不能 WMS。如果你有一个标准的瓷砖网格，你可以使用 {-y} 占位符 ($ 不再用于占位符):

var layer_ais = new ol.layer.TileLayer({
  source: new ol.source.XYZ({
     maxZoom: 18,
     tileSize: 512,
     url: 'https://tiles.marinetraffic.com/ais_helpers/shiptilesingle.aspx?output=png&sat=1&grouping=shiptype&tile_size=512&legends=1&zoom={z}&X={x}&Y={-y}'
  })
});

如何通过调用 TMS 来调整旧的 openlayers 代码 openlayers 6

how to adapt old openlayers code with call to TMS to openlayers6

openlayers-3

openlayers-6