Ionic /单张-无法找到磁贴404(从高速缓存)

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


I'm locked with an issue that is very odd. I'm using leaflet with angular-leaflet-directive. On the previous app, everything worked.

我被一个非常奇怪的问题困住了。我用的是单张的传单。在之前的应用中,一切都运行良好。

Now on a new app, I'd like to implement a new leaflet map. I have therefore copied my previous code.

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

My Issue is that, the leaflet map opens, my markers are created, but

我的问题是,传单地图打开了,我的标记被创建了,但是

TILES are not loaded

瓷砖不加载

(I do have internet & internet rights for my app) Every tile that tries to be loaded failed and gets the following issue :

(我的应用程序有互联网和互联网的权利)每一块试图加载的瓷砖都失败了,出现了以下问题:

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

As you can see, if direct access to the tile, you can see it on browser.

如您所见,如果直接访问这个块,您可以在浏览器上看到它。

Header of each Tile GET request

每个块的头获取请求

    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

我的感觉是它试图从缓存中加载它而不是直接从开放提供程序中加载它我仍然不能得到我的两个项目之间的区别

My other working application has the following header for each tile:

我的另一个工作应用程序有如下的标题:

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 configuration

AngularJS配置

Cache is disabled.

缓存是禁用的。

$httpProvider.defaults.cache = false;

I also tried the following additive as HTTP TILE LOADING are get (not successful)

我还尝试了以下添加剂,如HTTP平铺加载get(不成功)

  //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 Creation of leaflet directive

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 Code

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

When I open my map, I do call the following function :

当我打开地图时,我确实调用了以下函数:

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

    };

1 个解决方案

#1


4  

After many tests, I finally installed the cordova whitelist plugin and with it, everything is back to normal.

经过多次测试,我终于安装了cordova whitelist插件,用它,一切都恢复了正常。

I really don't know yet Why there is this change concerning the whitelist recently. I'll keep you posted if I have other information concerning that change & impacts

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




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2018 ITdaan.com 粤ICP备14056181号