在OpenLayers中，有没有一种方法可以在转换后的图层中渲染Mapbox矢量图块？

Question

推荐的用于转换矢量图块层的方法似乎是在预先合成的条件下转换画布上下文（请参见OpenLayers 3: per-layer translation for tiled image layers）。如上所述，只有那些在地图翻译前可见范围内的图块才会呈现。

如何在不失去边界图块的情况下达到翻译的效果？

我还尝试过使用带有原点（https://github.com/openlayers/openlayers/issues/9514）的自定义图块网格，但这似乎是对'origin'参数的滥用，因此仅部分绘制了图块。我猜想自定义来源必须位于图块边界上；我的不要。

更新：Mike的解决方案是正确的。我记得，在提交此问题之前，我曾尝试过Mike的方法，尽管平移了图层，但存在部分砖块消失（或在错误的位置绘制）的问题。但是，以迈克的示例为例，我注意到在我的应用程序中将useInterimTilesOnError设置为false可以修复消失和错误绘制的图块问题。也许我正在使用的图块存在一些问题，但是有趣的是，当图层没有偏移时，无论useInterimTilesOnError的设置如何，都可以正确呈现图块。

Answer 1

似乎足以抵消tilegrid的范围（原点默认为范围的左上角）。

var proj3857 = ol.proj.get('EPSG:3857');

var raster = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    maxZoom: 23
  })
});

var map = new ol.Map({
  layers: [raster],
  target: document.getElementById('map'),
  view: new ol.View({
      center: ol.proj.fromLonLat([0, 50]),
      maxZoom: 23,
      zoom: 5,
      projection: proj3857
  })
});

var dx = -200000;
var dy = -100000;

var extent = proj3857.getExtent();
offsetExtent = [extent[0] + dx, extent[1] + dy, extent[2] + dx, extent[3] + dy];

var layer = new ol.layer.VectorTile({
  source: new ol.source.VectorTile({
    format: new ol.format.MVT(),
    url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf',
    tileGrid: ol.tilegrid.createXYZ({ extent: offsetExtent, maxZoom: 18 })
  }),
  //useInterimTilesOnError: false,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 1,
      color: 'white'
    })
  })
});

map.addLayer(layer);

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/>
<div id="map" class="map"></div>

来自日本附近的OpenLayers示例的控制台日志