Added websockets to the Map object
'onopen' and 'onmessage' events are handled in src/layer/tile/TileLayer.js Tile data is received as an ArrayBuffer which contains a string message followed by a new line and then by the actual PNG data. The PNG data is encoded in base-64 in order to be displayed.
This commit is contained in:
parent
2213e76a32
commit
a8075b8250
3 changed files with 66 additions and 11 deletions
|
@ -44,6 +44,12 @@ L.Layer = L.Evented.extend({
|
|||
this._map = map;
|
||||
this._zoomAnimated = map._zoomAnimated;
|
||||
|
||||
if (!this._map.socket.onopen) {
|
||||
this._map.socket.onopen = L.bind(this._initDocument, this);
|
||||
}
|
||||
if (!this._map.socket.onmessage) {
|
||||
this._map.socket.onmessage = L.bind(this._onMessage, this);
|
||||
}
|
||||
this.onAdd(map);
|
||||
|
||||
if (this.getAttribution && this._map.attributionControl) {
|
||||
|
@ -56,7 +62,10 @@ L.Layer = L.Evented.extend({
|
|||
|
||||
this.fire('add');
|
||||
map.fire('layeradd', {layer: this});
|
||||
}
|
||||
},
|
||||
|
||||
_initDocument: function () {},
|
||||
_onMessage: function () {}
|
||||
});
|
||||
|
||||
|
||||
|
|
|
@ -44,6 +44,17 @@ L.TileLayer = L.GridLayer.extend({
|
|||
}
|
||||
},
|
||||
|
||||
_initDocument: function () {
|
||||
if (!this._map.socket) {
|
||||
console.log("Socket initialization error");
|
||||
return;
|
||||
}
|
||||
if (this.options.doc) {
|
||||
this._map.socket.send("load " + this.options.doc);
|
||||
}
|
||||
this._update();
|
||||
},
|
||||
|
||||
setUrl: function (url, noRedraw) {
|
||||
this._url = url;
|
||||
|
||||
|
@ -69,19 +80,36 @@ L.TileLayer = L.GridLayer.extend({
|
|||
*/
|
||||
tile.alt = '';
|
||||
|
||||
tile.src = this.getTileUrl(coords);
|
||||
tile.src = 'http://i387.photobucket.com/albums/oo316/barkse90/Cartman-Cop-head-256x256.png';
|
||||
|
||||
return tile;
|
||||
},
|
||||
|
||||
getTileUrl: function (coords) {
|
||||
return L.Util.template(this._url, L.extend({
|
||||
r: this.options.detectRetina && L.Browser.retina && this.options.maxZoom > 0 ? '@2x' : '',
|
||||
s: this._getSubdomain(coords),
|
||||
x: coords.x,
|
||||
y: this.options.tms ? this._globalTileRange.max.y - coords.y : coords.y,
|
||||
z: this._getZoomForUrl()
|
||||
}, this.options));
|
||||
_onMessage: function (evt) {
|
||||
if (typeof(evt.data) === "string") {
|
||||
console.log(evt.data);
|
||||
}
|
||||
else if (typeof(evt.data) === "object") {
|
||||
var bytes = new Uint8Array(evt.data);
|
||||
var index = 0;
|
||||
// search for the first newline which marks the end of the message
|
||||
while (index < bytes.length && bytes[index] != 10) {
|
||||
index++;
|
||||
}
|
||||
var text_msg_bytes = bytes.subarray(0, index + 1);
|
||||
var info = this._getTileInfo(String.fromCharCode.apply(null, text_msg_bytes));
|
||||
var coords = this._twipsToCoords(new L.Point(info.x, info.y));
|
||||
coords.z = this._map.getZoom();
|
||||
var data = bytes.subarray(index + 1);
|
||||
var done = L.bind(this._tileReady, this, coords)
|
||||
|
||||
var tile = document.createElement("img");
|
||||
tile.onload = L.bind(this._tileOnLoad, this, done, tile);
|
||||
tile.onerror = L.bind(this._tileOnError, this, done, tile);
|
||||
tile.alt = '';
|
||||
tile.src = 'data:image/png;base64,' + window.btoa(String.fromCharCode.apply(null, data));
|
||||
this._handleTile(tile, coords);
|
||||
}
|
||||
},
|
||||
|
||||
_tileOnLoad: function (done, tile) {
|
||||
|
@ -108,6 +136,22 @@ L.TileLayer = L.GridLayer.extend({
|
|||
options.tileSize;
|
||||
},
|
||||
|
||||
_getTileInfo: function (msg) {
|
||||
var tokens = msg.split(" ");
|
||||
var info = new Object;
|
||||
for (var i = 0; i < tokens.length; i++) {
|
||||
if (tokens[i].substring(0,9) === "tileposx=")
|
||||
info.x = parseInt(tokens[i].substring(9));
|
||||
if (tokens[i].substring(0,9) === "tileposy=")
|
||||
info.y = parseInt(tokens[i].substring(9));
|
||||
if (tokens[i].substring(0,10) === "tilewidth=")
|
||||
info.tilewidth = parseInt(tokens[i].substring(10));
|
||||
if (tokens[i].substring(0,11) === "tileheight=")
|
||||
info.tileheight = parseInt(tokens[i].substring(11));
|
||||
}
|
||||
return info;
|
||||
},
|
||||
|
||||
_onTileRemove: function (e) {
|
||||
e.tile.onload = null;
|
||||
},
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
L.Map = L.Evented.extend({
|
||||
|
||||
options: {
|
||||
crs: L.CRS.EPSG3857,
|
||||
crs: L.CRS.Simple,
|
||||
|
||||
/*
|
||||
center: LatLng,
|
||||
|
@ -21,6 +21,8 @@ L.Map = L.Evented.extend({
|
|||
initialize: function (id, options) { // (HTMLElement or String, Object)
|
||||
options = L.setOptions(this, options);
|
||||
|
||||
this.socket = new WebSocket(options.server);
|
||||
this.socket.binaryType = "arraybuffer";
|
||||
this._initContainer(id);
|
||||
this._initLayout();
|
||||
|
||||
|
|
Loading…
Reference in a new issue