Wie kann ich ol.source.OSM Fliese URL basierend auf Level (z-Wert) ändern

Question

Wir liefern Kacheln für Ebenen 0-9. Wenn der Benutzer also auf eine Zoomstufe von 10 oder höher geht, möchte ich, dass die URL auf die Standardwerte von Open Street Map zurückgesetzt wird.

Ich habe das versucht und es funktioniert fast. Wenn Stufe 10 oder höher ausgewählt ist, ändere ich die URL mit der Funktion ol.source.OSM.setURLs(). Aber in einigen Fällen - nicht alle - ist das Bild immer noch auf unsere lokale URL eingestellt. Ich nehme an, dies ist eine Art Caching-Problem, aber nicht sicher.

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

Ich habe mehrere Methoden auf OSM und Tile versucht, aber hatten kein Glück. In den Fällen, in denen die Kachel-URL falsch ist, erhalte ich den Fehler "Datei nicht gefunden 404" (erwartet), korrigiert sich dann aber selbst und die Kachel wird geladen.

Vielen Dank im Voraus.

Answer 1

Anstatt die URL zu ändern, Sie zwei verschiedene Schichten mit den minResolution und maxResolution Optionen verwenden:

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

Wenn Sie von Level 9 bis 10 vergrößern, wird die Rasterebene unsichtbar und die osm Schicht wird auftauchen.