4

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

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

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

缩放 1 级图块

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

我想答案将涉及将标签的transform, -moz-transform,-o-transform和-webkit-transform属性设置为, 可能和to , 但我不知道在 LeafletJS 上下文中在哪里/如何定义这些。<img>scaleY(-1)filter-ms-filterFlipV

4

1 回答 1

2

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

至于翻转图像本身，不幸的是我们不能使用类，因为transformLeaflet 已经直接在图块（图像）上应用了一个属性，因此它会覆盖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 是底部。

于 2015-12-01T08:40:23.607 回答