传单：如何从单个集合中切换 GeoJSON 功能属性？答案

【问题标题】：Leaflet: How to toggle GeoJSON feature properties from a single collection?传单：如何从单个集合中切换 GeoJSON 功能属性？
【发布时间】：2015-11-02 13:00:56
【问题描述】：

我有一个包含 2000 多个特征的 GeoJSON 对象，每个特征都属于一个类别（即“电气”、“军事”等）。共有大约 38 个类别。

这是我的集合的架构示例：

{"type":"Feature","properties":{"category":"Electrical","Name":"Plant No 1"},"geometry":{"type":"Point","coordinates":[81.73828125,62.59334083012024]}},{"type":"Feature","properties":{"category":"Electrical","Name":"Plane No 2"},"geometry":{"type":"Point","coordinates":[94.5703125,58.722598828043374]}},{"type":"Feature","properties":{"category":"Military","Name":"Base 1"},"geometry":{"type":"Point","coordinates":[104.4140625,62.91523303947614]}}

这是我的 L.geoJson 函数，它遍历收藏：

var allPoints = L.geoJson(myCollection, {
    onEachFeature: function(feature, layer){
        layer.bindPopup(L.Util.template(popTemplate, feature.properties));
    },
    "stylel": function(feature){
        return { "color": legend[feature.properties.category]
    }
}}).addTo(map);

如何将每个 category 属性分配给我的 L.control 函数，以便用户可以打开/关闭集合中的各种类别？如果我将每个类别设为数据集和一个单独的 geoJSOn 层，但要完成所有 38 个类别的工作量太大。

我的尝试：

L.control.layers({
    'Street Map': L.mapbox.tileLayer('mapbox.streets').addTo(map)
},{
    'Electrical': myCollection[feature.properties.category["Electrical"]],
    'Military': myCollection[feature.properties.category["Military"]]
});

有没有更好的方法来做到这一点？谢谢！

【问题讨论】：

标签： leaflet mapbox

【解决方案1】：

您可以简单地在onEachFeature 函数中分配您的层。您甚至可以为每个类别自动创建图层组。

结果：

var categories = {},
    category;

function onEachFeature(feature, layer) {
    layer.bindPopup(L.Util.template(popTemplate, feature.properties));
    category = feature.properties.category;
    // Initialize the category array if not already set.
    if (typeof categories[category] === "undefined") {
        categories[category] = [];
    }
    categories[category].push(layer);
}

// Use function onEachFeature in your L.geoJson initialization.

var overlays = {},
    categoryName,
    categoryArray;

for (categoryName in categories) {
    categoryArray = categories[categoryName];
    overlays[categoryName] = L.layerGroup(categoryArray);
}

L.control.layers(basemaps, overlays).addTo(map);

编辑：将 overlays 替换为映射而不是数组。

【讨论】：

您能否提供一个在 onEachFeature 函数中分配图层而不是自动化的示例？这可能是我目前更容易掌握的方法。
好的，我得到了这个工作（自动），但需要一些帮助打印控件中复选框旁边的类别名称。现在，那里只有数字。但是切换确实有效。谢谢！
我的错，overlays 应该是一个映射而不是一个数组。我会更正上面的代码给你看。

【解决方案2】：

迭代您的 GeoJSON 集合并创建多个 L.GeoJSON 层，每个类别一个，并将它们作为叠加层添加到您的 L.Control.Layers 实例中。

var controlLayers = L.control.layers({
    'Street Map': L.mapbox.tileLayer('mapbox.streets').addTo(map)
}).addTo(map);

// Object to store category layers
var overlays = {};

// Iterate the collection
collection.features.forEach(function (feature) {

    var category = feature.properties.category;

    // Check if there's already an overlay for this category
    if (!overlays[category]) {

        // Create and store new layer in overlays object
        overlays[category] = new L.GeoJSON(null, {
            'onEachFeature': function () {},
            'style': function () {}
        });

        // Add layer/title to control
        controlLayers.addOverlay(overlays[category], category); 
    }

    // Add feature to corresponding layer
    overlays[category].addData(feature);
});

这是 Plunker 上的一个示例：http://plnkr.co/edit/Zv2xwv?p=preview

【讨论】：

谢谢，由于某种原因，我无法让它与 mapbox 地图一起使用。不管怎样，谢谢你的帮助。