LeafletJS：如何在飞行中垂直翻转瓷砖？

Question

背景 我已经制作了Mandelbrot Set的1-terapixel渲染，并使用LeafletJS以交互方式缩放和平移。它很棒。但由于Mandelbrot Set沿实轴对称，我目前使用的瓷砖图像数量是必要的两倍。

问题：如何挂钩LeafletJS的显示时间代码（使用一些回调？），这样无论何时通过HTTP加载图块，它都会不变地传递或被翻转垂直？这将允许我在更高的缩放级别上将数据减少数十GB。

示例：以下是缩放级别1的四个图块（此处显示为一个像素）。我想扔掉底部的两个平铺图像，然后将它们作为顶部两个平铺的垂直翻转版本加载。这可以与LeafletJS一起动态完成吗？

更具体地说：如果我知道缩放级别 z 并且拼贴坐标 x ， y ，我想要翻转拼贴当 y 小于2 ^（ z -1）时，在加载时垂直。例如，在缩放级别 z = 10时，我希望垂直翻转所有 y ＆lt; 512。

我想答案会涉及将transform标记的-moz-transform，-o-transform，-webkit-transform和<img>属性设置为{ {1}}，可能是scaleY(-1)和filter到-ms-filter，但我不知道在LeafletJS上下文中在何处/如何定义这些内容。

Answer 1

在图像网址上应用之前，您只需修改L.TileLayer._loadTile method中y个底部图块的数量。

至于翻转图像本身，遗憾的是我们不能使用类，因为Leaflet已经直接在tile（图像）上应用了transform属性，因此它会覆盖类中的任何transform。然后，我们必须在transform上追加任何-moz-transform，tile.style等。

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是底部。