OL3 백업 URL 추가

Question

ol3 타일 백업 경로를 추가하려고합니다. "http"로 시작하는 소스 URL 인 경우 errorload 이벤트를 테스트하고 싶습니다. "예"인 경우 :이 타일을 사용자 정의 타일로 교체하십시오. "아니오"경우 : 나는 백업 타일 것을 볼 수 있습니다, 그와

layerTile.getSource().setUrl('file:///local/{z}/{x}/{y}.jpg'); 
var errorTilePath='https://image.noelshack.com/fichiers/2017/14/1491403614-errortile.png'; 
var serverBackup='http://otile1.mqcdn.com/tiles/1.0.0/map/'; 
layerTile.getSource().setTileLoadFunction((function() { 
    var tileLoadFn = layerTile.getSource().getTileLoadFunction(); 
    return function(tile, src) { 
    var image = tile.getImage(); 
    image.onload = function() {console.log('Tile ok : ' + src); }; 
    image.onerror = function() { 
     console.log('Tile error : ' + src); 
     console.log(tile); 
     if (src.substr(0,4)!='http') { 
      var tmp=src.split('/').reverse(); 
      var serverBackupPath=serverBackup+tmp[2]+'/'+tmp[1]+'/'+tmp[0].split('.')[0]+'.png'; 
      console.log("Second url : " + serverBackupPath) 
      src=serverBackupPath; 
      tile.getImage().src=src; 
      var image = tile.getImage(); 
      image.onload = function() {console.log('Tile backup ok : ' + src);}; 
      image.onerror = function() {console.log('Tile backup error : ' + src); src=errorTilePath; tile.getImage().src=src; tileLoadFn(tile, src);} 
     } else { 
      console.log('Custom tile : '); 
      src=errorTilePath; 
      tile.getImage().src=src; 
     } 
     tileLoadFn(tile, src); 
    }; 
    tileLoadFn(tile, src); 
    }; 
})()); 

:

를 다른 하나에 의해이 타일의 소스 URL을 변경하고 다시 시도 나는 내가 그런 일을 사용할 필요가 있다고 생각 다운로드했지만지도에는 표시되지 않습니다.

확실히, 나는 오해를했습니다.

누군가가 나를 도울 수 있다면 미리 감사드립니다.

Answer 1

코드없이 Oups, 내 대답은 null입니다.

layerTile.getSource().setUrl('file:///local/{z}/{x}/{y}.jpg'); 
var serverBackup='https://{a-c}.tile.openstreetmap.org/'; 
var errorTilePath=urlBase+'css/images/error.png'; 
layerTile.getSource().setTileLoadFunction((function() { 
    return function(tile, src) { 
    if (UrlExists(src)) { 
     tile.getImage().src=src; 
    } else { 
     if (src.substr(0,4)=='file') { 
      var tmp=src.split('/').reverse(); 
      src='https://'+['a', 'b', 'c'].sort(function() {return 0.5 - Math.random()})[0]+'.tile.openstreetmap.org/'+tmp[2]+'/'+tmp[1]+'/'+tmp[0].split('.')[0]+'.png'; 
      if (UrlExists(src)) { 
       tile.getImage().src=src; 
      } else { 
       tile.getImage().src=errorTilePath; 
      } 
     } else { 
      tile.getImage().src=errorTilePath; 
     } 
    } 
    }; 
})()); 

function UrlExists(url){ 
    try { 
     var http = new XMLHttpRequest(); 
     http.open('HEAD', url, false); 
     http.send(); 
     return http.status==200||http.status==403; 
    } catch(err){return false;} 
}