如何根据等级（z值）更改ol.source.OSM平铺网址

我们提供等级0-9的平铺。因此，当用户转到10级或更高级别的缩放级别时，我希望URL更改回Open Street Map的默认值。如何根据等级（z值）更改ol.source.OSM平铺网址

我试过这个，它几乎可以工作。选择级别10或更高级别时，使用ol.source.OSM.setURLs（）函数更改URL。但在某些情况下（不是全部），图片仍然会设置为我们的本地网址。我假设这是某种缓存问题，但不确定。

$scope.tilesource = new ol.source.OSM({ 
    url : '/'+$scope.tileRoot+'/tiles/{z}/{x}/{y}.png', 
    wrapX : false 
}); 

var raster = new ol.layer.Tile({ 
    source : $scope.tilesource 
}); 

$scope.tilesource.on('tileloadstart', function(arg) { 
    //console.log(arg.tile.src_); 
    if ($scope.tileLevelsSupported.search(arg.tile.tileCoord[0]) == -1) { 
     $scope.tilesource.setUrls(["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png", "https://b.tile.openstreetmap.org/{z}/{x}/{y}.png", "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png"]); 
    } else { 
     $scope.tilesource.setUrl('/'+$scope.tileRoot+'/tiles/{z}/{x}/{y}.png'); 
    } 
});

我已经尝试了OSM和瓷砖上的几种方法，但没有运气。在Tile URL错误的情况下，我得到File Not Found 404错误（预期），但随后它自行纠正并且加载了磁贴。

在此先感谢。

来源

2016-07-29 Frank B

除了更改网址，你可以使用两个不同的层与minResolution和maxResolution选项：

var raster = new ol.layer.Tile({ 
    source : $scope.tilesource, 
    minResolution: 200, 
    maxResolution: 10000000 
}); 

var osmLayer = new ol.layer.Tile({ 
    source: new ol.source.OSM(), 
    minResolution: 0, 
    maxResolution: 200 
});

当你从9级放大到10，光栅层将成为无形和OSM层会出现。

来源

2016-07-29 14:08:18

如果您需要将这两个图层仅作为一个图层进行处理，例如为了控制其在图层树中的可见性，您可以将它们添加到“ol.layer.Group”中并仅管理该组。 –

这很好。谢谢！ –

随意标记答案为“接受”，如果它的工作，以供将来参考:) –

如何根据等级（z值）更改ol.source.OSM平铺网址

回答

相关问题