javascript - 如何将 SVG 代码包含到 Leaflet.js 中？

Question

我有一个自定义的 SVG 代码，里面有层。

到目前为止，它在网页中工作，我可以使用显示/隐藏 jQuery 函数进行操作，现在我想与 Leaflet 集成。

我已阅读 Leafletjs.com 上的教程和文档。 我在那里看到的所有示例都与集成图像或 OpenStreets map 等的某些链接有关。

首先我试过这样的例子:

  <script>

  // initialize the map
    var map = L.map('map-test').setView([42.35, -71.08], 13);

  // load a tile layer
  L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
    {
      attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);

</script>

这工作正常，它显示了 map ，我可以放大和缩小，查看其他对象，但从源代码我可以看到它显示为具有某些逻辑的单独图像。

我想将我的自定义 SVG 代码与里面的所有层集成，这样我就可以使用 Leaflet 进行拖动、缩放和所有其他好的功能。

这个网站正是我想要做的: https://winter.intermaps.com/oetztal?lang=en

从源代码中您可以看到他们在 <div class="leaflet-pane leaflet-overlay-pane"> 中集成了完整的 SVG 代码.

编辑:

我已将我的 map.html 文件上传到我的服务器，整个 SVG 代码都在该文件中。我怎样才能将它包含在 Leaflet 中？

Answer 1

版本 1.5.0 添加了扩展 ImageOverlay 的 SVGOverlay 层。