ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add support for scaling/translating transforms in IE 7-8

Browse Source 
Adds support for the IE-specific Matrix filter and adds fixes
that enable IE 7-8 to render transformations without distortion
This commit is contained in:
Austin Hyde
2014-01-24 10:20:08 -05:00
parent d891670950
commit e16de6f8af
2 changed files with 101 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/ol/renderer/dom/domtilelayerrenderer.js
View File

@@ -17,6 +17,7 @@ goog.require('ol.TileRange');
goog.require('ol.TileState');
goog.require('ol.ViewHint');
goog.require('ol.dom');
goog.require('ol.dom.BrowserFeature');
goog.require('ol.extent');
goog.require('ol.layer.Tile');
goog.require('ol.renderer.dom.Layer');
@@ -37,6 +38,12 @@ ol.renderer.dom.TileLayer = function(mapRenderer, tileLayer) {
var target = goog.dom.createElement(goog.dom.TagName.DIV);
target.style.position = 'absolute';
// Needed for IE7-8 to render a transformed element correctly
if (ol.dom.BrowserFeature.USE_MS_MATRIX_TRANSFORM) {
target.style.width = '100%';
target.style.height = '100%';
}
goog.base(this, mapRenderer, tileLayer, target);
/**
@@ -261,6 +268,21 @@ ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) {
*/
this.target = goog.dom.createElement(goog.dom.TagName.DIV);
this.target.style.position = 'absolute';
this.target.style.width = '100%';
this.target.style.height = '100%';
/**
* Needed due to issues with IE7-8 clipping of transformed elements
* Solution is to translate separately from the scaled/rotated elements
* @private
* @type {!Element}
*/
this.translateTarget_ = goog.dom.createElement(goog.dom.TagName.DIV);
this.translateTarget_.style.position = 'absolute';
this.translateTarget_.style.width = '100%';
this.translateTarget_.style.height = '100%';
goog.dom.appendChild(this.target, this.translateTarget_);
/**
* @private
@@ -364,7 +386,7 @@ ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile, tileGutter) {
*/
ol.renderer.dom.TileLayerZ_.prototype.finalizeAddTiles = function() {
if (!goog.isNull(this.documentFragment_)) {
goog.dom.appendChild(this.target, this.documentFragment_);
goog.dom.appendChild(this.translateTarget_, this.documentFragment_);
this.documentFragment_ = null;
}
};
@@ -418,7 +440,7 @@ ol.renderer.dom.TileLayerZ_.prototype.removeTilesOutsideExtent =
*/
ol.renderer.dom.TileLayerZ_.prototype.setTransform = function(transform) {
if (!ol.vec.Mat4.equals2D(transform, this.transform_)) {
ol.dom.transformElement2D(this.target, transform, 6);
ol.dom.transformElement2D(this.target, transform, 6, this.translateTarget_);
goog.vec.Mat4.setFromArray(this.transform_, transform);
}
};