宣传单张JS Maps和用于选择新数据层的函数 [英] Leaflet JS Maps and functions to select new layers of data

问题描述

我正在使用 leaflet.js ，并通过

I'm working with leaflet.js and pulling data from a CSV file via omnivore. I am able to make individual layers for each of the features I am "filtering" on from the CSV. Aside from writing a lot of the same ominvore.csv(), is there a way to create a function that will return what the user is looking for when they click on a radio button or checkbox in the groupLayers l.control or a custom div / form?

例如，这是我的远足层:

For example, here is my hiking layer:

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过滤器是这样的:

and my trailheadLayer filter is like so:

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

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

I've tried passing a variable via .val() from an input into the omnivore parser like so:

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

selectedLayer("sbnf", "trailheadLayer");

但是，出现此控制台错误:

However, i get this console error:

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

如果我将sbnf和TrailheadLayer手动添加到omnviore.csv(...)，则工作正常.

If I manually add sbnf and trailheadLayer into the omnviore.csv(...), it works just fine.

感谢任何提示，帮助或想法.

Thanks for any hints, help or ideas.

:

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

Making sure I am passing an object into omnivore:

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) { ............

但是，在这里出现非功能错误.这还不够吗?没有引号...不是字符串...

However, getting the non-function error here. Isn't the object enough? No quotes on it... not a string...

推荐答案

编辑

如果我理解正确，则您具有带有关联的String值的HTML输入(无线电/复选框)，这些值偶然与您的L.geoJSON图层组变量的名称相对应.

If I understand correctly, you have HTML inputs (radios / checkboxes) with associated String values, that incidentally correspond to the name of your L.geoJSON layer groups variables.

然后，仅给出此String值，您不知道如何正确调用杂食动物?

Then you do not know how to correctly call omnivore, given only this String value?

您可以通过多种方法将实际的图层组与您的输入相关联，以便将它们传递给omnivore(这又需要一个Leaflet GeoJSON图层组作为

You have several ways to associate the actual Layer Groups to your inputs, so that you can pass them to omnivore (which, once again, needs a Leaflet GeoJSON Layer Group as 3rd parameter, not an Object).

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

For example, you could use jQuery's data to associate directly the Layer Group to each input. It accepts any kind of objects, not just String's.

另一种简单的解决方案是使用散列图/字典对象，该对象保留您的String输入值和您的图层组之间的双射关联:

Another simple solution would be to use a hash map / dictionary object that holds the bijective association between your String input value and your Layer Group:

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

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

---

原始答案

对于您的控制台错误，是由于您提供了String("trailheadLayer")作为omnivore.csv()第3个参数的事实，而它期望的是

As for your console error, it comes from the fact that you provide a String ("trailheadLayer") as omnivore.csv() 3rd argument, whereas it expects a GeoJSON Layer Group.

因此selectedLayer("sbnf", trailheadLayer);(在trailheadLayer周围没有引号)不应触发该错误.

So selectedLayer("sbnf", trailheadLayer); (without quotes around trailheadLayer) should not trigger that error.

顺便说一句，您可以在L.geoJson()构造函数直接分配适当的图标，弹出窗口和标签，而不需要在之后进行eachLayer().

BTW, you could use pointToLayer option on your L.geoJson() constructor to directly assign the appropriate icon, popup and label, instead of having to go through eachLayer() afterwards.

这篇关于宣传单张JS Maps和用于选择新数据层的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！