无法通过传单网格画布层中的“latLngToLayerPoint”获得正确的点位置

Question

如何重现

• 我正在使用的宣传单版本：宣传单1.0.0
• 浏览器（带版本）我正在使用：chrome 61
• 我正在使用的OS /平台（带有版本）：Windows 7
• 第1步： 在Google Chrome浏览器中打开example
• 第2步： 缩放地图

我期待的行为和我正在看的行为

问题描述： 我继承自'L.TileLayer'并修改方法'createTile'以使用canvas元素创建每个tile。 在'createTile'方法中，我发送一个ajax来获取每个tile的数据，这是latlngs的集合。 在ajax回调中，我获取数据并转换画布的原点。 最后，我使用'latLngToLayerPoint'来转换latlng并在画布中绘制它。

预期行为 我希望看到这一点是在画布上绘制的，它的位置是正确的。

实际行为 我缩放地图，它的位置有偏移。

重现问题的最小例子

http://playground-leaflet.rhcloud.com/puguy/embed?html,css,js,output

// custom tile layer (asynchronous)
var ShipCanvasTileLayer = L.TileLayer.extend({
    createTile: function (coords, done) {
        var tile = L.DomUtil.create('canvas', 'leaflet-tile');
        var size = this.getTileSize();
        tile.width = size.x;
        tile.height = size.y;

        // get tile latlngBounds
        var tilebounds = this._tileCoordsToBounds(coords);
        var topleft = this._map.latLngToLayerPoint(tilebounds.getNorthWest());
        console.log('coords:[' + coords.x + ',' + coords.y + ',' + coords.z + ']');
        console.log('topleft:[' + topleft.x + ',' + topleft.y + ']');

        // send ajax (This is a test.In fact, I want to get data by each tile's latlngbounds! )
        $.getJSON('./data/test.json', function () {
            var ctx = tile.getContext('2d');
            ctx.clearRect(0, 0, tile.width, tile.height);
            ctx.save();
            ctx.font = 'normal 36px Verdana';
            ctx.fillStyle = "#F00";
            ctx.fillText(coords.x + ',' + coords.y + ',' + coords.z, 250, 250);
            ctx.strokeRect(0, 0, 512, 512);
            // translate the origin point
            ctx.translate(-topleft.x, -topleft.y);
            var test_latlng = L.latLng(39, 116);
            if(tilebounds.contains(test_latlng)) {
                L.marker(test_latlng).addTo(this._map);
                var point = this._map.latLngToLayerPoint(test_latlng);
                console.log('layerPoint:['+ point.x + ',' + point.y + ']');
                ctx.arc(point.x, point.y, 6, 0, Math.PI*2);
                ctx.fill();
            }
            ctx.restore();
            done(null, tile);
        }.bind(this));
        return tile;
    }
});
// add layer
new ShipCanvasTileLayer('', { tileSize: 512 }).addTo(map);

Answer 1

也许我遇见This Problem

地图方法＆＃39; latLngToLayerPoint＆＃39;使用当前地图缩放，但在＆＃39; createTile＆＃39;方法，它使用旧的。