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

Question

如何重现

• 我正在使用的传单版本：传单 1.0.0
• 我正在使用的浏览器（带版本）：chrome 61
• 我正在使用的操作系统/平台（有版本）：Windows 7
• 第一步： 在 Google Chrome 浏览器中打开 example
• 第二步： 放大地图

我期待什么行为以及我看到什么行为

问题描述： 我从“L.TileLayer”继承并修改“createTile”方法以使用画布元素创建每个图块。 在“createTile”方法中，我发送一个 ajax 来获取每个图块的数据，这是一个 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

地图方法 'latLngToLayerPoint' 使用当前地图缩放，但在 'createTile' 方法中，它使用旧地图。