OpenLayers：缩放级别裁剪 VectorTile 图层 - 如何修复？

Question

我想使用 TopoJSON 数据作为 OpenLayers 地图的 VectorTile 图层。当地图的缩放级别设置为 3 或更低时，将显示完整的 VectorTile 图层，但在缩放级别为 4 或更高时，VectorTile 图层将被裁剪并且无法完全显示。这可能会因屏幕尺寸而异，但问题仍然存在（在另一台机器上，它在缩放级别 4 时完全渲染，但在缩放级别 5+ 时无法渲染）。

造成这种情况的原因是什么以及如何解决？

JSFiddle 链接：https://jsfiddle.net/Sidders/du2mx4f1/

const style_background = new ol.style.Style({
  fill: new ol.style.Fill({
      color: "orange",
  }),
  stroke: new ol.style.Stroke({
      color: "black",
      width: 2,
  }),
});

const background = new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
        url: "https://gist.githubusercontent.com/Sidders22/5d0115942b29ac10041cbe32890c8018/raw/10e3424d31adbe794ed9b6485f49a8aee256c22a/background.json",
        format: new ol.format.TopoJSON({
          layerName: 'background',
        }),
        wrapX: false,
        overlaps: false,
    }),
    style: style_background,
    className: "basemap-background"
});


const basemap = new ol.layer.Tile({
  source: new ol.source.OSM()
});

const map = new ol.Map({
  controls: [],
  target: 'map',
  layers: [
    basemap,
    background
  ],
  view: new ol.View({
    center: [-14087813.253324818, 7279263.097399168],
    zoom: 4
  })
});

Answer 1

VectorTile 仅适用于平铺数据，而不是简单的向量。

使用 VectorLayer 代替。