Switch back to integer transforms for the html tile layer.

Also, use integer transforms for the svg tile layer where appropriate. Only compare the positions of the top-most level, as lower levels are increasingly offset.
OpenGeoscience · Jun 3, 2016 · 6946f8b · 6946f8b
1 parent 8d04f19
commit 6946f8b
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git a/src/d3/d3Renderer.js b/src/d3/d3Renderer.js
@@ -222,6 +222,10 @@ var d3Renderer = function (arg) {
     dy = scale * ry + center.y;
 
     // set the group transform property
+    if (!rotation) {
+      dx = parseInt(dx, 10);
+      dy = parseInt(dy, 10);
+    }
     var transform = 'matrix(' + [scale, 0, 0, scale, dx, dy].join() + ')';
     if (rotation) {
       transform += ' rotate(' + [

diff --git a/src/d3/quadFeature.js b/src/d3/quadFeature.js
@@ -111,7 +111,8 @@ var d3_quadFeature = function (arg) {
         stroke: false,
         transform: function (d) {
           if (d.type === 'img' && d.quad.image && !d.svgTransform) {
-            var pos = [], area, maxarea = -1, maxv, i;
+            var pos = [], area, maxarea = -1, maxv, i, imgscale,
+                imgw = d.quad.image.width, imgh = d.quad.image.height;
             for (i = 0; i < d.quad.pos.length; i += 3) {
               var p = {
                 x: d.quad.pos[i],
@@ -149,6 +150,13 @@ var d3_quadFeature = function (arg) {
               maxv === 2 ? pos[3].x + pos[0].x - pos[1].x : pos[2].x,
               maxv === 2 ? pos[3].y + pos[0].y - pos[1].y : pos[2].y
             ];
+            if (Math.abs(d.svgTransform[1] / imgw) < 1e-6 &&
+                Math.abs(d.svgTransform[2] / imgh) < 1e-6) {
+              imgscale = d.svgTransform[0] / imgw;
+              d.svgTransform[4] = parseInt(d.svgTransform[4] / imgscale) * imgscale;
+              imgscale = d.svgTransform[3] / imgh;
+              d.svgTransform[5] = parseInt(d.svgTransform[5] / imgscale) * imgscale;
+            }
           }
           return ((d.type !== 'img' || !d.quad.image) ? undefined :
                   'matrix(' + d.svgTransform.join(' ') + ')');

diff --git a/src/tileLayer.js b/src/tileLayer.js
@@ -728,8 +728,8 @@ module.exports = (function () {
       container.append(tile.image);
       container.css({
         position: 'absolute',
-        left: (bounds.left - parseFloat(div.attr('offsetx') || 0)) + 'px',
-        top: (bounds.top - parseFloat(div.attr('offsety') || 0)) + 'px'
+        left: (bounds.left - parseInt(div.attr('offsetx') || 0, 10)) + 'px',
+        top: (bounds.top - parseInt(div.attr('offsety') || 0, 10)) + 'px'
       });
 
       // apply fade in animation
@@ -964,8 +964,8 @@ module.exports = (function () {
     this._updateSubLayers = function (level, view) {
       var canvas = this.canvas(),
           lastlevel = parseInt(canvas.attr('lastlevel'), 10),
-          lastx = parseFloat(canvas.attr('lastoffsetx') || 0),
-          lasty = parseFloat(canvas.attr('lastoffsety') || 0);
+          lastx = parseInt(canvas.attr('lastoffsetx') || 0, 10),
+          lasty = parseInt(canvas.attr('lastoffsety') || 0, 10);
       if (lastlevel === level && Math.abs(lastx - view.left) < 65536 &&
           Math.abs(lasty - view.top) < 65536) {
         return {x: lastx, y: lasty};
@@ -981,15 +981,15 @@ module.exports = (function () {
           'transform',
           'scale(' + Math.pow(2, level - layer) + ')'
         );
-        var layerx = parseFloat(x / Math.pow(2, level - layer)),
-            layery = parseFloat(y / Math.pow(2, level - layer)),
-            dx = layerx - parseFloat($el.attr('offsetx') || 0),
-            dy = layery - parseFloat($el.attr('offsety') || 0);
+        var layerx = parseInt(x / Math.pow(2, level - layer), 10),
+            layery = parseInt(y / Math.pow(2, level - layer), 10),
+            dx = layerx - parseInt($el.attr('offsetx') || 0, 10),
+            dy = layery - parseInt($el.attr('offsety') || 0, 10);
         $el.attr({offsetx: layerx, offsety: layery});
         $el.find('.geo-tile-container').each(function (tileidx, tileel) {
           $(tileel).css({
-            left: (parseFloat($(tileel).css('left')) - dx) + 'px',
-            top: (parseFloat($(tileel).css('top')) - dy) + 'px'
+            left: (parseInt($(tileel).css('left'), 10) - dx) + 'px',
+            top: (parseInt($(tileel).css('top'), 10) - dy) + 'px'
           });
         });
       });

diff --git a/tests/cases/osmLayer.js b/tests/cases/osmLayer.js
@@ -266,9 +266,12 @@ describe('geo.core.osmLayer', function () {
         it('compare tile offsets at angle ' + angle, function () {
           $.each($('image[reference]'), function () {
             var ref = $(this).attr('reference');
-            var offset = $(this)[0].getBoundingClientRect();
-            /* Allow around 1 pixel of difference */
-            expect(closeToEqual(offset, positions[ref], -0.4)).toBe(true);
+            /* Only check the top level */
+            if (ref.indexOf('4_') === 0) {
+              var offset = $(this)[0].getBoundingClientRect();
+              /* Allow around 1 pixel of difference */
+              expect(closeToEqual(offset, positions[ref], -0.4)).toBe(true);
+            }
           });
         });
         it('destroy', destroy_map);