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

Question

我目前正在 Open Layers 4.2.0 中添加一系列 Mapbox VectorTile 图层。但是出现了问题；每当我缩小到很远时，我的整个地图都会变成灰色，并且我在控制台中的网络选项卡将充满 404，说明在 Mapbox 端找不到图块。这当然是有道理的，因为并非所有加载的图块都存在于 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 图层边界之外的图块。

我在谷歌上搜索了很多，也尝试了很多。这是我尝试过的：

Open layers 4.2.0 中关于 VectorTile 的文档指定了一个名为 TileGrid (http://openlayers.org/en/latest/apidoc/ol.source.VectorTile.html) 的选项。我已经尝试了很多此功能的衍生产品，但这并没有解决我的问题。它要么不再呈现任何东西，要么冻结我的浏览器，它会保留原来的问题。我也不知道它是如何工作的，但说它有一个 extent 选项，我想我可以试一试。

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

Answer 1

原来我混淆了ol.source.VectorTile和ol.layer.VectorTile（来源或图层）。 ol.layer.VectorTile 'class' 确实有一个 extent 选项，这是设置它的正确方法。

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

边界需要从 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
});

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

How to set an extent to a VectorTile layer in OpenLayers 4.2.0?

javascript

openlayers

mapbox