Search code examples
openlayers-3openlayers-6

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


How to adapt this old code to 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)
    });  

must i use a XYZ or WMS source ?
must i use a tileUrlFunction to reorder the z x y parameter as in this example ?
https://openlayers.org/en/latest/examples/xyz-esri-4326-512.html

according with @Mike help here is the working code for 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}"
        })
      });

Thanks for any help !


Solution

  • You have an XYZ url so you cannot WMS. If you have a standard tile grid you can use a {-y} placeholder ($ is no longer used in placeholders):

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