26_customAnimation.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="ol.js"></script>
    <link rel="stylesheet" href="ol.css">
    <script
        src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
    </script>

</head>

<body>
    <!-- 기본틀로 사용하는 양식 -->
    <div id="map" class="map"></div>

    <script>
        //1.
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM({
                        wrapX: false
                    })
                })
            ],
            target: 'map',
            view: new ol.View({
                center: [0, 0],
                zoom: 1
            })
        });

        var source = new ol.source.Vector({
            wrapX: false
        });
        var vector = new ol.layer.Vector({
            source: source
        });
        map.addLayer(vector);

        //2.
        function addRandomFeature() {
            var x = Math.random() * 360 - 180;
            var y = Math.random() * 180 - 90;
            var geom = new ol.geom.Point(ol.proj.fromLonLat([x, y]));
            var feature = new ol.Feature(geom);
            source.addFeature(feature);
        }

       
        //4.
         var duration = 3000;
        function flash(feature) {
            var start = new Date().getTime();
            var listenerKey = map.on('postcompose', animate);

            function animate(event) {
                var vectorContext = event.vectorContext;
                var frameState = event.frameState;
                var flashGeom = feature.getGeometry().clone();
                var elapsed = frameState.time - start;
                var elapsedRatio = elapsed / duration;
                // radius will be 5 at start and 30 at end.
                var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5; //반지름
                var opacity = ol.easing.easeOut(1 - elapsedRatio); //테두리

                var style = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: radius,
                        stroke: new ol.style.Stroke({
                            color: 'rgba(255, 0, 0, ' + opacity + ')',
                            width: 0.25 + opacity
                        })
                    })
                });

                vectorContext.setStyle(style);
                vectorContext.drawGeometry(flashGeom);
                if (elapsed > duration) {
                    ol.Observable.unByKey(listenerKey); //unByKey : on()또는에서 반환 한 키를 사용하여 이벤트 리스너를 제거합니다 once().
                    return;
                }
                // tell OpenLayers to continue postcompose animation
                map.render();
            }
        }

        //3.
        source.on('addfeature', function (e) {
            flash(e.feature);
        });

        //1.
        window.setInterval(addRandomFeature, 1000);
    </script>
</body>


</html>