Ionic / Leaflet - Tiles 404 nicht gefunden (aus dem Cache)
Ich habe ein seltsames Problem. Ich benutzeFlugblat mit eckige-broschüre-richtlinie. Bei der vorherigen App hat alles funktioniert.
Jetzt auf einer neuen App möchte ich eine neue Faltblattkarte implementieren. Ich habe daher meinen bisherigen Code kopiert.
Mein Problem ist, dass die Faltblattkarte geöffnet wird, meine Markierungen erstellt werden, aber
TILES werden nicht geladen
(Ich habe Internet- und Internetrechte für meine App.) Jede Kachel, die versucht, geladen zu werden, ist fehlgeschlagen und hat das folgende Problem:
GET http://a.tile.openstreetmap.org/18/98891/132985.png 404 (Not Found)
Wie Sie sehen können, können Sie den direkten Zugriff auf die Kachel im Browser anzeigen.
Header jeder Tile GET Anfrage
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
Mein Gefühl ist, dass es versucht, es aus dem Cache zu laden, anstatt es direkt vom Open Provider zu laden. Ich kann immer noch nicht herausfinden, was zwischen meinen beiden Projekten unterschiedlich ist.
Meine andere Arbeitsanwendung hat den folgenden Header für jede Kachel:
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 ist deaktiviert.
$httpProvider.defaults.cache = false;
Ich habe auch das folgende Additiv ausprobiert, da HTTP TILE LOADING get (nicht erfolgreich) sind.
//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 Erstellung von Merkblättern
<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: {}
});
Wenn ich meine Map öffne, rufe ich die folgende Funktion auf:
$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;
};