将 Raphael js 集成到 OpenLayers 3答案

【问题标题】：Integrate Raphael js to OpenLayers 3将 Raphael js 集成到 OpenLayers 3
【发布时间】：2015-03-26 13:01:41
【问题描述】：

我需要将 Raphael js svg 集成到 OpenLayers3 地图。但是插入的 svg 需要更改大小，然后用户更改地图中的比例。谢谢。

【问题讨论】：

您采用了哪种方法来集成 SVG？ ol.source.ImageStatic? ol.source.ImageCanvas?如果您想回答这个问题，您需要提供更多上下文。最好是工作代码 sn-p。
需要 Raphael 库在地图（在新图层中）动态绘制 svg 图像，并具有拦截事件（点击、拖放、击键）的能力。总之，raphael 的对象如果直接在 openlayers 中创建，则必须重复行为层 svg。我通过 ol3 决定了这项任务，但不幸的是 ol3 通过绘制 svg 的机会限制了我。我必须知道如何创建 OL3 svg 图层并将 Raphael 传递给它。之后，可能会由 raphael 重新绘制 svg 图像。

【解决方案1】：

目前在 OpenLayers 3 层中使用 SVG 的唯一方法是使用内容类型为 image/svg+xml 的图像元素。这可以通过ol.source.ImageStatic 直接使用，也可以通过使用CanvasContext2D#drawImage() 和ol.source.ImageCanvas 手动创建画布并将SVG 图像添加到其中。在这两种情况下，您都无法访问 SVG 的 DOM，并且会丢失 SVG 内部的任何动画或交互性。此外，要创建该图像元素，您需要对序列化的 SVG 文档进行 base64 编码，并在更改 SVG 时创建一个数据 URI。我想这不是你要找的。p>

另一种方法是使用ol.Overlay。这会将您的 SVG 锚定到地图上的坐标。您必须手动缩放和旋转 SVG 以匹配地图视图的分辨率和旋转（不应该太难），但您可以与 SVG 的 DOM 完全交互。

【讨论】：

@ahocevar。您能否提供一个关于将 svg 图形添加到 openlayers 的最高效方式的工作示例？也许使用较新的版本可以更轻松地完成？我目前正在为此苦苦挣扎，似乎有很多关于这个问题的悬而未决的问题..