Javascript 如何在OpenLayers 4.2.0中设置矢量文件层的范围?

Javascript 如何在OpenLayers 4.2.0中设置矢量文件层的范围?,javascript,openlayers,mapbox,Javascript,Openlayers,Mapbox,我目前正在OpenLayer4.2.0中添加一系列MapboxVectorTile图层。然而问题发生了;每当我缩小到远处时,我的整个地图都会变成灰色,控制台中的“网络”选项卡将充满404,说明在地图盒一侧找不到瓷砖。这当然是有道理的,因为并非所有加载的磁贴都显示在Mapbox中 要使用一点代码进行详细说明: 这是加载Mapbox图层的位置: var source = new ol.source.VectorTile({ format: new ol.format.MVT(), t

我目前正在OpenLayer4.2.0中添加一系列Mapbox
VectorTile
图层。然而问题发生了;每当我缩小到远处时,我的整个地图都会变成灰色,控制台中的“网络”选项卡将充满404,说明在地图盒一侧找不到瓷砖。这当然是有道理的,因为并非所有加载的磁贴都显示在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错误。起初,我以为我可以忽略这些,但它们会导致我的整个应用程序停止渲染任何进一步的平铺,这是非常恼人的。我假设发生这种情况是因为开放层尝试加载贴图盒层边界之外的平铺

我在谷歌上搜索了很多,也尝试了很多。以下是我尝试过的:

关于OpenLayers 4.2.0中的
VectorTile
的文档指定了一个名为
TileGrid
()的选项。我已经尝试了很多这个功能的衍生产品,但这并不能解决我的问题。它要么不再渲染任何东西,要么冻结我的浏览器,要么保留原来的问题。我也不知道它是如何工作的,但是说它有一个扩展选项,我想我可能会尝试一下


那么如何设置层的范围呢?我如何告诉层只从
{x1,y1}
加载瓷砖到
{x2,y2}
?我真的不知道,任何帮助都将不胜感激。

结果我把
ol.source.VectorTile
ol.layer.VectorTile
(源代码或层)搞混了。
ol.layer.VectorTile
“类”确实有一个选项,这是设置它的正确方法

设置范围时有一些怪癖。每个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
});
新建ol.layer.VectorTile({
资料来源:资料来源,

区段:[convertedlat1,convertedLng1,convertedLat2,convertedLng2],//结果是我混淆了
ol.source.VectorTile
ol.layer.VectorTile
(源或层)。
ol.layer.VectorTile
“类”确实有一个选项,这是设置它的正确方法

设置范围有一些怪癖。每个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
});
新建ol.layer.VectorTile({
资料来源:资料来源,

区段:[convertedlat1,convertedLng1,convertedLat2,convertedLng2],//你找到了吗?找到了吗?