Блог

я пытаюсь выяснить, как анимировать обновление этого слоя карты, чтобы точки плавно переводились на новые позиции, а не просто появлялись там. я не нашел никаких полезных отправных точек в руководствах / примерах mpabox gl, и мне было интересно, есть ли простой способ подойти к этому. Спасибо

приведенный ниже код извлекает документ geojson из api раз в 60 секунд и обновляет слой карты.

         var map = new mapboxgl.Map({
            container: 'map', // container id
            style: 'mapbox://styles/mapbox/light-v10', // style URL
            center: [-73.93, 40.73], // centroid of NYC
            zoom: 11 // starting zoom
        });

        var url = '/api/v1/nyc/livemap';
            map.on('load', function () {
            var request = new XMLHttpRequest();
            window.setInterval(function () {
            // make a GET request to parse the GeoJSON at the url
            request.open('GET', url, true);
            request.onload = function () {
            if (this.status >= 200 amp;amp; this.status < 400) {
            // retrieve the JSON from the response
            var json = JSON.parse(this.response);

            map.getSource('observations').setData(json);

            map.flyTo({
            center: json.geometry.coordinates,
            speed: 0.5
            });
            }
            };
            request.send();
            }, 60000); // refresh every n milliseconds

            map.addSource('observations', { type: 'geojson', data: url });
            map.addLayer({
                'id': 'buses',
                'type': 'circle',
                'source': 'observations',
                'paint': {
                'circle-radius': 3,
                    //'circle-color': '#0039A6'

                    'circle-color': [
                        'match',
                        ['get', 'occupancy'],
                        'full',
                        '#e55e5e',
                        'standingAvailable',
                        '#FFFF00',
                        'seatsAvailable',
                        '#00FF00',
                        /* null */ '#87CEFA'
                        ]
                        },
            });
            });

  

Mapbox GL JS не содержит никакого механизма для анимации точек данных из одного местоположения в другое.

Вы могли бы использовать along функцию Turf для интерполяции каждой точки в некоторой пропорции по пути от ее предыдущего местоположения к ее новому местоположению.