Question

我试图为使用ol3的磁贴添加备用路由。如果源网址以＆＃34; http＆＃34;开头，我想测试一下errorload事件。如果＆＃34;是＆＃34; ：用自定义磁贴替换此磁贴。如果＆＃34; no＆＃34; ：将此图块的源URL更改为另一个，然后重试

我想我需要使用类似的东西：

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

有了这个，我可以看到备份磁贴已下载但在地图上不可见。

Certainely，我误解了一些事情。

如果有人可以帮助我，请提前致谢。

Answer 1

Oups，没有代码，我的答案是空的。

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

OL3添加备份网址

1 个答案: