javascript - Leaflet.js Canvas 点击索引无法按预期工作

Question

我正在尝试使用 Leaflet.js 以及简单的 CRS 和 Canvas 元素在虚拟曲棍球场顶部绘制 5000 个正方形。

为了获得灵感和入门，我研究了 http://build-failed.blogspot.nl/2012/04/maps-and-boardgames-part-3-client-side.html 的源代码，但这适用于六边形，而我想要正方形。

经过一番黑客攻击后，我最终在曲棍球场顶部得到了一个正方形网格。

但是，点击方 block 并不能按预期工作。

网格生成代码如下所示:

for (var i = 0; i < columns; i++) {
    for (var j = 0; j < rows; j++) {
        var square = createSquare(s, i, j);
        squares.push(square);
        squaresIndexed['' + i + ',' + j] = square;
    }
}

squaresIndexed 数组保存所有方 block 的副本，并用于稍后在 Leaflet 的点击处理程序中进行交互:

    map.on('click', function(e) {
        var offset = projections.LatLongToPixelXY_optimized(startlat, startLon, levelOfDetail);
        var result = projections.LatLongToPixelXY_optimized(e.latlng.lat, e.latlng.lng, levelOfDetail);

        result.x = result.x - offset.x +200;
        result.y = result.y - offset.y +200;

        s = new squareDefinition();
        var uv = s.getReferencePoint(result.x, result.y);
        var square = squaresIndexed['' + uv.u + ',' + uv.v];

        console.log('square', square);
        L.marker([square.center.lat, square.center.lng]).addTo(map);
        selectedSquare = new L.Polygon(square.coordinates);
        map.addLayer(selectedSquare);
    });

通过使用 squareDefiniton.getPixelCoordinates() 的“反向”(即 squareDefinition.getReferencePoint())从 squareIndexed 数组中“获取”正方形

在我看来，这似乎是错误的地方。我怀疑这与“偏移”关闭有关，但我不知道如何纠正它。

要查看它的效果，请查看我编写的 jsfiddle，然后最大程度地缩小。然后单击该字段并查看最左侧显示的选择:http://jsfiddle.net/gnijholt/wzennher/2/

如上所述，这段代码正处于快速而肮脏的黑客攻击过程中，对于任何丑陋或愚蠢之处，我们深表歉意。

非常感谢任何敢于调查此事的人!

Answer 1

好吧，经过一番重新思考，我发现由于它使用的是 CRS.simple，所以所有纬度/经度的内容都应该被删除。现在它有点起作用了。如果有兴趣我可以更新 fiddle 。