javascript - Leaflet JS map 和函数来选择新的数据层

Question

我正在与 leaflet.js 合作并通过 omnivore 从 CSV 文件中提取数据。我可以为我从 CSV 中“过滤”的每个功能创建单独的图层。除了编写大量相同的 ominvore.csv() 之外，还有一种方法可以创建一个函数，当用户单击 groupLayers l.control 或自定义 div 中的单选按钮或复选框时，该函数将返回用户正在查找的内容/形式？

例如，这是我的远足图层:

var hiking = omnivore.csv('data/all.csv', null, trailheadLayer).on('ready', function(layer) {
    markerArray = [];
    this.eachLayer(function(marker) {
        if (marker.toGeoJSON().properties.fee_type == "Free") {
            marker.setIcon(L.icon({
                iconSize: [27, 27],
                iconAnchor: [13, 27],
                popupAnchor: [1, -24],
                iconUrl: 'images/trailheadFree.png'
            }));

            var popupData = "<table class='table table-striped table-sm table-bordered'><tr><th>Site Name</th><td>" + marker.toGeoJSON().properties.site_name + "</td></tr><tr><th>Fee Payment Method</th><td>" + marker.toGeoJSON()
                .properties.fee_payment_method + "</td></tr><tr><th>Site Type</th><td>" +
                marker.toGeoJSON().properties.site_type + "</td></tr></table>";
            marker.bindPopup(popupData);
            marker.bindLabel(marker.toGeoJSON().properties.site_name);

        } else {
            marker.setIcon(L.icon({
                iconSize: [27, 27],
                iconAnchor: [13, 27],
                popupAnchor: [1, -24],
                iconUrl: 'images/trailheadFee.png'
            }));

            var popupData = "<table class='table table-striped table-sm table-bordered'><tr><th>Site Name</th><td>" + marker.toGeoJSON().properties.site_name + "</td></tr><tr><th>Fee Payment Method</th><td>" + marker.toGeoJSON()
                .properties.fee_payment_method + "</td></tr><tr><th>Site Type</th><td>" +
                marker.toGeoJSON().properties.site_type + "</td></tr></table>";
            marker.bindPopup(popupData);
            marker.bindLabel(marker.toGeoJSON().properties.site_name);

        }
    });
});

我的 TrailheadLayer 过滤器如下所示:

var trailheadLayer = L.geoJson(null, {
    filter: function(layer) {
        if (layer.properties.site_type == "Trailhead")
            return true;
    }
});

我尝试通过 .val() 从输入中将变量传递到杂食解析器中，如下所示:

function selectedLayer(forest, activity) {
    omnivore.csv('data/'+forest+'.csv',null,activity).addTo(map);
}

selectedLayer("sbnf", "trailheadLayer");

但是，我收到此控制台错误:

Uncaught TypeError: omnivore.csv(...).addTo is not a function

如果我手动将 sbnf 和 TrailheadLayer 添加到 omnviore.csv(...) 中，它就可以正常工作。

感谢您的任何提示、帮助或想法。

编辑::

确保我将一个对象传递给杂食动物:

function selectedLayer(forest, activity) {
    var micon = activity;
    var theActivity = JSON.parse('{ "activity": "' + activity + '"}');
    console.log("this activity is: " + activity + " type is: " + typeof(activity) + ", and after json.parse(): " + typeof(theActivity));

    omnivore.csv('data/' + forest + '.csv', null, theActivity).on('ready', function(layer) { ............

但是，这里出现非功能错误。对象还不够多吗？上面没有引号...不是字符串...

Answer 1

编辑

如果我理解正确的话，您有带有关联String值的HTML输入(单选/复选框)，这些值顺便对应于您的L.geoJSON图层组变量的名称.

那么您不知道如何在仅给出这个 String 值的情况下正确调用杂食动物？

您有多种方法将实际图层组与您的输入相关联，以便您可以将它们传递给杂食动物(它再次需要一个 Leaflet GeoJSON 图层组 3rd parameter ，而不是一个对象).

例如，您可以使用 jQuery 的 data将层组直接关联到每个输入。它接受任何类型的对象，而不仅仅是 String 的对象。

另一个简单的解决方案是使用 HashMap /字典对象来保存您的String输入值和图层组之间的双射关联:

var strValueToLayerGroup = {
  "trailheadLayer": trailheadLayer
  // more as appropriate
};

selectedLayer("sbnf", strValueToLayerGroup["trailheadLayer"]);

<小时/>

原始答案

至于您的控制台错误，它来自于您提供一个 String ("trailheadLayer") 作为 omnivore.csv() 第三个参数，而它需要 GeoJSON Layer Group .

因此 selectedLayer("sbnf", TrailheadLayer); (trailheadLayer 周围不带引号)不应触发该错误。

顺便说一句，你可以使用 pointToLayer您的 L.geoJson() 构造函数上的选项可以直接分配适当的图标、弹出窗口和标签，而不必随后再执行 eachLayer()。