LeafletJS：如何即时垂直翻转瓷砖？

Question

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

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

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

更具体地说：如果我知道缩放级别 z 和平铺坐标 x,y ，只要 y 小于 2^(z–1)，我想在加载时垂直翻转磁贴。例如，在缩放级别 z=10，我想垂直翻转所有 y < 512 的图块。

我想答案会涉及设置 transform、-moz-transform、-o-transform 和 -webkit-transform 标签的 <img> 属性到 scaleY(-1)，也许 filter 和 -ms-filter 到 FlipV，但我不知道 where/how 在 LeafletJS 上下文中定义它们。

Answer 1

您只需要在 L.TileLayer._loadTile method 中修改 y 底部图块的数量，然后再将其应用于图像 URL。

至于翻转图像本身，不幸的是我们不能使用 classes 因为 transform 属性已经被 Leaflet 直接应用在图块（图像）上，所以它覆盖了class 中的任何 transform。然后我们必须 append 任何 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 是底部。

LeafletJS：如何即时垂直翻转瓷砖？

LeafletJS: How to flip tiles vertically on-the-fly?

html

css

leaflet

mandelbrot

symmetry