如何将地理参考 SVG 放置在 openlayers 地图上（不是图像）
How can I place a geo-referenced SVG over an openlayers map (not as image)
如何在 openlayers 地图上放置一个复杂的 SVG 图像（具有 css 样式！）地理参考，以便文档的 CSS 样式用于渲染 SVG。
常规 ImageLayer 可以很好地将地图上的地理参考 svg 显示为图像。但是因为是图片，文档的CSS对渲染后的SVG没有影响
另一方面，SVG Layer example 将 SVG 放入 DOM 并使其对文档的 CSS 做出反应，并在您更改 CSS 时做出反应。但它总是将 SVG 映射到整个星球，并且似乎隐藏了我放置在其下的任何图层。
为了让您了解用例：我们有一个外部生成的 SVG，其中有几个 'groups or layers' 代表基础设施的不同方面。这个 svg 必须正确地放在地图上（就像我们可以用图像层做的那样），但我们希望能够有选择地 show/hide SVG 中 的不同 'groups or layers' .
我想最终我们需要在 SVG 层示例中实现类似于 ol/layer/Image/ImageLayer 的东西。
非常欢迎任何关于如何解决这个问题的建议，但工作代码也可以;-)
在示例中，图像宽度为 360 度，中心位于 [0, 0]。对于较小的范围，您需要使用适当的宽度并调整变换中使用的中心 https://codesandbox.io/s/lucid-poitras-i1qyb?file=/main.js 使用不透明度设置以避免完全隐藏基础层。
如何在 openlayers 地图上放置一个复杂的 SVG 图像（具有 css 样式！）地理参考，以便文档的 CSS 样式用于渲染 SVG。
常规 ImageLayer 可以很好地将地图上的地理参考 svg 显示为图像。但是因为是图片，文档的CSS对渲染后的SVG没有影响
另一方面，SVG Layer example 将 SVG 放入 DOM 并使其对文档的 CSS 做出反应，并在您更改 CSS 时做出反应。但它总是将 SVG 映射到整个星球，并且似乎隐藏了我放置在其下的任何图层。
为了让您了解用例：我们有一个外部生成的 SVG，其中有几个 'groups or layers' 代表基础设施的不同方面。这个 svg 必须正确地放在地图上（就像我们可以用图像层做的那样），但我们希望能够有选择地 show/hide SVG 中 的不同 'groups or layers' .
我想最终我们需要在 SVG 层示例中实现类似于 ol/layer/Image/ImageLayer 的东西。
非常欢迎任何关于如何解决这个问题的建议，但工作代码也可以;-)
在示例中，图像宽度为 360 度，中心位于 [0, 0]。对于较小的范围，您需要使用适当的宽度并调整变换中使用的中心 https://codesandbox.io/s/lucid-poitras-i1qyb?file=/main.js 使用不透明度设置以避免完全隐藏基础层。