javascript - Leaflet - 在没有插件的情况下切换 GeoJSON 层

Question

我知道如何添加带有标记的图层，我可以打开/关闭标记以及如何将 GeoJSON 图层添加到我的 map 。

但我不能混合使用这些功能。

我需要从 GeoJSON 创建一个切换层(折线层)。

是否可以无需任何外部插件或脚本就可以得到我需要的东西？

Answer 1

GeoJSON 图层和标记可以毫无问题地一起使用。

为了能够切换图层，您需要从可以点击的对象(例如按钮)中捕获某种点击事件。 根据我的研究，我发现如果您需要一个自定义按钮，您自己实现起来并不是那么快，因此您可能需要使用其中一个可用的插件。

如果您仍然不想构建按钮或使用插件，您可以在 map 本身上设置一个点击事件，它会打开和关闭 GeoJSON 层。

我从传单网站上获取了 GeoJSON 示例并对其进行了更改，以便它可以打开和关闭 GeoJSON 层:

var geoLayer = L.geoJson([
  // ...
]);

map.on('click', function() {
  if(map.hasLayer(geoLayer)) {
    map.removeLayer(geoLayer);
  } else {
    map.addLayer(geoLayer);
  }
});

希望对您有所帮助..

编辑: 我将示例更改为使用 leaflet.js 的图层控件 哪个更好...

var baseLayers = {
  "Markers": markerLayer,
  "GeoJSON": geoLayer
};
L.control.layers(baseLayers).addTo(map);

不知道这个 ;)

如果您想要复选框而不是单选按钮，请改用它

L.control.layers(null, baseLayers).addTo(map);

http://codepen.io/anon/pen/qEaEBg