Openlayers Animation Marker 생성하기

Openlayers Animation Marker

addPulseIcon

애니메이션 마커를 추가하는 함수를 addPulseIcon이라 명명하였습니다.

function addPulseIcon(feature) {
    const duration = 3000
    var start = +new Date()
    var listenerKey
    
    function animate(evt) {
        
        var vectorContext = evt.vectorContext
        var frameState = evt.frameState
        
        var flashGeom = feature.getGeometry().clone()
        var elapsed = frameState.time - start
        var elapsedRatio = elapsed / duration
        
        // 5 ~ 30
        var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5
        // 1 ~ 0
        var opacity = ol.easing.easeOut(1 - elapsedRatio)
        
        var pulseStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: radius,
                snapToPixel: false,
                stroke: new ol.style.Stroke({
                    /* Color: Red */
                    color: [255, 0, 0, opacity],
                    width: 0.25 + opacity
                })
            })
        })
        
        vectorContext.setStyle(pulseStyle)
        vectorContext.drawGeometry(flashGeom)
        
        if(elapsed > duration) {
            ol.Observable.unByKey(listenerKey)
            return
        }
        
        map.render()
    }
    
    
    listenerKey = map.on('postcompose', animate)
}

 

Map

네이버 위성지도 타일 레이어를 추가해놓은 후, 애니메이션 마커를 추가할 pulseIconLayer를 추가합니다.

​x
var naverSatliteTileMap = 'https://map.pstatic.net/nrb/styles/satellite/1569578141/{z}/{x}/{y}.png?mt=bg.ol.sw'
​
var current = ol.proj.transform([126.739361, 37.671093], 'EPSG:4326', 'EPSG:3857')
var view = new ol.View({
    center: current,
    zoom: 19
})
​
var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: naverSatliteTileMap,
                crossOrigin: ''
            })
        })
    ]
})
​
var pulseIconSource = new ol.source.Vector({
    features: []
})
​
var pulseIconLayer = new ol.layer.Vector({
    source: pulseIconSource
})
​
map.addLayer(pulseIconLayer)
map.setView(view)

 

Add Event

x(경도), y(위도) 에서 애니메이션 마커를 출력합니다.

xxxxxxxxxx
var coordinates=  ol.proj.transform([x, y], 'EPSG:4326', 'EPSG:3857')
var pulseIcon = new ol.Feature(new ol.geom.Point(coordinates))
pulseIconSource.addFeature(pulseIcon)
map.render()
addPulseIcon(pulseIcon)