时间戳

首页 > 解决方案 > 如何通过调用 TMS 来调整旧的 openlayers 代码到 openlayers6

openlayers-3 - 如何通过调用 TMS 来调整旧的 openlayers 代码到 openlayers6

问题描述

如何使这个旧代码适应 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 重新排序 zxy 参数吗？
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}"
        })
      });

谢谢你的帮助 ！

标签： openlayers-3openlayers-6

解决方案

你有一个 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}'
  })
});

推荐阅读