Question

我正在使用jQuery的getJSON方法来加载我在QGIS中创建的外部行数据。

我要做的是打开和关闭我的图层 - 简单的复选框，没有底图的单选按钮。我还希望在最初加载地图时关闭所有图层。

我的代码

var map=L.map('map').setView([41.9698, -87.6859], 12);

var basemap = L.tileLayer('http://a.tile.stamen.com/toner/{z}/{x}/{y}.png',
    {
      //attribution: would go here
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);

//display geoJson to the map as a vector

var x = function(source, map)
{
var layers = L.geoJson(source,
    {

style: function(feature){
var fillColor, side=feature.properties.side;
    if (side==='Both') fillColor = '#309e2d';
    else if (side==='Neither') fillColor = '#d90f0f';
    else if (side==='West Only') fillColor = '#e27f14';
    else if (side==='East Only') fillColor = '#2b74eb';
    else if (side==='North Only') fillColor = '#eae42b';
    else if (side==='South Only') fillColor = '#552d04';
    else fillColor = '#f0f5f3';
    return { color: fillColor, weight: 3.5, opacity: null };
        },

onEachFeature: function(feature, geojson){
var popupText="<h1 class='makebold'>Border: </h1>"+feature.properties.name+"<br/>"+"<h1 class='makebold'>Which Side?: </h1>"+feature.properties.side;
geojson.bindPopup(popupText);
        }

    }).addTo(map);
};      

$.getJSON("data/Knox.geojson", function(source){ x(source, map); });
$.getJSON("data/abc.geojson", function(source){ x(source, map); });
$.getJSON("data/xyz.geojson", function(source){ x(source, map); });

我尝试在L.geoJson函数（var layers）之前分配变量，然后L.control.layers(null, layers).addTo(map);这似乎不起作用。

如何为已经与几个回调函数（L.geoJson，style和onEachFeature）相关联的多个外部geojson创建图层控件？提前感谢。

Answer 1

编辑：

由于您明确表示您只想打开/关闭整个集合，因此它更加简单（并且几乎与您将L.geoJson分配给{{ 1}}），但你必须照顾asynchronous processes。

要避免此问题，您可以执行以下操作：

var layers

然后，当{jn var myLayerGroup = L.layerGroup(), // do not add to map initially. overlays = { "Merged GeoJSON collections": myLayerGroup }; L.control.layers(null, overlays).addTo(map); function x(source, map) { // Merge the GeoJSON layer into the Layer Group. myLayerGroup.addLayer(L.geoJson({}, { style: function (feature) { /* … */ }, onEachFeature: function (feature, layer) { /* … */ } })); } $.getJSON("data/Knox.geojson", function(source){ x(source, map); });请求收到myLayerGroup请求时，getJSON会逐渐填充您的GeoJSON功能。

如果我的理解是正确的，您希望能够独立地打开/关闭GeoJSON数据中的每个功能吗？

在这种情况下，您只需在构建L.geoJson图层组时填充layers对象，例如在L.geoJson函数内部：

onEachFeature

如果您要加载更多GeoJSON数据并转换为Leaflet图层，只需执行完全相同的操作（在var layers = {}; L.geoJson(source, { style: function (feature) { /* … */ }, onEachFeature: function(feature, layer){ var popupText = "<h1 class='makebold'>Border: </h1>" + feature.properties.name + "<br/>" + "<h1 class='makebold'>Which Side?: </h1>" + feature.properties.side; layer.bindPopup(popupText); // Populate `layers` with each layer built from a GeoJSON feature. layers[feature.properties.name] = layer; } }); var myLayersControl = L.control.layers(null, layers).addTo(map);函数中将构建图层添加到layers中）并在此处仅构建一次图层控件结束，或使用onEachFeature。

注意：如果您在单独的请求中加载每个GeoJSON数据，请确保构建代码以考虑您的几个异步进程。请参阅jQuery Deferred对象。或者首先创建您的图层控件并使用myLayersControl.addOverlay(layer)方法。

如果您希望它们最初隐藏在地图中，只需不要将geoJson图层添加到地图中...

Answer 2

我在Leaflet中学到了很多关于层控制的知识，这很好。 @ghybs提供了非常有用的建议。

我的问题是关于打开和关闭外部geoJson文件，特别是使用getJSON jQuery方法。我试图在我的多个回调中分配一个变量，例如：

var layers=L.geoJson(source,{ {style: /*....*/}, {onEachFeature: /*....*/}}

然后去L.control.layers(null, layers).addTo(map);

这不起作用（为什么？我仍然无法解释 - 我是初学者 - 程序员）。我这样做的方法是分别创建我的style和onEachFeature函数，如下所示：

function borders (feature){
var fillColor, side=feature.properties.side;
if (side==='Both') fillColor = '#309e2d';
else if (side==='Neither') fillColor = '#d90f0f';
else if (side==='West Only') fillColor = '#e27f14';
else if (side==='East Only') fillColor = '#2b74eb';
else if (side==='North Only') fillColor = '#eae42b';
else if (side==='South Only') fillColor = '#552d04';
else fillColor = '#f0f5f3';
return { color: fillColor, weight: 3.5, opacity: null };
    };

和

function popUp (feature, geojson){
var popupText="<h1 class='makebold'>
Border: </h1>"+feature.properties.name+"<br/>"+"<h1 class='makebold'>
Which Side</h1>"+feature.properties.side;geojson.bindPopup(popupText);
 };

然后将这些直接作为回调分配到getJSON方法中。通过这种方式，我可以在＆＃34;绘制＆＃34;之前创建一个变量。我的geoJson带有L.geoJson()到地图。然后我可以动态地将变量（？）分配给图层控件：

$.getJSON("data/xyz.geojson", function(source){
var xyz = L.geoJson(source, {
    style: borders,
    onEachFeature: popUp});
togglelayer.addOverlay(xyz, 'This name shows up on the control')});
});

我存储了变量togglelayer，如下所示：

var togglelayer = L.control.layers(null, null,{collapsed: false}).addTo(map);

这篇文章也很有帮助：How to add two geoJSON feature collections in to two layer groups

在Leaflet中打开和关闭图层（更复杂的场景）

2 个答案: