Ionic / Leaflet - 无法找到Tiles 404（来自缓存） [英] Ionic / Leaflet - Can't get Tiles 404 Not Found (from cache)
问题描述
我被一个非常奇怪的问题锁定了。
我正在使用宣传单 -leaflet-directiverel =nofollow> angular-leaflet-directive 。
在之前的应用程序中，一切正常。
现在在一个新的应用程序上，我想实现一个新的传单地图。
因此我复制了我之前的代码。
我的问题是，传单地图打开，我的标记已创建，但
TILES未加载
（我确实有互联网和互联网我的应用程序的权限）
每个尝试加载的磁贴都失败并出现以下问题：
GET http： //a.tile.openstreetmap.org/18/98891/132985.png 404（未找到）
如您所见，如果直接访问磁贴，您可以在浏览器上看到它。
每个Tile GET请求的标头
GENERAL
请求网址：http：//a.tile.openstreetmap.org/18/98892/132984.png
申请方法：GET
**状态代码：404 Not Found（来自缓存）**
回复标题
Client-Via：shouldInterceptRequest
REQUEST HEADERS
显示临时标题
接受：image / webp ，* / *; q = 0.8
User-Agent：Mozilla / 5.0（Linux; Android 5.0.1; GT-I9505 Build / LRX22C; wv）AppleWebKit / 537.36（KHTML，类似Gecko）版本/ 4.0 Chrome / 42.0.2311.137 Mobile Safari / 537.36
< blockquote>
我的感觉是它试图从缓存加载而不是
直接从开放提供商加载它
我仍然无法得到我的2之间有什么不同项目
我的其他工作应用程序每个图块都有以下标题：
GENERAL
远程地址：192.163.219.40：80
请求网址：http：//c.tile.openstreetmap.org/18/98818/132892.png
请求方法：GET
状态代码：200 OK
响应标头
查看源
Access-Control-Allow-Origin：*
Cache-Control：max -age = 604800
内容长度：3584
内容类型：image / png
日期：星期五，2015年5月8日13:57:36 GMT
ETag：51fb8a7a0f719b211641dca08bf1d76b
到期日：2015年5月15日星期五13:57:36 GMT
服务器：Apache / 2.4.7（Ubuntu）
通过：1.1 nadder -02.openstreetmap.org:3128(squid/2.7.STABLE9)
X-Cache：来自nadder-02.openstreetmap.org的MISS
X-Cache-Lookup：来自nadder-02.openstreetmap的MISS。组织：3128
请求标题
查看源
接受：image / webp，* / *; q = 0.8
接受编码：gzip，deflate
接受语言：fr-FR，en-US; q = 0.8
连接：keep-alive
主持人：c.tile.openstreetmap.org
用户代理：Mozilla / 5.0（Linux; Android 5.0.1; GT-I9505 Build / LRX22C; wv）AppleWebKit / 537.36（KHTML，类似Gecko）版本/ 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得到（不成功）
//如果不存在，则初始化获取
if（！$ httpProvider.defaults.headers.get）{
$ httpProvider。 defaults.headers.get = {};
}
//禁用IE ajax请求缓存
$ httpProvider.defaults.headers.get ['If-Modified-Since'] ='Mon，26 Jul 1997 05:00:00 GMT ;
//额外
$ httpProvider.defaults.headers.get ['Cache-Control'] ='no-cache';
$ httpProvider.defaults.headers.get.Pragma ='no-cache';
HTML创建传单指令
< div data-tap-disabled =truestyle =height：90％; {{iosPlatform？'top：10％; position：relative'： ''}}>
< leaflet id =mapdefaults =defaultscenter =center
bounds =boundsevent-broadcast =eventsmarkers =markers
height = 100％width =100％class =animationlayers =layers>< / leaflet>
< / div>
AngularJS代码
angular.extend（$ scope，{
center：{
lat：-2.6273，
lng：-44.1932，
zoom ：18
}，
标记：{}，
默认值：{
scrollWheelZoom：true
}，
bounds：{
southWest： {
lat：-2.628074696286876，
lng：-44.19960723876953125，
}，
northEast：{
lat：-2.629410211532874，
lng：-44.19617401123046874，
}
}，
事件：{
map：{
enable：['popupopen']，
逻辑：'emit'
}
}，
tiles：{
url：'http s：// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png'，
选项：{
归因：''
}
}，
图层：{
baselayers：{
osm：{
name：Cidade，
url： http：// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png，
type：xyz，
layerParams： {}，
layerOptions：{}
}
}，
叠加：{
}
}，
控制：{}
}）;
当我打开地图时，我会调用以下函数：
$ scope.getMyMap = function（）{
var d = $ q.defer（）;
leafletData.getMap（'map'）。then（function（map）{
$ scope.map = map;
map.invalidateSize（）;
d.resolve（map ）;
}，函数（错误）{
d.reject（错误）;
}）;
返回d.promise;
};
经过多次测试，我终于安装了 cordova whitelist插件，随之而来的一切都恢复正常。
我真的不知道为什么最近有关于白名单的变化。
如果我有关于此更改的其他信息，我会及时通知您。影响
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（来自缓存）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
