Ionic / Leaflet - 无法获取 Tiles 404 Not Found（来自缓存）

Question

我遇到了一个非常奇怪的问题。我正在使用 leaflet with angular-leaflet-directive。在以前的应用程序上，一切正常。

现在在一个新的应用程序上，我想实现一个新的传单地图。因此，我复制了我以前的代码。

我的问题是，传单地图打开，我的标记已创建，但是

TILES are not loaded

（我的应用程序确实拥有互联网和互联网权利）尝试加载的每个图块都失败并出现以下问题：

GET http://a.tile.openstreetmap.org/18/98891/132985.png 404 (Not Found)

如您所见，如果直接访问磁贴，您可以在浏览器上看到它。

每个 Tile GET 请求的

Header

    GENERAL
      Request URL:http://a.tile.openstreetmap.org/18/98892/132984.png
      Request Method:GET
      **Status Code:404 Not Found (from cache)**
    RESPONSE HEADERS
      Client-Via:shouldInterceptRequest
    REQUEST HEADERS
      Provisional headers are shown
      Accept:image/webp,*/*;q=0.8
      User-Agent:Mozilla/5.0 (Linux; Android 5.0.1; GT-I9505 Build/LRX22C; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.137 Mobile Safari/537.36

My feeling is that is it trying to load it from cache instead of directly loading it from the open provider I still can't get what is different between my 2 projects

我的其他工作应用程序的每个图块具有以下 header：

GENERAL 
  Remote Address:192.163.219.40:80
  Request URL:http://c.tile.openstreetmap.org/18/98818/132892.png
  Request Method:GET
  Status Code:200 OK
Response Headers
  view source
  Access-Control-Allow-Origin:*
  Cache-Control:max-age=604800
  Content-Length:3584
  Content-Type:image/png
  Date:Fri, 08 May 2015 13:57:36 GMT
  ETag:"51fb8a7a0f719b211641dca08bf1d76b"
  Expires:Fri, 15 May 2015 13:57:36 GMT
  Server:Apache/2.4.7 (Ubuntu)
  Via:1.1 nadder-02.openstreetmap.org:3128 (squid/2.7.STABLE9)
  X-Cache:MISS from nadder-02.openstreetmap.org
  X-Cache-Lookup:MISS from nadder-02.openstreetmap.org:3128
Request Headers
  view source
  Accept:image/webp,*/*;q=0.8
  Accept-Encoding:gzip, deflate
  Accept-Language:fr-FR,en-US;q=0.8
  Connection:keep-alive
  Host:c.tile.openstreetmap.org
  User-Agent:Mozilla/5.0 (Linux; Android 5.0.1; GT-I9505 Build/LRX22C; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.137 Mobile Safari/537.36
  X-DevTools-Emulate-Network-Conditions-Client-Id:01BAB1E4-1122-4CEF-AC90-BDE2C1113EF4
  X-Requested-With:com.myapp.myapp

AngularJS配置

缓存已禁用。

$httpProvider.defaults.cache = false;

我还尝试了以下添加剂，因为 HTTP TILE LOADING 正在获取（未成功）

  //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    
//disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get.Pragma = 'no-cache';

HTML 创建传单指令

  <div data-tap-disabled="true" style="height: 90%; {{iosPlatform ? 'top:10%; position:relative' : ''}}">
    <leaflet id="map" defaults="defaults" center="center"
    bounds="bounds" event-broadcast="events" markers="markers"
    height="100%" width="100%" class="animation" layers="layers"></leaflet>

  </div>

AngularJS代码

angular.extend($scope, {
            center: {
                lat: -2.6273,
                lng: -44.1932,
                zoom: 18
            },
            markers: {},
            defaults: {
                scrollWheelZoom: true
            },
            bounds: {
                southWest: {
                    lat: -2.628074696286876,
                    lng: -44.19960723876953125,
                },
                northEast: {
                    lat: -2.629410211532874,
                    lng: -44.19617401123046874,
                }
            },
            events: {
                map: {
                    enable: ['popupopen'],
                    logic: 'emit'
                }
            },
            tiles: {
                url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                options: {
                    attribution: ''
                }
            },
            layers: {
                "baselayers": {
                    "osm": {
                        "name": "Cidade",
                        "url": "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                        "type": "xyz",
                        "layerParams": {},
                        "layerOptions": {}

                    }


                },
                overlays: {

                }
            },
            controls: {}
        });

当我打开我的地图时，我会调用以下函数：

 $scope.getMyMap = function() {
        var d = $q.defer();
         leafletData.getMap('map').then(function(map) {
            $scope.map = map;
            map.invalidateSize();
            d.resolve(map);
        }, function(err) {

            d.reject(err);
        });
        return d.promise;

    };

Answer 1

经过多次测试，我终于安装了cordova whitelist plugin，一切都恢复正常了。

真不知道最近白名单为什么会有这样的变化。如果我有关于该变化和影响的其他信息，我会及时通知您

Ionic / Leaflet - 无法获取 Tiles 404 Not Found（来自缓存）

Ionic / Leaflet - Can't get Tiles 404 Not Found (from cache)

http-status-code-404

ionic-framework

leaflet

ionic

angular-leaflet-directive