Javascript SVG图像的OpenLayers

对于我的网页，我想要一个图像，我可以通过类似谷歌地图的拖动事件和滚动事件来导航。我没有亲自实现它，而是尝试用OpenLayers实现它，在OpenLayers中，我想使用这个图像而不是地图。我已经阅读了stackoverflow中的其他示例，但我仍在努力理解如何将图像作为第一层传递。 目前，我尝试执行以下操作：

testOL(content: string) {
// content is the svg as string
this.map = new Map({
  target: 'imageArea',
  layers: [
    new Image({
      source: new ImageStatic({
        src: content,
      })
    })
  ] ,view : new View({
    center: [0,0],
    zoom: 1
  }) 
})
}

目标只是一个没有任何内容的div

我已经尝试过将url作为图像源传递给svg，并且尝试过在地图中添加投影和视图，但都没有成功。

---

如果有人能帮我解决这个问题，我会很高兴的

src

不是正确的选项名称，它应该是

url

，它的值应该是数据url

ImageStatic

还要求在投影坐标中指定

imageExtent

html，body，.map{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
常量内容=
'' +
'' +
'  ' +
'    ' +
'      ' +
“图像/svg+xml”+
'        ' +
'        ' +
'      ' +
'    ' +
'  ' +
'  ' +
'  ' +
'  ' +
'    ' +
'  ' +
''
常量映射=新ol.map({
目标：“图像区域”，
图层：[
新ol.layer.Image({
来源：new ol.source.ImageStatic({
url:'data:image/svg+xml'，+encodeURIComponent（内容），
imageExtent:[0,0,5e6,5e6]，
})
})
]，视图：新建ol.view({
中间：[0,0]，
缩放：1，
}) 
});

src应该是一个url。尝试将内容作为数据url传递

src:'data:image/svg+xml'，+encodeURIComponent（content）

谢谢，现在可以了！不幸的是，我需要svg文件来保持它的功能，比如点击链接，我认为这在静态图像中是不可能的。也许您知道，使用OpenLayers是否还有另一种可能实现这一点。尽管如此，我还是会将这个问题标记为已接受，因为它解决了上述问题。您需要一个自定义的层渲染函数，如中所述，将该方法与覆盖范围较小的SVG一起使用，请参见