В OpenLayers есть ли способ визуализации векторных плиток Mapbox в переведенном слое?

Question

Рекомендуемый подход для перевода векторного слоя листов, по-видимому, заключается в том, чтобы перевести контекст холста при предварительном компоновке (см. OpenLayers 3: перевод на слой для слоев мозаичного изображения ).Как уже отмечалось, отображаются только те плитки, которые попадают в видимый экстент перед переводом карты.

Как добиться эффекта перевода без потери этих граничных плиток?

Я также пытался использоватьпользовательская сетка плиток с источником (https://github.com/openlayers/openlayers/issues/9514), но это, кажется, неправильное использование параметра 'origin', поэтому плитки были нарисованы только частично. Я предполагаю, что пользовательские источники должны падать на границу плитки; мои делаютнет.

Обновление: решение Майка верное. Насколько я помню, я пробовал подход Майка до того, как задавать этот вопрос, и, хотя слой был переведен, возникла проблема с исчезновением (или прорисовкой частей фрагментов)неправильное местоположение.) Но, экспериментируя с примером Майка, я заметил, что установка для свойства useInterimTilesOnError значения false в моем приложении исправила проблему как исчезающих, так и ошибочно извлеченных плиток. Возможно, есть некоторые проблемы с плитками, которые я использую, но интересно, что когда слойне смещено, плиткисоставлено правильно независимо от того, как задано useInterimTilesOnError.

Answer 1

Кажется, что этого достаточно, чтобы сместить экстент мозаичной сетки (по умолчанию источник будет находиться слева вверху от экстента).

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 вблизи Японии