传单无互联网检测和通知

Question

例如，如果我的 wifi 离线，在传单中我会看到新的地图区域呈灰色，但没有关于实际发生情况的通知。

如果我打开控制台，我会看到：

GET https://a.tiles.mapbox.com/v4/image.png?access_token=correct_token 
net::ERR_INTERNET_DISCONNECTED

有人知道捕获此类事件并显示自定义警告的方法吗？

我已经尝试过捕捉：

$scope.$watch('tileerror', function (error, tile) {
    alert("No coonection");
});

附注使用角度传单指令

Answer 1

编辑：正如 Ghybs 在评论中指出的那样，确实有一个

tileerror

事件从

L.TileLayer

触发，但是据我所知，它没有在 Angular Leaflet Directive 中实现，如果我错了，请纠正我。

L.TileLayer 确实有一个选项，可以在无法加载图块时设置替换图像，称为：

errorTileUrl

:

要显示的图块图像的 URL，以代替加载失败的图块。

new L.TileLayer(URL, {
    errorTileUrl: 'error.png'
});

http://leafletjs.com/reference.html#tilelayer-errortileurl

如果您需要在图块加载失败时执行一些逻辑，您可以覆盖

L.TileLayer

的

_tileOnError

方法：

L.TileLayer.include({
    _tileOnError: function (done, tile, e) {

        // Do your stuff
        alert('whooops!');

        // Leaflet stuff
        var errorUrl = this.options.errorTileUrl;
        if (errorUrl) {
            tile.src = errorUrl;
        }
        done(e, tile);
    } 
});

https://github.com/Leaflet/Leaflet/blob/master/src/layer/tile/TileLayer.js#L96

Answer 2

我想补充一点，IH8 建议的机制对于阻止由损坏或缺失的层端点引起的错误非常有用。对模式的以下修改检查单个图块。如果出现错误，则会从地图中删除有问题的图层，并使用后备（本地）图像

L.imageOverlay

。

var badtilecount = 0;
L.TileLayer.include({
    _tileOnError: function (done, tile, e) {

        // Do your stuff
        if (badtilecount == 0) {
        badtilecount += 1 
        alert('On-Line map not found at ' + esriUrl + 'Using local context map. ' + badtilecount);
        map.removeLayer(Esri_WorldTopoMap);
        map.addLayer(fallbackmap);
        }

        // Leaflet stuff
        var errorUrl = this.options.errorTileUrl;
        if (errorUrl) {
            tile.src = errorUrl;
        }
        done(e, tile);
    } 
});