Zoomable室内地图Witth Canvas Overlay LeafletJS

时间:2016-01-09 19:41:24

标签: leaflet

我一直在尝试实施可缩放的室内地图(非常类似于您使用LeafletJS看到的一些座位图)。 我已经能够使用maptiler拍摄室内地图并使用maptiler创建地图图块,如本文中所述:http://build-failed.blogspot.com/2012/11/zoomable-image-with-leaflet.html

现在我有了瓷砖,我想创建Canvas多边形,在这些瓷砖上定义各种热点。有没有办法做到这一点?我在这里看到一个例子:http://bl.ocks.org/Sumbera/11114288允许你在传单地图上创建画布,但我不知道如何拍摄Canvas多边形(或任何这样的几何体)并将其放在地图上,因为这些不是纬度/长期定向。这些例子中的许多都显示了在地图上绘制的几何图形,这意味着您或多或少知道纬度/经度,但是我构建地图的这些图像根本不是基于地理位置的。

我有办法做到这一点吗?会喜欢一些想法!

谢谢!

1 个答案:

答案 0 :(得分:2)

如果我理解正确,您会对如何确定要在画布中绘制的要素的坐标感到困惑,以便它们与地图图块匹配?而且你特别害怕你必须发明"一些lat / lng坐标?

您可能应该考虑在实例化时在地图选项中使用L.CRS.Simple,这样坐标现在就是#34;平坦的"。

  

一种简单的CRS,可将经度和纬度直接映射到xy。可用于平面地图(例如游戏地图)。请注意,y轴仍应倒置(从下到上)。

您甚至可以自定义该CRS,以使xy坐标与您的室内地图完整分辨率相匹配(请参阅Leaflet custom coordinates on image)。

然后坐标不再是"基于地理的",而是基于您的图像坐标(可能是垂直轴,底部为0,顶部为最大值)。