html - 传单JS : How to flip tiles vertically on-the-fly?

Question

背景: 我制作了 Mandelbrot Set 的 1 太像素渲染图我正在使用 LeafletJS以交互方式在其中缩放和平移。它很好用。但由于 Mandelbrot 集沿实轴对称，我目前使用的平铺图像数量是必要的两倍。

问题: 我怎样才能挂接到 LeafletJS 的显示时间代码(使用一些回调？)，以便每当通过 HTTP 加载图 block 时，它要么不变地通过，要么垂直翻转？这将使我能够在更高的缩放级别上将数据减少数十 GB。

示例:这是缩放级别 1 中的四个图 block (此处显示为以一个像素分隔)。我想扔掉底部的两个图 block 图像并将它们加载为顶部两个图 block 的垂直翻转版本。这可以用 LeafletJS 即时完成吗？

更具体地说:如果我知道缩放级别 z 和图 block 坐标 x、y，我想垂直翻转图 block 当 y 小于 2^(z–1) 时加载时间。例如，在缩放级别 z=10 时，我想垂直翻转所有 y < 512 的图 block 。

我想答案将涉及设置 transform 之类的事情, -moz-transform , -o-transform , 和 -webkit-transform <img> 的属性标记为 scaleY(-1)也许filter和 -ms-filter至 FlipV ，但我不知道在哪里/如何在 LeafletJS 上下文中定义它们。

Answer 1

您只需要修改 L.TileLayer._loadTile method 中底部图 block 的 y 数量| , 在它应用到图像 URL 之前。

至于翻转图像本身，不幸的是我们不能使用类，因为 Leaflet 已经将 transform 属性直接应用于图 block (图像)，因此它会覆盖任何 transform 在类里面。然后我们必须在 tile.style 上附加任何transform、-moz-transform 等。

L.HalfTileLayer = L.TileLayer.extend({
    _loadTile: function (tile, tilePoint) {

        tile._layer  = this;
        tile.onload  = this._tileOnLoad;
        tile.onerror = this._tileOnError;

        this._adjustTilePoint(tilePoint);

        //////////////////
        var limit = Math.pow(2, tilePoint.z - 1),
            y = tilePoint.y;

        if (y >= limit) { // modify for bottom tiles, i.e. higher y
            tilePoint.y = 2 * limit - y - 1; // y starts at 0
            tile.style.transform += " scaleY(-1)"; // append
            // apply more transforms for cross-browser
        }
        /////////////////

        tile.src     = this.getTileUrl(tilePoint);

        this.fire('tileloadstart', {
            tile: tile,
            url: tile.src
        });
    }
});

(new L.HalfTileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')).addTo(map);

演示:http://jsfiddle.net/ve2huzxw/73/

请注意，在默认配置中，y = 0 是顶部，y = 2^z - 1 是底部。