s/ol3/ol/
This commit is contained in:
Tom Payne
@@ -0,0 +1,9 @@
|
||||
goog.provide('ol.renderer.dom');
|
||||
|
||||
goog.require('goog.functions');
|
||||
|
||||
|
||||
/**
|
||||
* @return {boolean} Is supported.
|
||||
*/
|
||||
ol.renderer.dom.isSupported = goog.functions.TRUE;
|
||||
@@ -0,0 +1,85 @@
|
||||
goog.provide('ol.renderer.dom.Layer');
|
||||
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.renderer.Layer');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @extends {ol.renderer.Layer}
|
||||
* @param {ol.renderer.Map} mapRenderer Map renderer.
|
||||
* @param {ol.Layer} layer Layer.
|
||||
* @param {!Element} target Target.
|
||||
*/
|
||||
ol.renderer.dom.Layer = function(mapRenderer, layer, target) {
|
||||
goog.base(this, mapRenderer, layer);
|
||||
|
||||
/**
|
||||
* @type {!Element}
|
||||
* @protected
|
||||
*/
|
||||
this.target = target;
|
||||
|
||||
/**
|
||||
* Top left corner of the target in map coords.
|
||||
*
|
||||
* @type {ol.Coordinate}
|
||||
* @protected
|
||||
*/
|
||||
this.origin = null;
|
||||
|
||||
this.handleLayerOpacityChange();
|
||||
this.handleLayerVisibleChange();
|
||||
|
||||
};
|
||||
goog.inherits(ol.renderer.dom.Layer, ol.renderer.Layer);
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
* @return {ol.renderer.Map} Map renderer.
|
||||
*/
|
||||
ol.renderer.dom.Layer.prototype.getMapRenderer = function() {
|
||||
return /** @type {ol.renderer.dom.Map} */ goog.base(this, 'getMapRenderer');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
ol.renderer.dom.Layer.prototype.handleLayerLoad = function() {
|
||||
this.getMap().render();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
ol.renderer.dom.Layer.prototype.handleLayerOpacityChange = function() {
|
||||
goog.style.setOpacity(this.target, this.getLayer().getOpacity());
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
ol.renderer.dom.Layer.prototype.handleLayerVisibleChange = function() {
|
||||
goog.style.showElement(this.target, this.getLayer().getVisible());
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Render.
|
||||
*/
|
||||
ol.renderer.dom.Layer.prototype.render = goog.abstractMethod;
|
||||
|
||||
|
||||
/**
|
||||
* Set the location of the top left corner of the target.
|
||||
*
|
||||
* @param {ol.Coordinate} origin Origin.
|
||||
*/
|
||||
ol.renderer.dom.Layer.prototype.setOrigin = function(origin) {
|
||||
this.origin = origin;
|
||||
};
|
||||
@@ -0,0 +1,169 @@
|
||||
goog.provide('ol.renderer.dom.Map');
|
||||
|
||||
goog.require('goog.asserts');
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.dom.TagName');
|
||||
goog.require('goog.style');
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.TileLayer');
|
||||
goog.require('ol.renderer.Map');
|
||||
goog.require('ol.renderer.dom.TileLayer');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @extends {ol.renderer.Map}
|
||||
* @param {Element} container Container.
|
||||
* @param {ol.Map} map Map.
|
||||
*/
|
||||
ol.renderer.dom.Map = function(container, map) {
|
||||
|
||||
goog.base(this, container, map);
|
||||
|
||||
/**
|
||||
* @type {!Element}
|
||||
* @private
|
||||
*/
|
||||
this.layersPane_ = goog.dom.createElement(goog.dom.TagName.DIV);
|
||||
this.layersPane_.className = 'ol-layers-pane';
|
||||
this.layersPane_.style.position = 'absolute';
|
||||
goog.dom.appendChild(container, this.layersPane_);
|
||||
|
||||
/**
|
||||
* @type {Object}
|
||||
* @private
|
||||
*/
|
||||
this.layerPanes_ = {};
|
||||
|
||||
/**
|
||||
* @type {ol.Coordinate|undefined}
|
||||
* @private
|
||||
*/
|
||||
this.renderedCenter_ = undefined;
|
||||
|
||||
/**
|
||||
* The pixel offset of the layers pane with respect to its container.
|
||||
*
|
||||
* @type {ol.Coordinate}
|
||||
* @private
|
||||
*/
|
||||
this.layersPaneOffset_ = null;
|
||||
};
|
||||
goog.inherits(ol.renderer.dom.Map, ol.renderer.Map);
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
ol.renderer.dom.Map.prototype.createLayerRenderer = function(layer) {
|
||||
|
||||
if (layer instanceof ol.TileLayer) {
|
||||
|
||||
var layerPane = goog.dom.createElement(goog.dom.TagName.DIV);
|
||||
layerPane.className = 'ol-layer';
|
||||
layerPane.style.position = 'absolute';
|
||||
goog.dom.appendChild(this.layersPane_, layerPane);
|
||||
|
||||
var layerRenderer = new ol.renderer.dom.TileLayer(this, layer, layerPane);
|
||||
|
||||
this.layerPanes_[goog.getUid(layerRenderer)] = layerPane;
|
||||
|
||||
return layerRenderer;
|
||||
|
||||
} else {
|
||||
goog.asserts.assert(false);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
ol.renderer.dom.Map.prototype.handleCenterChanged = function() {
|
||||
goog.base(this, 'handleCenterChanged');
|
||||
var map = this.getMap();
|
||||
if (!map.isDef()) {
|
||||
return;
|
||||
}
|
||||
// FIXME: shiftLayersPane_ and resetLayersPane_ should be called
|
||||
// elsewhere as we may be frozen here
|
||||
if (goog.isDef(this.renderedCenter_)) {
|
||||
this.shiftLayersPane_();
|
||||
} else {
|
||||
this.resetLayersPane_();
|
||||
}
|
||||
map.render();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
ol.renderer.dom.Map.prototype.handleResolutionChanged = function() {
|
||||
goog.base(this, 'handleResolutionChanged');
|
||||
var map = this.getMap();
|
||||
if (!map.isDef()) {
|
||||
return;
|
||||
}
|
||||
// FIXME: resetLayersPane_ should be called
|
||||
// elsewhere as we may be frozen here
|
||||
this.resetLayersPane_();
|
||||
map.render();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Reset the layers pane to its initial position.
|
||||
* @private
|
||||
*/
|
||||
ol.renderer.dom.Map.prototype.resetLayersPane_ = function() {
|
||||
var offset = new ol.Coordinate(0, 0);
|
||||
goog.style.setPosition(this.layersPane_, offset);
|
||||
|
||||
this.layersPaneOffset_ = offset;
|
||||
this.renderedCenter_ = this.map.getCenter();
|
||||
|
||||
this.setOrigin_();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Set the origin for each layer renderer.
|
||||
* @private
|
||||
*/
|
||||
ol.renderer.dom.Map.prototype.setOrigin_ = function() {
|
||||
var center = this.map.getCenter();
|
||||
var resolution = this.map.getResolution();
|
||||
var targetSize = this.map.getSize();
|
||||
var targetWidth = targetSize.width;
|
||||
var targetHeight = targetSize.height;
|
||||
var origin = new ol.Coordinate(
|
||||
center.x - resolution * targetWidth / 2,
|
||||
center.y + resolution * targetHeight / 2);
|
||||
goog.object.forEach(this.layerRenderers, function(layerRenderer) {
|
||||
layerRenderer.setOrigin(origin);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Move the layers pane.
|
||||
* @private
|
||||
*/
|
||||
ol.renderer.dom.Map.prototype.shiftLayersPane_ = function() {
|
||||
var center = this.map.getCenter();
|
||||
var oldCenter = this.renderedCenter_;
|
||||
var resolution = this.map.getResolution();
|
||||
var dx = Math.round((oldCenter.x - center.x) / resolution);
|
||||
var dy = Math.round((center.y - oldCenter.y) / resolution);
|
||||
if (!(dx === 0 && dy === 0)) {
|
||||
var offset = this.layersPaneOffset_;
|
||||
offset.x += Math.round((oldCenter.x - center.x) / resolution);
|
||||
offset.y += Math.round((center.y - oldCenter.y) / resolution);
|
||||
goog.style.setPosition(this.layersPane_, offset);
|
||||
this.renderedCenter_ = center;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,148 @@
|
||||
goog.provide('ol.renderer.dom.TileLayer');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('ol.Coordinate');
|
||||
goog.require('ol.Extent');
|
||||
goog.require('ol.renderer.dom.Layer');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @extends {ol.renderer.dom.Layer}
|
||||
* @param {ol.renderer.Map} mapRenderer Map renderer.
|
||||
* @param {ol.TileLayer} tileLayer Tile layer.
|
||||
* @param {!Element} target Target.
|
||||
*/
|
||||
ol.renderer.dom.TileLayer = function(mapRenderer, tileLayer, target) {
|
||||
goog.base(this, mapRenderer, tileLayer, target);
|
||||
|
||||
/**
|
||||
* @type {Object}
|
||||
* @private
|
||||
*/
|
||||
this.renderedTiles_ = {};
|
||||
|
||||
/**
|
||||
* @type {number|undefined}
|
||||
* @private
|
||||
*/
|
||||
this.renderedMapResolution_ = undefined;
|
||||
};
|
||||
goog.inherits(ol.renderer.dom.TileLayer, ol.renderer.dom.Layer);
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
* @return {ol.TileLayer} Layer.
|
||||
*/
|
||||
ol.renderer.dom.TileLayer.prototype.getLayer = function() {
|
||||
return /** @type {ol.TileLayer} */ goog.base(this, 'getLayer');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the pixel offset between the tile origin and the container origin.
|
||||
* @private
|
||||
* @param {number} z Z.
|
||||
* @param {number} resolution Resolution.
|
||||
* @return {ol.Coordinate} Offset.
|
||||
*/
|
||||
ol.renderer.dom.TileLayer.prototype.getTileOffset_ = function(z, resolution) {
|
||||
var tileLayer = this.getLayer();
|
||||
var tileStore = tileLayer.getStore();
|
||||
var tileGrid = tileStore.getTileGrid();
|
||||
var tileOrigin = tileGrid.getOrigin(z);
|
||||
var offset = new ol.Coordinate(
|
||||
Math.round((this.origin.x - tileOrigin.x) / resolution),
|
||||
Math.round((tileOrigin.y - this.origin.y) / resolution));
|
||||
return offset;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get rid of tiles outside the rendered extent.
|
||||
* @private
|
||||
* @param {ol.TileBounds} tileBounds Tile bounds.
|
||||
* @param {number} z Z.
|
||||
*/
|
||||
ol.renderer.dom.TileLayer.prototype.removeInvisibleTiles_ = function(
|
||||
tileBounds, z) {
|
||||
var key, tileCoord, prune, tile;
|
||||
for (key in this.renderedTiles_) {
|
||||
tileCoord = ol.TileCoord.createFromString(key);
|
||||
prune = z !== tileCoord.z ||
|
||||
tileCoord.x < tileBounds.minX ||
|
||||
tileCoord.x > tileBounds.maxX ||
|
||||
tileCoord.y < tileBounds.minY ||
|
||||
tileCoord.y > tileBounds.maxY;
|
||||
if (prune) {
|
||||
tile = this.renderedTiles_[key];
|
||||
delete this.renderedTiles_[key];
|
||||
goog.dom.removeNode(tile.getImage(this));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @inheritDoc
|
||||
*/
|
||||
ol.renderer.dom.TileLayer.prototype.render = function() {
|
||||
|
||||
var map = this.getMap();
|
||||
if (!map.isDef()) {
|
||||
return;
|
||||
}
|
||||
var mapExtent = /** @type {!ol.Extent} */ map.getExtent();
|
||||
var mapResolution = /** @type {number} */ map.getResolution();
|
||||
|
||||
var tileLayer = this.getLayer();
|
||||
var tileStore = tileLayer.getStore();
|
||||
var tileGrid = tileStore.getTileGrid();
|
||||
|
||||
if (mapResolution != this.renderedMapResolution_) {
|
||||
this.renderedTiles_ = {};
|
||||
goog.dom.removeChildren(this.target);
|
||||
}
|
||||
|
||||
// z represents the "best" resolution
|
||||
var z = tileGrid.getZForResolution(mapResolution);
|
||||
|
||||
var tileBounds =
|
||||
tileGrid.getTileBoundsForExtentAndResolution(mapExtent, mapResolution);
|
||||
var tileOffset = this.getTileOffset_(z, mapResolution);
|
||||
|
||||
var fragment = document.createDocumentFragment();
|
||||
|
||||
var key, tile, pixelBounds, img, newTiles = false;
|
||||
tileBounds.forEachTileCoord(z, function(tileCoord) {
|
||||
key = tileCoord.toString();
|
||||
tile = this.renderedTiles_[key];
|
||||
if (!goog.isDef(tile)) {
|
||||
tile = tileStore.getTile(tileCoord);
|
||||
if (goog.isNull(tile)) {
|
||||
} else {
|
||||
tile.load();
|
||||
this.renderedTiles_[key] = tile;
|
||||
pixelBounds = tileGrid.getPixelBoundsForTileCoordAndResolution(
|
||||
tileCoord, mapResolution);
|
||||
img = tile.getImage(this);
|
||||
img.style.position = 'absolute';
|
||||
img.style.left = (pixelBounds.minX - tileOffset.x) + 'px';
|
||||
img.style.top = (-pixelBounds.maxY - tileOffset.y) + 'px';
|
||||
img.style.width = pixelBounds.getWidth() + 'px';
|
||||
img.style.height = pixelBounds.getHeight() + 'px';
|
||||
goog.dom.appendChild(fragment, img);
|
||||
newTiles = true;
|
||||
}
|
||||
}
|
||||
}, this);
|
||||
|
||||
if (newTiles) {
|
||||
goog.dom.appendChild(this.target, fragment);
|
||||
}
|
||||
|
||||
this.removeInvisibleTiles_(tileBounds, z);
|
||||
this.renderedMapResolution_ = mapResolution;
|
||||
};
|
||||
Reference in New Issue
Block a user