Question

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

到目前为止，它在网页中工作，我可以使用show / hide jQuery函数进行操作，现在我想与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

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

修改

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

Answer 1

版本1.5.0添加了SVGOverlay图层，该图层扩展了ImageOverlay。

Answer 2

如果您将svg加载为imageOverlay，它会将其包装在<img>内，这会使其成为静态。检查这个PR https://github.com/Leaflet/Leaflet/issues/5756这个真棒的家伙发现你可以用<img>取代<object>并将svg内容放在那里作为大男孩svg来对待它。至少svg节点属性中的事件处理程序将起作用。

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

2 个答案: