Question

我们提供0-9级别的牌。因此，当用户进入10或更高的缩放级别时，我希望URL更改回Open Street Map的默认值。

我试过这个并且它几乎可以工作。当选择10级或更高级别时，我使用ol.source.OSM.setURLs（）函数更改URL。但在某些情况下 - 并非所有 - 图像仍然设置为我们的本地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上尝试了几种方法，但没有运气。在Tile URL错误的那些情况下，我得到File Not Found 404错误（预期），但随后它会自行更正并且磁贴被加载。

提前致谢。

Answer 1

您可以使用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图层。

如何根据级别（z值）更改ol.source.OSM磁贴网址

1 个答案: