Группируйте точки на карте по их категориям в JavaScript - PullRequest
Новая
       4

Группируйте точки на карте по их категориям в JavaScript

0 голосов
/ 03 января 2012

Я ставлю точки на карту, анализируя динамически созданный файл GeoJSON.Я хотел бы сгруппировать эти точки по атрибуту категории (каждая точка имеет свойство категории).Я нашел, как добавлять точки к групповым объектам в моей библиотеке отображений (Leaflet: http://leaflet.cloudmade.com/examples/layers-control.html),, но предполагается, что я знаю, какими будут категории (например, var citiesLayer = new L.LayerGroup();).

Что я предпочел бы сделать, так это проанализировать каждую точку (уже выполняя эту часть) и выполнить проверку, чтобы увидеть, существует ли группа для категории X, и либо добавить точку в эту группу, либо создать группу и добавитьточка. Это позволило бы мне сразу включить / выключить все точки определенной категории. Есть идеи, как мне это сделать? Я очень мало знаю о JavaScript (я парень из Python).

Вот мой JS: 

// http://geoserving.net/odk_geoserver/

function init(){
    $.getJSON(geoJSONURL, makeMap);
}

function makeMap(data) {
    // Assign GeoJSON to variable
    var eventPoints = data;
    // Create new map instance
    var map = new L.Map('map');
    var eventsGeoJSON = new L.GeoJSON(null, {
            pointToLayer: function (latlng){
                return new L.CircleMarker(latlng, {
                    radius: 5,
                    fillColor: "#A3C990",
                    color: "#000",
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.4
                });
            }
        });

    // Event Listener for Addition of Data to Boundary Layer
    eventsGeoJSON.on('featureparse', function (e) {
        var popupText = 
        '<div id="feature">';

        for(var i = 0, l = e.properties.event_set__all.length; i < l; i++) {  
            popupText += '<div class="event">' +
            '<p>' +
                '<h3 class="featureInfo">' +
                        e.properties.event_set__all[i].title + 
                '</h3>' +
            '</p>';
            if (e.properties.event_set__all[i].category__category) {
                popupText +=
                '<p>' +
                    '<span class="featureLabel">Category: </span>' +
                    '<span class="featureInfo">' +
                        e.properties.event_set__all[i].category__category + 
                    '</span>' +
                '</p>';
            }
            popupText += '</div>';
        }

        popupText +=
            '<div class="venue">' +
                    '<span class="featureLabel">Venue: </span>' +
                    '<span class="featureInfo">' + 
                        '<a href="../' + e.properties.neighborhood__slug + '/' + e.properties.slug + '">' + 
                            e.properties.venue + 
                        '</a>' +
                    '</span>' +
            '</div>';

        e.layer.bindPopup(popupText);
    }); // End feature parse

    // Populate Points Layer with Data
    eventsGeoJSON.addGeoJSON(eventPoints);

    var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/<My Key>/256/{z}/{x}/{y}.png',
        cloudmadeAttrib = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
        cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});
    var seattle = new L.LatLng(47.64, -122.34); // geographical point (longitude and latitude)
    map.setView(seattle, 12).addLayer(cloudmade);
    map.addLayer(eventsGeoJSON);
}

Пример точки GeoJSON: 

{
    "crs": null,
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -122.382626,
                    47.6657641
                ]
            },
            "type": "Feature",
            "id": 18,
            "properties": {
                "event_set__all": [
                    {
                        "category__category": "Live",
                        "title": "the Tallboys",
                        "cost": "$5",
                        "description": "",
                        "slug": "the-tallboys"
                    }
                ],
                "neighborhood__slug": "ballard",
                "venue": "Tractor Tavern",
                "neighborhood__neighborhood": "Ballard",
                "address": "5213 Ballard Ave NW, Seattle, WA 98107, USA",
                "slug": "tractor-tavern"
            }
        }
    ]
}

Атрибут, который будет использоваться для группировки каждой точки: e.properties.event_set__all[0].category__category.

1 Ответ

1 голос
/ 23 декабря 2014

Вы можете сгруппировать все точки с помощью библиотеки Alasql : 

var res = alasql('SELECT features->0->properties->event_set__all->0->category__category \
                      AS category, ARRAY(_) AS points FROM ? GROUP BY category',[data]);

Она группирует все точки с категорией, выбранной из этого имени длинной точки, например: 

[
    {category:"Live1", points: [{point},{point},...] },
    {category:"Live2", points: [{point},{point},...] }
]

Попробуйте этот пример в jsFiddle .

...