javascript - 如何设置传单中的图像偏移？

Question

是否可以使用传单根据偏移量移动图 block 层

问题是我使用 OSM 数据在 map 上显示标记和建筑轮廓，但由于我使用另一个图 block 提供程序，OSM 数据与卫星图像不同步

有没有一种简单的方法可以在传单中添加偏移量？

附上 openstreetmap 的 iD 编辑器的屏幕截图:

https://youtu.be/IRLyMKVERvo

Answer 1

Is it possible to use leaflet to move tile layer based on a offset?

Yes .

Is there a simple way of adding offset in leaflet?

No .

---

有多种方法可以偏移 Leaflet L.TileLayer，但它们并不简单。我建议阅读 extending Leaflet classes并在执行此类任务之前阅读 Leaflet 的源代码。

一种方法是使用 decorator pattern计算图 block CSS 偏移量的特定代码位，即 the internal _getTilePos() method of L.GridLayer :

_getTilePos: function (coords) {
    return coords.scaleBy(this.getTileSize()).subtract(this._level.origin);
},

该内部方法接受图 block 坐标，并返回相对于Leaflet所谓的原始像素的像素坐标。这些概念是documented .

因此，我可以通过子类化 L.TileLayer 并使用 _getTilePos 的新实现创建一个新类来创建装饰器(但重用父类的实现)，例如

var OffsetTileLayer = L.TileLayer.extend({
    _getTilePos: function (coords) {
        var pos = L.TileLayer.prototype._getTilePos.call(this, coords);
        return pos.add([25, 25]);
    },
});

var offsetTileLayer = new OffsetTileLayer(/* etc */);
offsetTileLayer.addTo(map);

查看working example .

这将使图 block 的 CSS 位置(由 L.Point 的实例表示)偏移 25 个水平和垂直像素。注意偏移量是CSS像素； 不是米，不是纬度/经度。

可以使该偏移量取决于图 block 坐标(可以从中导出纬度、经度和比例)，但我怀疑如果涉及大地测量计算，则会出现伪影(例如图 block 之间的间隙) (即如何根据图 block 坐标计算米)没有仔细完成。