[javascript] Leaflet.PolylineDecorator

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

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

zxCf8t

snippet.javascript

L.polylineDecorator(latlngs, options).addTo(map);

latlngs에는 L.Polyline, L.Polygon, L.LatLng 배열이 들어갈 수 있음.

options에는 패턴(patterns)에 대한 정의가 들어감

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

JZml5h