2016-06-08 4 views
0

CSV 파일의 몇 열을 기준으로 확인란, 라디오 버튼 또는 다른 선택기로 필터링하는 방법을 살펴 보았습니다. 이 파일에는 내 모든 포인트가 있으며지도에 잘 표시됩니다. 내 필터링은 내가 고심하고있는 곳이다. 각 유형의 디스플레이에 별도의 정적 필터를 만드는 것보다 나은 방법을 찾고 있습니다.필터 전단지 마커 체크 박스 같은 Omivore CSV 파일

나는 CSV 파일을 가지고 있는데, 나는 Omnivore으로 해석하고있다.

나는과 같이 필터링 할 수 있습니다

var freeLayer = L.geoJson(null, { 
     filter: function(layer) { 
      if (layer.properties.icon == "free") 
       return true; 
     } 
    }); 
    var feeLayer = L.geoJson(null, { 
     filter: function(layer) { 
      if (layer.properties.icon == "fee") 
       return true; 
     } 
    }); 

그리고 잡식를 통해 내 레이어를로드

var free = omnivore.csv('data/all.csv', null, freeLayer)... 
var fee = omnivore.csv('data/all.csv', null, feeLayer)... 

내 layerGroup 추가 :

var groupedOverlays = { 
      "Fee Type": { 
       "<img src='images/fee.png' width='26' height='26'>&nbsp;FEE": fee, 
       "<img src='images/free.png' width='26' height='26'>&nbsp;FREE": free 
      }... 
이 잘 작동

,하지만 난 경우 내 CSV 파일의 다른 열/속성을 필터링하고 싶다면 다른 L.geoJson 필터를 작성해야합니다.

예를 들어 한 번에 두 개 또는 세 개의 다른 선택을 사용하도록 레이어 속성을 업데이트하려면 어떻게해야합니까? 내가 무료 및 수수료에 대한 체크 박스가 있고 둘 다 보여 줬지만 둘 다 하나의 L.geoJson 필터에서 왔습니다 ...

답변

2

필터 당 하나의 L.geoJson 레이어 그룹을 만드는 데는 아무런 문제가 없습니다.

가장 큰 단점은 동일한 CSV 파일을 여러 번 구문 분석하면 파일이 상당히 큰 경우 성능 문제가 발생할 수 있다는 것입니다.

리프 그룹 - 잡식성 행동을 변경하여 여러 그룹을 만들 수는 없지만 L.geoJson 또는 대안 전략을 세울 수는 있습니다.

간단한 해결 방법은 L.geoJson 생성자의 onEachFeature option을 사용하여 필요한 모든 필터에 따라 새로 생성 된 기능/마커를 다른 그룹 (실제 오버레이)에 추가하는 것입니다. 그런 다음 Omnivore에 사용 된 L.geoJson은 맵에 추가 할 필요가 없으며 중간 컨테이너로만 작동합니다.

대체 전략은 독립 라이브러리로 Leaflet-omnivore를 대체하는 것을 기반으로합니다. 예를 들어 CSV 파싱 라이브러리 (PapaParse ...)는 필터에 따라 적절한 오버레이 레이어 그룹에서 직접 각 라인을 반복하고 기능/마커를 직접 만듭니다. CSV는 간단한 구조 (Leaflet-omnivore가 빛나는 KML과 같은 다른 형식과 달리)가 있으므로 구현하기가 쉽습니다.