131 lines
4.7 KiB
JavaScript
131 lines
4.7 KiB
JavaScript
'use strict';
|
|
|
|
(function (window, emr, mapbox, MM, undefined) {
|
|
var StorageRequestManager = function (storage) {
|
|
MM.RequestManager.apply(this, []);
|
|
this._storage = storage;
|
|
};
|
|
|
|
StorageRequestManager.prototype._imageToDataUri = function (image) {
|
|
var canvas = window.document.createElement('canvas');
|
|
canvas.width = image.width;
|
|
canvas.height = image.height;
|
|
|
|
var context = canvas.getContext('2d');
|
|
context.drawImage(image, 0, 0);
|
|
|
|
return canvas.toDataURL('image/png');
|
|
};
|
|
|
|
StorageRequestManager.prototype._createTileImage = function (id, coord, value, cache) {
|
|
var img = window.document.createElement('img');
|
|
img.id = id;
|
|
img.style.position = 'absolute';
|
|
img.coord = coord;
|
|
this.loadingBay.appendChild(img);
|
|
if (cache) {
|
|
img.onload = this.getLoadCompleteWithCache();
|
|
img.crossOrigin = 'Anonymous';
|
|
} else {
|
|
img.onload = this.getLoadComplete();
|
|
}
|
|
img.onerror = this.getLoadComplete();
|
|
img.src = value;
|
|
};
|
|
|
|
StorageRequestManager.prototype._loadTile = function (id, coord, url) {
|
|
var self = this;
|
|
if (this._storage) {
|
|
this._storage.get(id, function (value) {
|
|
if (value) {
|
|
self._createTileImage(id, coord, value, false);
|
|
} else {
|
|
self._createTileImage(id, coord, url, true);
|
|
}
|
|
}, function () {
|
|
self._createTileImage(id, coord, url, true);
|
|
});
|
|
} else {
|
|
self._createTileImage(id, coord, url, false);
|
|
}
|
|
};
|
|
|
|
StorageRequestManager.prototype.processQueue = function (sortFunc) {
|
|
if (sortFunc && this.requestQueue.length > 8) {
|
|
this.requestQueue.sort(sortFunc);
|
|
}
|
|
while (this.openRequestCount < this.maxOpenRequests && this.requestQueue.length > 0) {
|
|
var request = this.requestQueue.pop();
|
|
if (request) {
|
|
this.openRequestCount++;
|
|
this._loadTile(request.id, request.coord, request.url);
|
|
request = request.id = request.coord = request.url = null;
|
|
}
|
|
}
|
|
};
|
|
|
|
StorageRequestManager.prototype.getLoadCompleteWithCache = function () {
|
|
if (!this._loadComplete) {
|
|
var theManager = this;
|
|
this._loadComplete = function(e) {
|
|
e = e || window.event;
|
|
|
|
var img = e.srcElement || e.target;
|
|
img.onload = img.onerror = null;
|
|
|
|
if (theManager._storage) {
|
|
theManager._storage.add(this.id, theManager._imageToDataUri(this));
|
|
}
|
|
|
|
theManager.loadingBay.removeChild(img);
|
|
theManager.openRequestCount--;
|
|
delete theManager.requestsById[img.id];
|
|
|
|
if (e.type === 'load' && (img.complete ||
|
|
(img.readyState && img.readyState === 'complete'))) {
|
|
theManager.dispatchCallback('requestcomplete', img);
|
|
} else {
|
|
theManager.dispatchCallback('requesterror', {
|
|
element: img,
|
|
url: ('' + img.src)
|
|
});
|
|
img.src = null;
|
|
}
|
|
|
|
setTimeout(theManager.getProcessQueue(), 0);
|
|
};
|
|
}
|
|
return this._loadComplete;
|
|
};
|
|
|
|
MM.extend(StorageRequestManager, MM.RequestManager);
|
|
|
|
var StorageLayer = function(provider, parent, name, storage) {
|
|
this.parent = parent || document.createElement('div');
|
|
this.parent.style.cssText = 'position: absolute; top: 0px; left: 0px;' +
|
|
'width: 100%; height: 100%; margin: 0; padding: 0; z-index: 0';
|
|
this.name = name;
|
|
this.levels = {};
|
|
this.requestManager = new StorageRequestManager(storage);
|
|
this.requestManager.addCallback('requestcomplete', this.getTileComplete());
|
|
this.requestManager.addCallback('requesterror', this.getTileError());
|
|
if (provider) {
|
|
this.setProvider(provider);
|
|
}
|
|
};
|
|
|
|
MM.extend(StorageLayer, MM.Layer);
|
|
|
|
var StorageTemplatedLayer = function(template, subdomains, name, storage) {
|
|
return new StorageLayer(new MM.Template(template, subdomains), null, name, storage);
|
|
};
|
|
|
|
emr.on('mapLoad', function (storage) {
|
|
var map = mapbox.map('map');
|
|
map.addLayer(new StorageTemplatedLayer('http://{S}.tile.osm.org/{Z}/{X}/{Y}.png',
|
|
['a', 'b', 'c'], undefined, storage));
|
|
map.ui.zoomer.add();
|
|
map.ui.zoombox.add();
|
|
map.centerzoom({lat: 53.902254, lon: 27.561850}, 13);
|
|
});
|
|
})(window, window.offlineMaps.eventManager, mapbox, MM); |