100 lines
3.5 KiB
JavaScript
100 lines
3.5 KiB
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
(function (window, emr, OpenLayers, undefined) {
|
||
|
|
var StorageImageTile = OpenLayers.Class(OpenLayers.Tile.Image, {
|
||
|
|
crossOriginKeyword: 'Anonymous',
|
||
|
|
|
||
|
|
_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');
|
||
|
|
},
|
||
|
|
|
||
|
|
onImageLoadWithCache: function() {
|
||
|
|
if (this.storage) {
|
||
|
|
this.storage.add(this._storageKey, this._imageToDataUri(this.imgDiv));
|
||
|
|
}
|
||
|
|
this.onImageLoad.apply(this, arguments);
|
||
|
|
},
|
||
|
|
|
||
|
|
renderTile: function() {
|
||
|
|
var self = this;
|
||
|
|
var xyz = this.layer.getXYZ(this.bounds);
|
||
|
|
var key = xyz.z + ',' + xyz.y + ',' + xyz.x;
|
||
|
|
var url = this.layer.getURL(this.bounds);
|
||
|
|
if (this.storage) {
|
||
|
|
this.storage.get(key, function (value) {
|
||
|
|
if (value) {
|
||
|
|
self.initImage(key, value, false);
|
||
|
|
} else {
|
||
|
|
self.initImage(key, url, true);
|
||
|
|
}
|
||
|
|
}, function () {
|
||
|
|
self.initImage(key, url, true);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
self.initImage(key, url, false);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
initImage: function(key, url, cache) {
|
||
|
|
this.layer.div.appendChild(this.getTile());
|
||
|
|
this.events.triggerEvent(this._loadEvent);
|
||
|
|
var img = this.getImage();
|
||
|
|
|
||
|
|
this.stopLoading();
|
||
|
|
if (cache) {
|
||
|
|
OpenLayers.Event.observe(img, 'load',
|
||
|
|
OpenLayers.Function.bind(this.onImageLoadWithCache, this)
|
||
|
|
);
|
||
|
|
this._storageKey = key;
|
||
|
|
} else {
|
||
|
|
OpenLayers.Event.observe(img, 'load',
|
||
|
|
OpenLayers.Function.bind(this.onImageLoad, this)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
OpenLayers.Event.observe(img, 'error',
|
||
|
|
OpenLayers.Function.bind(this.onImageError, this)
|
||
|
|
);
|
||
|
|
this.imageReloadAttempts = 0;
|
||
|
|
this.setImgSrc(url);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var StorageOSMLayer = OpenLayers.Class(OpenLayers.Layer.OSM, {
|
||
|
|
async: true,
|
||
|
|
tileClass: StorageImageTile,
|
||
|
|
|
||
|
|
initialize: function(name, url, options) {
|
||
|
|
OpenLayers.Layer.OSM.prototype.initialize.apply(this, arguments);
|
||
|
|
this.tileOptions = OpenLayers.Util.extend({
|
||
|
|
storage: options.storage
|
||
|
|
}, this.options && this.options.tileOptions);
|
||
|
|
},
|
||
|
|
|
||
|
|
clone: function (obj) {
|
||
|
|
if (obj == null) {
|
||
|
|
obj = new StorageOSMLayer(this.name,
|
||
|
|
this.url,
|
||
|
|
this.getOptions());
|
||
|
|
}
|
||
|
|
|
||
|
|
obj = OpenLayers.Layer.Grid.prototype.clone.apply(this, [obj]);
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
emr.on('mapLoad', function (storage) {
|
||
|
|
var map = new OpenLayers.Map('map');
|
||
|
|
map.addLayer(new StorageOSMLayer(undefined, undefined, {storage: storage}));
|
||
|
|
var fromProjection = new OpenLayers.Projection('EPSG:4326');
|
||
|
|
var toProjection = new OpenLayers.Projection('EPSG:900913');
|
||
|
|
var center = new OpenLayers.LonLat(27.561850, 53.902254).transform(fromProjection, toProjection);
|
||
|
|
map.setCenter(center, 13);
|
||
|
|
});
|
||
|
|
})(window, window.offlineMaps.eventManager, OpenLayers);
|