openlayers - 如何根据互联网连接可用性切换基础层

Question

我的应用程序（html+ JavaScript）使用谷歌地图作为基础层。我还将 OSM 设置为离线基础层，以便在没有互联网连接时使用。

现在我正在锁定一种让应用程序检查互联网连接的方法，如果有，那么使用谷歌地图作为基础层。如果没有，则使用 OSM。

Answer 1

您可以侦听“loaderror”事件，当加载谷歌地图图块失败时，该事件将被抛出。这是常规 WMS 层的示例（http://jsfiddle.net/D3Eha/2/中的完整示例）

var wmsLayer, workingOffline = false;

wmsLayer = new OpenLayers.Layer.WMS("OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0?",
    {layers: 'basic'},
    {
        attribution: 'Provided by OSGeo',
        tileOptions: {
            eventListeners: {
                'loaderror': function(evt) {
                    if (workingOffline == false) {
                        console.log('Tile load error, switching to offline map');
                        workingOffline = true;
                    }
                }
            }
        }        
    }
);

当计算机再次在线时，检测起来更棘手。例如，当您离线时，启动定期计时器以从 Internet 加载一些图像。如果成功，您将重新在线。

Answer 2

我设计了该解决方案，您需要根据您的情况对其进行调整。

    var backupLayerUrl = {
        url: "http://b.tile.opencyclemap.org/cycle/",
        type: "png"
    }

tileOptions = {
            eventListeners: {
                'loaderror': function(e) {
                    console.dir(e);
                    var newUrl = backupLayerUrl.url;
                    var oldUrl = e.object.url;
                    var oUS = oldUrl.split("/");//oldUrlSplitted

                    var type = backupLayerUrl.type;

                    var z = oUS[oUS.length-3];
                    var x = oUS[oUS.length-2];
                    var y = oUS[oUS.length-1].split(".")[0];

                    var layerType = e.object.layer.CLASS_NAME.split(".")[e.object.layer.CLASS_NAME.split(".").length-1];

                    if (layerType != "OSM"){
                        var ymax = 1 << z;
                        y = ymax - y - 1;
                    }

                    newUrl += z + "/" + x + "/" + y + "." + type;
                    e.object.imgDiv.src = newUrl;
                }
            }
        };

    var mylayer = new OpenLayers.Layer.TMS("Layer Name", "/layer_url/",
              {     tileOptions: tileOptions,
                    projection: epsg900913,
                    alpha: true,
                    type: 'png',
                    visibility: false,
                    isBaseLayer: true,
                    getURL: getTileURL
              });