Ionic/Leaflet - 无法获得 Tiles 404 Not Found(来自缓存) [英] Ionic / Leaflet - Can't get Tiles 404 Not Found (from cache)

问题描述

我遇到了一个非常奇怪的问题.我正在使用 leaflet 和 角度传单指令.在之前的应用中，一切正常.

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

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

<块引用>

TILES 未加载

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

GET http://a.tile.openstreetmap.org/18/98891/132985.png 404(未找到)

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

每个 Tile GET 请求的标头

 一般请求网址:http://a.tile.openstreetmap.org/18/98892/132984.png请求方法:GET**状态码:404 未找到(来自缓存)**响应头Client-Via:shouldInterceptRequest请求标头显示临时标题接受:image/webp,*/*;q=0.8用户代理:Mozilla/5.0 (Linux; Android 5.0.1; GT-I9505 Build/LRX22C; wv) AppleWebKit/537.36 (KHTML, like Gecko) 版本/4.0 Chrome/42.0.2311.137 Mobile Safari/537.36

<块引用>

我的感觉是它试图从缓存中加载它而不是直接从开放提供者加载它我仍然无法理解我的 2 个项目之间有什么不同

我的其他工作应用程序的每个磁贴都有以下标题:

一般远程地址:192.163.219.40:80请求网址:http://c.tile.openstreetmap.org/18/98818/132892.png请求方法:GET状态码:200 OK响应标头查看源代码访问控制允许来源:*缓存控制:max-age=604800内容长度:3584内容类型:图片/png日期:格林威治标准时间 2015 年 5 月 8 日星期五 13:57:36ETag:51fb8a7a0f719b211641dca08bf1d76b"过期时间:格林威治标准时间 2015 年 5 月 15 日星期五 13:57:36服务器:Apache/2.4.7 (Ubuntu)通过:1.1 nadder-02.openstreetmap.org:3128 (squid/2.7.STABLE9)X-Cache:MISS 来自 nadder-02.openstreetmap.orgX-Cache-Lookup:MISS 来自 nadder-02.openstreetmap.org:3128请求标头查看源代码接受:image/webp,*/*;q=0.8接受编码:gzip，放气接受语言:fr-FR,en-US;q=0.8连接:保持活动主办方:c.tile.openstreetmap.org用户代理:Mozilla/5.0 (Linux; Android 5.0.1; GT-I9505 Build/LRX22C; wv) AppleWebKit/537.36 (KHTML, like Gecko) 版本/4.0 Chrome/42.0.2311.137 Mobile Safari/537.36X-DevTools-Emulate-Network-Conditions-Client-Id:01BAB1E4-1122-4CEF-AC90-BDE2C1113EF4X-Requested-With:com.myapp.myapp

AngularJS 配置

缓存已禁用.

$httpProvider.defaults.cache = false;

我还尝试了以下添加剂，因为 HTTP TILE LOADING 正在获取(不成功)

//如果不存在则初始化getif (!$httpProvider.defaults.headers.get) {$httpProvider.defaults.headers.get = {};}//禁用IE ajax请求缓存$httpProvider.defaults.headers.get['If-Modified-Since'] = '1997 年 7 月 26 日星期一 05:00:00 GMT';//额外的$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';$httpProvider.defaults.headers.get.Pragma = '无缓存';

HTML 创建传单指令

 <div data-tap-disabled="true" style="height: 90%; {{iosPlatform ? 'top:10%; position:relative' : ''}}">

AngularJS 代码

angular.extend($scope, {中央: {纬度:-2.6273，液化天然气:-44.1932，变焦:18},标记:{}，默认值:{滚动轮缩放:真},界限:{西南:{纬度:-2.628074696286876，液化天然气:-44.19960723876953125，},东北:{纬度:-2.629410211532874，液化天然气:-44.19617401123046874，}},事件:{地图: {启用:['popupopen']，逻辑:发射"}},瓷砖:{url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',选项: {归属:''}},层:{基础层":{osm":{名称":Cidade"，"url": "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",类型":xyz"，层参数":{}，层选项":{}}},覆盖:{}},控件:{}});

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

 $scope.getMyMap = function() {var d = $q.defer();leafletData.getMap('map').then(function(map) {$scope.map = 地图；map.invalidateSize();d.resolve(地图)；}，函数(错误){d.拒绝(错误)；});返回 d.promise;};

解决方案

经过多次测试，我终于安装了cordova 白名单插件 有了它，一切都恢复正常了.

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

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

Cache is disabled.

$httpProvider.defaults.cache = false;

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

  //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

  <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

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;

    };

解决方案

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

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

这篇关于Ionic/Leaflet - 无法获得 Tiles 404 Not Found(来自缓存)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！