[javascript] Leaflet.PolylineDecorator
leaflet 위에서 선을 꾸밀 수 있는 라이브러리 입니다.
사용법
- snippet.javascript
L.polylineDecorator(latlngs, options).addTo(map);
latlngs에는 L.Polyline, L.Polygon, L.LatLng 배열이 들어갈 수 있음.
options에는 패턴(patterns)에 대한 정의가 들어감
Pattern 정의
offset : 패턴의 처음 심볼을 얼마나 떨어뜨려서 표현할지 정의 (기본값: 0)
endOffset : 마지막 심볼을 얼마나 떨어뜨려서 표현할지 정의 (기본값: 0)
repeat : 어느정도에서 반복할지 정의
symbol : 어떤 심볼을 사용할지 정의
메소드
setPaths(latlngs) : 패스 설정
setPatterns(<Pattern[]> patterns) : 패턴 설정(배열)
예제
- snippet.javascript
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);
위의 코드에서는 하나의 패턴만 사용하였음
배열형식을 사용하므로, 여러개의 패턴입력이 가능함
- snippet.javascript
var polyline = L.polylineDecorator(latlngs, { patterns : [ { offset : 0, repeat : 20, symbol : L.Symbol.dash({ pixelSize : 10, pathOptions : { color : '#f00', weight : 2 } }) },{ offset : 0, repeat : 50, symbol : L.Symbol.arrowHead({ pixelSize : 15, polygon : false, pathOptions : { stroke : true } }) } ] }).addTo(map);
애니메이션
setPatterns 함수를 사용하여 애니메이션 효과를 줄 수 있음.
- snippet.javascript
var anim = window.setInterval(function() { polyline.setPatterns([ { offset : 0, repeat : 20, symbol : L.Symbol.dash({ pixelSize : 10, pathOptions : { color : '#f00', weight : 2 } }) }, { offset : arrowOffset, repeat : arrowRepeat, symbol : L.Symbol.arrowHead({ pixelSize : 15, polygon : false, pathOptions : { stroke : true } }) } ]) arrowOffset += 5; if (arrowOffset > arrowRepeat) arrowOffset = 0; }, 100);
0.1초 간격으로 5px 씩 이동하는 애니메이션입니다.