[javascript] Leaflet.PolylineDecorator

[javascript] Leaflet.PolylineDecorator

• Github : https://github.com/bbecquet/Leaflet.PolylineDecorator

leaflet 위에서 선을 꾸밀 수 있는 라이브러리 입니다.

사용법

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( patterns) : 패턴 설정(배열)

예제

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);

위의 코드에서는 하나의 패턴만 사용하였음

배열형식을 사용하므로, 여러개의 패턴입력이 가능함

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 함수를 사용하여 애니메이션 효과를 줄 수 있음.

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 씩 이동하는 애니메이션입니다.