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

Question

我目前正在 Open Layers 4.2.0 中添加一系列 Mapbox VectorTile 图层。然而问题出现了；每当我缩小到很远的时候，我的整个 map 就会变成灰色，并且控制台中的网络选项卡将充满 404 错误，解释说在 Mapbox 端找不到某些图 block 。这当然是有道理的，因为并非所有加载的图 block 都会出现在 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
});

这实际上会显示 map (+矢量图 block ，即荷兰各省的红色边框):

万岁!但是，如果我查看 Firefox 网络选项卡:

Mapbox 存在大量 404 错误。起初，我以为我可以忽略这些，但它们导致我的整个应用程序停止渲染任何进一步的图 block ，这非常烦人。我认为发生这种情况是因为 Open Layers 尝试加载 Mapbox 图层边界之外的图 block 。

我用谷歌搜索了很多并且尝试了很多。这是我尝试过的:

开放层 4.2.0 中有关 VectorTile 的文档指定了一个名为 TileGrid 的选项 ( http://openlayers.org/en/latest/apidoc/ol.source.VectorTile.html )。我已经尝试了此功能的许多衍生产品，但这并不能解决我的问题。它要么不再渲染任何内容，要么卡住我的浏览器，让它保留原来的问题。我也不知道它是如何工作的，但是说它有一个范围选项，我想我可以尝试一下。

那么如何设置图层的范围呢？如何告诉图层仅加载从 {x1,y1} 到 {x2,y2} 的图 block ？老实说，我不知道，如果有任何帮助，我们将不胜感激。

Answer 1

事实证明，我混淆了 ol.source.VectorTile 和 ol.layer.VectorTile (源或图层)。 ol.layer.VectorTile“类”确实有一个 extent选项，这是正确的设置方法。

设置范围有一些怪癖。每个 map 框图 block 集都有自己的范围(或称为边界):

边界需要从 lat1, lng1, lat2, lng2 转换为像素(如果我错了，请纠正我)。执行此操作的方法是从网络控制台运行:

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
});