如何使用leaflet图层控制器切换d3 svg覆盖层？

Question

我有三个d3 svg，希望将它们放在同一个leaflet地图上。我想要像控制leaflet图层一样轻松地控制它们。

这里是可用的代码，但效果不太好。

相关部分在第75行到结尾，那里我创建了一个自定义图层控制器，专门绑定到我的d3 svg组，然后实例化并将其放入覆盖物哈希中，最后再addTo(map)。

var lineLayer = L.Class.extend({
  initialize: function () {
    return;
  },
  onAdd: function (map) {
    railLineGroup.style("display", "block");
  },
  onRemove: function (map) {
    railLineGroup.style("display", "none");
  },
});
var railLineLayer = new lineLayer();
overlays["Rail Lines"] = railLineLayer;
L.control.layers(baseLayers, overlays).addTo(map);

我相信有更好的方法来解决这个问题。例如，由于这是一个hack，图层控制器不知道图层已经被激活，因此复选框未被选中。

非常感谢任何帮助！

- Amiri Barksdale

Answer 1

我真的建议你看看Vector OSM，特别是tilejson.js。在那里，你可以看到一个适当的实现，使图层控制与SVG叠加层一起工作。

- geraldo