如何在OpenLayers 4.2.0中设置VectorTile图层的范围？

Question

我目前正在Open Layers 4.2.0中添加一系列Mapbox VectorTile图层。但是会出现问题;每当我缩小到远处，我的整个地图都变成灰色，控制台中的网络标签将填充404，说明在Mapbox端没有找到瓷砖。这个过程是有道理的，因为并非所有加载的tile都存在于Mapbox中。

详细说明一下代码：

这是加载Mapbox图层的地方：

var source = new ol.source.VectorTile({
    format: new ol.format.MVT(),
    tilePixelRatio: 16,
    url: 'https://{a-d}.tiles.mapbox.com/v4/' + layer.id + '/{z}/{x}/{y}.vector.pbf?access_token=' + this.mapboxGlToken
});

return new ol.layer.VectorTile({
    source:        source,
    minResolution: layer.minres,
    maxResolution: layer.maxres,
    style:         this.styles.normal,
    filter:        layer.filter,
    name:          layer.name
});

这实际上会显示地图（+矢量图块，它是荷兰各省的红色边框）：

万岁！但是，如果我查看我的Firefox网络选项卡：

Mapbox有很多404错误。起初，我以为我可以忽略这些，但它们会导致我的整个应用程序停止渲染任何更多的瓷砖，这非常令人讨厌。我认为这是因为Open Layers尝试加载Mapbox层边界之外的tile。

我已经google了很多并尝试了很多。这是我尝试过的：

Open layer 4.2.0中有关VectorTile的文档指定了一个名为TileGrid（http://openlayers.org/en/latest/apidoc/ol.source.VectorTile.html）的选项。我尝试了很多这个功能的副产品，但这并没有解决我的问题。它要么不再呈现任何东西，请冻结我的浏览器，保持原始问题。我也不知道它是如何工作的，但是说它有一个范围选项，我想我可能会给它一个旋转。

那么如何设置图层的范围？如何告诉图层仅加载从{x1,y1}到{x2,y2}的图块？老实说我不知道​​，任何帮助都会受到赞赏。

Answer 1

事实证明，我混淆了ol.source.VectorTile和ol.layer.VectorTile（来源或图层）。 ol.layer.VectorTile＆＃39;班级＆＃39;确实有extent选项，这是设置它的正确方法。

设置范围有一些怪癖。每个mapbox tileset都有自己的范围（或者称为边界）：

边界需要从lat1, lng1, lat2, lng2转换为像素（如果我错了，请纠正我）。这样做的方法是从webconsole运行：

ol.proj.fromLonLat([lat1, lng1]).concat(ol.proj.fromLonLat([lat2, lng2]))

这将为您提供正确的范围。

这个程度需要这样实现：

new ol.layer.VectorTile({
    source:        source,
    extent:        [convertedlat1, convertedLng1, convertedLat2, convertedLng2], // <---
    minResolution: layer.minres,
    maxResolution: layer.maxres,
    style:         this.styles.normal,
    filter:        layer.filter,
    name:          layer.name
});