JavaScript로 해당 카테고리별로 맵 포인트를 그룹화하십시오.

Question

동적으로 생성 된 GeoJSON 파일을 통해 구문 분석하여 맵에 포인트를 지정합니다. 나는 그것들을 category 속성으로 그룹화하고 싶다. (각 point는 category 속성을 가지고있다.) 매핑 라이브러리 (Leaflet : http://leaflet.cloudmade.com/examples/layers-control.html)의 그룹 개체에 점을 추가하는 방법을 찾았지만 범주가 어떻게 될지 알고 있다고 가정합니다 (예 : var citiesLayer = new L.LayerGroup();).

내가 원하는 것은 각 부분 (이미 그 부분을 수행)을 분석하고 범주 X에 대한 그룹이 있는지 확인하고 해당 그룹에 지점을 추가하거나 그룹을 만들거나 포인트를 추가하십시오. 이렇게하면 특정 카테고리의 모든 포인트를 한 번에 켜거나 끌 수 있습니다. 내가 어떻게 그걸 할 수 있는지에 대한 아이디어가 있니? 나는 JavaScript에 대해 거의 안다. (나는 Python 녀석이다.)

// 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 인 그룹에 사용될

여기에 내 JS이다.

Answer 1

당신은 그룹 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},...] } 
] 

이 예 at jsFiddle을보십시오.