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

【问题标题】：Leaflet - toggling GeoJSON layers without plug-insLeaflet - 在没有插件的情况下切换 GeoJSON 层
【发布时间】：2014-12-22 21:29:17
【问题描述】：

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

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

我需要创建一个toggling layer from GeoJSON（折线层）。

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

【问题讨论】：

标签： javascript gis leaflet

【解决方案1】：

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

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

如果您仍然不想构建按钮或使用插件，例如，您可以在地图本身上设置一个点击事件，这会打开和关闭 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

【讨论】：

如果您有想法，如何通过插件获得我需要的东西，请告诉我。 :) 我需要尽快解决。
有效！ :) 剩下两个小问题。如何将此图层控制面板移动到左侧？当我将光标从图标上移开时，如何将此图层控制面板设置为始终可见而不是隐藏？
你可以这样定位：L.control.layers(baseLayers).addTo(map).setPosition('bottomright');你可以做各种各样的事情，只需阅读文档.. leafletjs.com/reference.html#control-attribution-options
该死，如果你问我一个问题，我就不能停止思考。有一个“折叠”选项，你可以像这样轻松关闭它：L.control.layers(baseLayers, null, {collapsed: false}).setPosition ('topleft').addTo(map);我相应地更新了上面的 codepen 示例