속성을 기반으로 한 기호로 기호화

Question

리플렛과 함께 PolyLineDecorator를 사용하려하지만 애트리뷰트 데이터를 기반으로하는 경로/선을 상징 할 때 PolyLineDecorator를 계속 이해할 수 없다는 장애가 발생했습니다. 그러나 나를 위해 좋은 작품

var polyline = L.polyline([...]).addTo(map); 
var decorator = L.polylineDecorator(polyline, { 
    patterns: [ 
     // defines a pattern of 10px-wide dashes, repeated every 20px on the line 
     {offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})} 
    ] 
}).addTo(map); 

, 나는 하나의 GeoJSON 파일의 20 개 라인을 가지고 그리고 난 JSON 파일의 이름 필드에 따라 라인을 상징하고 싶습니다. 나는 이것을 다루는 곳 어디에서도 예를 찾을 수없는 것 같습니다. 누군가 관련 예제 나 문서를 가르쳐 줄 수 있습니까? 자신의 GeoJSON 파일로 각 행을 내보내는 방법과 비교해 볼 필요가있는 것 같습니다.

도움 주셔서 감사합니다.

Answer 1

GeoJson onEachFeature() 방법을 사용해야합니다. 의 당신의 geoJson 구조는 것을 asume 보자

var geojsonFeatures = [ 
    { 
    "type": "Feature", 
    "properties": { 
     "name": "Trail 1", 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-104.99404, 39.75621] 
    } 
    }, 
    { 
    "type": "Feature", 
    "properties": { 
     "name": "Trail 2", 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-104.99404, 39.75621] 
    } 
    }  
]; 

당신은 feature.properties.name에 의해 기능의 이름 속성에 액세스 할 수 있습니다 : 답장을

이

L.geoJson(geojsonFeature, { 
    onEachFeature: function (feature, layer) { 
    if (feature.properties.name === '') { 
     L.polylineDecorator(layer, { 
     patterns: [ 
      {offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})} 
     ] 
     }).addTo(map); 
    } else { 
     L.polylineDecorator(layer, { 
     patterns: [ 
      {offset: 0, repeat: 30, symbol: L.Symbol.dash({pixelSize: 20})} 
     ] 
     }).addTo(map); 
    } 
    }) 
})