Как анимировать маркеры листовок, нарисованные на рендере L.canvas? - PullRequest
Новая
       32

Как анимировать маркеры листовок, нарисованные на рендере L.canvas?

0 голосов
/ 28 января 2020

У меня есть листовка с маркерами, которые расширяют класс L.CircleMarker, а затем определяют пользовательский путь, который позволяет нам рисовать настраиваемые фигуры на холсте. Это демонстрирует rioV8 в этом блестящем ответе . Я хотел бы оживить эти маркеры, если это возможно, пожалуйста. Прикрепленный код показывает два маркера, один circleMarker, который пульсирует, и один пользовательский, который, несмотря на то, на что я надеялся, является stati c.

Можно ли анимировать / пульсировать это, пожалуйста? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

    <!--d3 -->
    <script src='https://d3js.org/d3.v4.min.js'></script>

    <!-- leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>

    <style>
        #map {
            height: 800px;
        }

        .pulse {
            animation: pulsate 1s ease-out;
            -webkit-animation: pulsate 1s ease-out;
            -webkit-animation-iteration-count: infinite;
            opacity: 0.0
        }


        @keyframes pulsate {
            0% {
                transform: opacity: 1.0;
            }
            75% {
                opacity: 1.0;
            }
            100% {
                transform: opacity: 0.0;
            }
        }

    </style>

</head>
<body>

<div id="map"></div>
<script>
    var uk = [
        {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {'city': 'Paris'},
                    "geometry": {
                        "type": "Point",
                        "coordinates": [2.3522, 48.8566]
                    }
                },
            ]
        }];

    var france = [
        {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {'city': 'London'},
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-0.133869, 51.510067
                        ]
                    }
                }
            ]
        }];


    L.Canvas.include({
        _updateMarkerSquare: function (layer) {
            if (!this._drawing || layer._empty()) {
                return;
            }

            var p = layer._point,
                ctx = this._ctx,
                r = Math.max(Math.round(layer._radius), 5);

            this._drawnLayers[layer._leaflet_id] = layer;

            ctx.beginPath();
            ctx.moveTo(p.x - r, p.y - r);
            ctx.lineTo(p.x + r, p.y - r);
            ctx.lineTo(p.x + r, p.y + r);
            ctx.lineTo(p.x - r, p.y + r);
            ctx.lineTo(p.x - r, p.y - r);
            ctx.closePath();
            this._fillStroke(ctx, layer);
        }
    });

    var myMarker = L.CircleMarker.extend({
        _updatePath: function () {
            if (this.options.shape === "square")
                this._renderer._updateMarkerSquare(this);
        }
    });

    var myRenderer = L.canvas({
        padding: 0.5,
    });

    var map = L.map("map").setView([49.2, 0], 6)

    var myRenderer = L.canvas({
        padding: 0.5,
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    //create marker layer and display it on the map
    ukLayer = L.geoJson(uk, {
        pointToLayer: function (feature, latlng) {
            return new myMarker(latlng, {
                shape: 'square',
                color: 'red',
                // interactive: false,
                renderer: myRenderer,
                className: 'pulse'
            })
        }
    }).addTo(map);

    franceLayer = L.geoJson(france, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, {
                className: 'pulse'
            })
        }
    }).addTo(map);
</script>

</body>
</html>

1 Ответ

1 голос
/ 28 января 2020

Добавьте на свой холст слой css класса. 

var myRenderer = L.canvas({
        padding: 0.5,
    });

//...
L.DomUtil.addClass(myRenderer._container, "pulse");

https://jsfiddle.net/falkedesign/swzfvdm9/

...