Question

我尝试使用带有简单CRS和Canvas元素的Leaflet.js在虚拟曲棍球场上绘制5000个方格。

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

经过一番黑客攻击后，我最终在曲棍球场顶上放了一块方格。

然而，点击正方形并不按预期工作。

网格生成代码如下所示：

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数组包含所有正方形的副本，稍后将在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);
    });

正方形被取出＆＃39;通过使用＆＃39;反向＆＃39;从squareIndexed数组返回squareDefiniton.getPixelCoordinates（）是squareDefinition.getReferencePoint（）

在我看来，这似乎是出错的地方。我怀疑它与“偏移”有关。关闭，我无法弄清楚如何纠正它。

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

如上所述，此代码正处于快速和肮脏的黑客攻击过程中，对于任何丑陋或愚蠢都感到抱歉。

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

Answer 1

好好重新思考后，我发现由于它使用的是CRS.simple，所以应删除所有lat / lon内容。现在它有点工作。如果有兴趣，我可以更新小提琴。

Leaflet.js Canvas点击索引并没有按预期工作

1 个答案: