UNPKG

openlayers

Version:

Build tools and sources for developing OpenLayers based mapping applications

492 lines (421 loc) 12.3 kB
goog.provide('ol.source.TileUTFGrid'); goog.require('ol'); goog.require('ol.Attribution'); goog.require('ol.Tile'); goog.require('ol.TileUrlFunction'); goog.require('ol.asserts'); goog.require('ol.events'); goog.require('ol.events.EventType'); goog.require('ol.extent'); goog.require('ol.net'); goog.require('ol.proj'); goog.require('ol.source.State'); goog.require('ol.source.Tile'); goog.require('ol.tilegrid'); /** * @classdesc * Layer source for UTFGrid interaction data loaded from TileJSON format. * * @constructor * @extends {ol.source.Tile} * @param {olx.source.TileUTFGridOptions} options Source options. * @api */ ol.source.TileUTFGrid = function(options) { ol.source.Tile.call(this, { projection: ol.proj.get('EPSG:3857'), state: ol.source.State.LOADING }); /** * @private * @type {boolean} */ this.preemptive_ = options.preemptive !== undefined ? options.preemptive : true; /** * @private * @type {!ol.TileUrlFunctionType} */ this.tileUrlFunction_ = ol.TileUrlFunction.nullTileUrlFunction; /** * @private * @type {string|undefined} */ this.template_ = undefined; /** * @private * @type {boolean} */ this.jsonp_ = options.jsonp || false; if (options.url) { if (this.jsonp_) { ol.net.jsonp(options.url, this.handleTileJSONResponse.bind(this), this.handleTileJSONError.bind(this)); } else { var client = new XMLHttpRequest(); client.addEventListener('load', this.onXHRLoad_.bind(this)); client.addEventListener('error', this.onXHRError_.bind(this)); client.open('GET', options.url); client.send(); } } else if (options.tileJSON) { this.handleTileJSONResponse(options.tileJSON); } else { ol.asserts.assert(false, 51); // Either `url` or `tileJSON` options must be provided } }; ol.inherits(ol.source.TileUTFGrid, ol.source.Tile); /** * @private * @param {Event} event The load event. */ ol.source.TileUTFGrid.prototype.onXHRLoad_ = function(event) { var client = /** @type {XMLHttpRequest} */ (event.target); // status will be 0 for file:// urls if (!client.status || client.status >= 200 && client.status < 300) { var response; try { response = /** @type {TileJSON} */(JSON.parse(client.responseText)); } catch (err) { this.handleTileJSONError(); return; } this.handleTileJSONResponse(response); } else { this.handleTileJSONError(); } }; /** * @private * @param {Event} event The error event. */ ol.source.TileUTFGrid.prototype.onXHRError_ = function(event) { this.handleTileJSONError(); }; /** * Return the template from TileJSON. * @return {string|undefined} The template from TileJSON. * @api */ ol.source.TileUTFGrid.prototype.getTemplate = function() { return this.template_; }; /** * Calls the callback (synchronously by default) with the available data * for given coordinate and resolution (or `null` if not yet loaded or * in case of an error). * @param {ol.Coordinate} coordinate Coordinate. * @param {number} resolution Resolution. * @param {function(this: T, *)} callback Callback. * @param {T=} opt_this The object to use as `this` in the callback. * @param {boolean=} opt_request If `true` the callback is always async. * The tile data is requested if not yet loaded. * @template T * @api */ ol.source.TileUTFGrid.prototype.forDataAtCoordinateAndResolution = function( coordinate, resolution, callback, opt_this, opt_request) { if (this.tileGrid) { var tileCoord = this.tileGrid.getTileCoordForCoordAndResolution( coordinate, resolution); var tile = /** @type {!ol.source.TileUTFGrid.Tile_} */(this.getTile( tileCoord[0], tileCoord[1], tileCoord[2], 1, this.getProjection())); tile.forDataAtCoordinate(coordinate, callback, opt_this, opt_request); } else { if (opt_request === true) { setTimeout(function() { callback.call(opt_this, null); }, 0); } else { callback.call(opt_this, null); } } }; /** * @protected */ ol.source.TileUTFGrid.prototype.handleTileJSONError = function() { this.setState(ol.source.State.ERROR); }; /** * TODO: very similar to ol.source.TileJSON#handleTileJSONResponse * @protected * @param {TileJSON} tileJSON Tile JSON. */ ol.source.TileUTFGrid.prototype.handleTileJSONResponse = function(tileJSON) { var epsg4326Projection = ol.proj.get('EPSG:4326'); var sourceProjection = this.getProjection(); var extent; if (tileJSON.bounds !== undefined) { var transform = ol.proj.getTransformFromProjections( epsg4326Projection, sourceProjection); extent = ol.extent.applyTransform(tileJSON.bounds, transform); } if (tileJSON.scheme !== undefined) { ol.DEBUG && console.assert(tileJSON.scheme == 'xyz', 'tileJSON-scheme is "xyz"'); } var minZoom = tileJSON.minzoom || 0; var maxZoom = tileJSON.maxzoom || 22; var tileGrid = ol.tilegrid.createXYZ({ extent: ol.tilegrid.extentFromProjection(sourceProjection), maxZoom: maxZoom, minZoom: minZoom }); this.tileGrid = tileGrid; this.template_ = tileJSON.template; var grids = tileJSON.grids; if (!grids) { this.setState(ol.source.State.ERROR); return; } this.tileUrlFunction_ = ol.TileUrlFunction.createFromTemplates(grids, tileGrid); if (tileJSON.attribution !== undefined) { var attributionExtent = extent !== undefined ? extent : epsg4326Projection.getExtent(); /** @type {Object.<string, Array.<ol.TileRange>>} */ var tileRanges = {}; var z, zKey; for (z = minZoom; z <= maxZoom; ++z) { zKey = z.toString(); tileRanges[zKey] = [tileGrid.getTileRangeForExtentAndZ(attributionExtent, z)]; } this.setAttributions([ new ol.Attribution({ html: tileJSON.attribution, tileRanges: tileRanges }) ]); } this.setState(ol.source.State.READY); }; /** * @inheritDoc */ ol.source.TileUTFGrid.prototype.getTile = function(z, x, y, pixelRatio, projection) { var tileCoordKey = this.getKeyZXY(z, x, y); if (this.tileCache.containsKey(tileCoordKey)) { return /** @type {!ol.Tile} */ (this.tileCache.get(tileCoordKey)); } else { ol.DEBUG && console.assert(projection, 'argument projection is truthy'); var tileCoord = [z, x, y]; var urlTileCoord = this.getTileCoordForTileUrlFunction(tileCoord, projection); var tileUrl = this.tileUrlFunction_(urlTileCoord, pixelRatio, projection); var tile = new ol.source.TileUTFGrid.Tile_( tileCoord, tileUrl !== undefined ? ol.Tile.State.IDLE : ol.Tile.State.EMPTY, tileUrl !== undefined ? tileUrl : '', this.tileGrid.getTileCoordExtent(tileCoord), this.preemptive_, this.jsonp_); this.tileCache.set(tileCoordKey, tile); return tile; } }; /** * @inheritDoc */ ol.source.TileUTFGrid.prototype.useTile = function(z, x, y) { var tileCoordKey = this.getKeyZXY(z, x, y); if (this.tileCache.containsKey(tileCoordKey)) { this.tileCache.get(tileCoordKey); } }; /** * @constructor * @extends {ol.Tile} * @param {ol.TileCoord} tileCoord Tile coordinate. * @param {ol.Tile.State} state State. * @param {string} src Image source URI. * @param {ol.Extent} extent Extent of the tile. * @param {boolean} preemptive Load the tile when visible (before it's needed). * @param {boolean} jsonp Load the tile as a script. * @private */ ol.source.TileUTFGrid.Tile_ = function(tileCoord, state, src, extent, preemptive, jsonp) { ol.Tile.call(this, tileCoord, state); /** * @private * @type {string} */ this.src_ = src; /** * @private * @type {ol.Extent} */ this.extent_ = extent; /** * @private * @type {boolean} */ this.preemptive_ = preemptive; /** * @private * @type {Array.<string>} */ this.grid_ = null; /** * @private * @type {Array.<string>} */ this.keys_ = null; /** * @private * @type {Object.<string, Object>|undefined} */ this.data_ = null; /** * @private * @type {boolean} */ this.jsonp_ = jsonp; }; ol.inherits(ol.source.TileUTFGrid.Tile_, ol.Tile); /** * Get the image element for this tile. * @return {Image} Image. */ ol.source.TileUTFGrid.Tile_.prototype.getImage = function() { return null; }; /** * Synchronously returns data at given coordinate (if available). * @param {ol.Coordinate} coordinate Coordinate. * @return {*} The data. */ ol.source.TileUTFGrid.Tile_.prototype.getData = function(coordinate) { if (!this.grid_ || !this.keys_) { return null; } var xRelative = (coordinate[0] - this.extent_[0]) / (this.extent_[2] - this.extent_[0]); var yRelative = (coordinate[1] - this.extent_[1]) / (this.extent_[3] - this.extent_[1]); var row = this.grid_[Math.floor((1 - yRelative) * this.grid_.length)]; if (typeof row !== 'string') { return null; } var code = row.charCodeAt(Math.floor(xRelative * row.length)); if (code >= 93) { code--; } if (code >= 35) { code--; } code -= 32; var data = null; if (code in this.keys_) { var id = this.keys_[code]; if (this.data_ && id in this.data_) { data = this.data_[id]; } else { data = id; } } return data; }; /** * Calls the callback (synchronously by default) with the available data * for given coordinate (or `null` if not yet loaded). * @param {ol.Coordinate} coordinate Coordinate. * @param {function(this: T, *)} callback Callback. * @param {T=} opt_this The object to use as `this` in the callback. * @param {boolean=} opt_request If `true` the callback is always async. * The tile data is requested if not yet loaded. * @template T */ ol.source.TileUTFGrid.Tile_.prototype.forDataAtCoordinate = function(coordinate, callback, opt_this, opt_request) { if (this.state == ol.Tile.State.IDLE && opt_request === true) { ol.events.listenOnce(this, ol.events.EventType.CHANGE, function(e) { callback.call(opt_this, this.getData(coordinate)); }, this); this.loadInternal_(); } else { if (opt_request === true) { setTimeout(function() { callback.call(opt_this, this.getData(coordinate)); }.bind(this), 0); } else { callback.call(opt_this, this.getData(coordinate)); } } }; /** * @inheritDoc */ ol.source.TileUTFGrid.Tile_.prototype.getKey = function() { return this.src_; }; /** * @private */ ol.source.TileUTFGrid.Tile_.prototype.handleError_ = function() { this.state = ol.Tile.State.ERROR; this.changed(); }; /** * @param {!UTFGridJSON} json UTFGrid data. * @private */ ol.source.TileUTFGrid.Tile_.prototype.handleLoad_ = function(json) { this.grid_ = json.grid; this.keys_ = json.keys; this.data_ = json.data; this.state = ol.Tile.State.EMPTY; this.changed(); }; /** * @private */ ol.source.TileUTFGrid.Tile_.prototype.loadInternal_ = function() { if (this.state == ol.Tile.State.IDLE) { this.state = ol.Tile.State.LOADING; if (this.jsonp_) { ol.net.jsonp(this.src_, this.handleLoad_.bind(this), this.handleError_.bind(this)); } else { var client = new XMLHttpRequest(); client.addEventListener('load', this.onXHRLoad_.bind(this)); client.addEventListener('error', this.onXHRError_.bind(this)); client.open('GET', this.src_); client.send(); } } }; /** * @private * @param {Event} event The load event. */ ol.source.TileUTFGrid.Tile_.prototype.onXHRLoad_ = function(event) { var client = /** @type {XMLHttpRequest} */ (event.target); // status will be 0 for file:// urls if (!client.status || client.status >= 200 && client.status < 300) { var response; try { response = /** @type {!UTFGridJSON} */(JSON.parse(client.responseText)); } catch (err) { this.handleError_(); return; } this.handleLoad_(response); } else { this.handleError_(); } }; /** * @private * @param {Event} event The error event. */ ol.source.TileUTFGrid.Tile_.prototype.onXHRError_ = function(event) { this.handleError_(); }; /** * Load not yet loaded URI. */ ol.source.TileUTFGrid.Tile_.prototype.load = function() { if (this.preemptive_) { this.loadInternal_(); } };