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

Question

我有一段包含层级的自定义SVG代码。

目前它在网页中可以使用jQuery的show/hide函数进行操控，现在我想将其与Leaflet集成。

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

首先，我尝试了以下方式作为示例：

  <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>

这个代码可以正常工作，显示了地图，我可以缩放和查看其他对象，但是从源代码中可以看到它像是通过一些逻辑显示为单独的图像。

我想将我的自定义SVG代码与所有图层集成在一起，以便我可以使用Leaflet进行拖动、缩放和其他所有好的功能。

这个网站正是我想做的： https://winter.intermaps.com/oetztal?lang=en 从源代码中可以看出，他们将完整的SVG代码集成在<div class="leaflet-pane leaflet-overlay-pane">内。

编辑： 我已经将我的map.html文件上传到服务器上，整个SVG代码都在该文件中。如何将它包含到Leaflet中呢？

- user2519032

Answer 1

Release 1.5.0增加了SVGOverlay图层，它扩展了ImageOverlay。

- eclux

Answer 2

如果你将svg作为imageOverlay加载，它会包裹在<img>标签内，使其静止不动。
看看这个PR https://github.com/Leaflet/Leaflet/issues/5756 这位厉害的哥们发现，你可以简单地将<img>替换为<object>，并将svg的内容放在那里来处理这个“大人物”svg。至少svg节点属性中的事件处理程序将起作用。

- Timofey Trofimov