将Raphael js集成到OpenLayers 3中

Question

我需要将 Raphael js svg 整合到 OpenLayers3地图中。但插入的svg需要更改大小然后用户在地图中更改比例。 感谢。

Answer 1

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

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