如何根据网络连接的可用性切换基础层

How to switch base layer based on internet connection availability

本文关键字:可用性 何根 网络 连接      更新时间:2023-09-26

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

现在我锁定了一种方法,使应用程序检查互联网连接,如果有,然后使用谷歌地图作为基础层。

你可以监听'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;
                    }
                }
            }
        }        
    }
);

当电脑再次联机时,检测起来比较困难。例如,当您离线时,启动定时定时器从互联网加载一些图像。如果成功,则返回在线。

我设计了那个解决方案,你需要根据你的情况调整它。

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