那里有一个很好的开源谷歌地图样式<canvas>图像组件吗？</canvas>

Question

我需要一个基于HTML5 <canvas>的组件，的行为与Google地图非常相似。

注意 - 澄清一下，我不是在寻找地图组件，而是像Google地图那样寻找行为的通用图像缩放/注释组件！​​

需要执行以下操作：

• 画一幅图像
• 在特定坐标处的图像上绘制一些形状
• 对图像进行平滑的缩放缩放，理想情况下放大屏幕上夹点中心的位置
• 放大时图像可以拖动，因此您可以更改视口正在查看的图像区域
• 在图像的缩放部分重绘相同坐标的形状，因此无论缩放级别如何，它们都保持相同的大小

我想到了如何实现这一目标，并决定我可能会做以下事情：

• 使用jGestures或Hammer.js或Sencha Touch等库来检测捏合和拖动手势
• 使用context.drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh)功能根据拖拽事件实现图像缩放和定位
• 跟踪缩放级别和视口位置，以便每次拖动/缩放时，可以在图像上的正确坐标处重新绘制形状
• 也许使用带有setTimeout（）的循环来平滑地放大/拖动动画而不是一次性

然而，我很快意识到，即使使用库来处理触摸手势，从头开始编写也会非常复杂。

我开始使用谷歌搜索这个组件的开源实现，但我找到的少数没有完整的功能集，似乎支持良好或有良好的评论。

我发现很难相信像这样的组件的良好开源实现并不存在。这是移动网络应用程序中的一个常见要求，并且已经有几个关于如何实现类似内容的SO问题 - 虽然这些问题大部分来自不久之前，所以现在可能还存在某些问题呢？

有人能指出我正确的方向吗？

Answer 1

我已经听到有关好的事情：http://www.openlayers.org/并且看到了正在使用的结果（Intranet项目，没有公开 - 抱歉）。但是，我自己没有用过它。