Google Maps Анимированная тепловая карта - PullRequest
Новая
       21

Google Maps Анимированная тепловая карта

6 голосов
/ 03 августа 2011

Мне было интересно, можно ли анимировать тепловую карту, которую я настроил для своей карты Google. Было достаточно легко настроить карту Google и добавить к ней карту тепла. Но это выглядит довольно скучно. Я хотел добавить какой-нибудь импульсный эффект на карту тепла. Спасибо

Ответы [ 2 ]

4 голосов
/ 29 августа 2014

Это просто, чтобы оживить внешний вид тепловой карты.В следующем примере устанавливается пользовательский массив цветов градиента и модулируется его размер.Результатом является своего рода пульсирующий эффект.Вы можете настроить цвета по своему вкусу в функции modulateGradient или даже добавить изменения в непрозрачность тепловой карты.Однако обратите внимание, что в зависимости от размера набора данных анимация может оказать значительное влияние на производительность.

HTML 

<div id="map-canvas"></div>

JS 

var map, pointarray, heatmap;
var gradient, gradientStep = -1;

var taxiData = [
    new google.maps.LatLng(37.782551, -122.445368),
    new google.maps.LatLng(37.782745, -122.444586),
    new google.maps.LatLng(37.782842, -122.443688),
    new google.maps.LatLng(37.782919, -122.442815),
    new google.maps.LatLng(37.782992, -122.442112),
    new google.maps.LatLng(37.783100, -122.441461),
    new google.maps.LatLng(37.783206, -122.440829),
    new google.maps.LatLng(37.783273, -122.440324),
    new google.maps.LatLng(37.783316, -122.440023),
    new google.maps.LatLng(37.783357, -122.439794),
    new google.maps.LatLng(37.783371, -122.439687)
];

function initialize() {
    var mapOptions = {
        zoom: 13,
        center: new google.maps.LatLng(37.774546, -122.433523),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var pointArray = new google.maps.MVCArray(taxiData);

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: pointArray
    });

    heatmap.setMap(map);
    setGradient();

    google.maps.event.addListenerOnce(map, 'tilesloaded', modulateGradient);
}

function setGradient() {
    gradient = [
        'rgba(0, 255, 255, 0)',
        'rgba(0, 255, 255, 1)',
        'rgba(0, 191, 255, 1)',
        'rgba(0, 127, 255, 1)',
        'rgba(0, 63, 255, 1)',
        'rgba(0, 0, 255, 1)',
        'rgba(0, 0, 223, 1)',
        'rgba(0, 0, 191, 1)',
        'rgba(0, 0, 159, 1)',
        'rgba(0, 0, 127, 1)',
        'rgba(63, 0, 91, 1)',
        'rgba(127, 0, 63, 1)',
        'rgba(191, 0, 31, 1)',
        'rgba(255, 0, 0, 1)'
    ];
    heatmap.set('gradient', gradient);
}

function modulateGradient() {
    var modulator = function() {
        var newGradient = gradient.slice(0, heatmap.get('gradient').length + gradientStep);

        if (newGradient.length == gradient.length || newGradient.length == 7) {
            gradientStep *= -1;
        }

        heatmap.set('gradient', newGradient);

        setTimeout(modulator, 100);
    };

    setTimeout(modulator, 100);
}

google.maps.event.addDomListener(window, 'load', initialize);

найти живую версию кода на JSFiddle .

0 голосов
/ 24 октября 2016

Вы можете создать своего рода пульсирующий эффект, изменив размер радиуса слоя тепловой карты.

Сначала давайте создадим var smallRadius и var bigRadius и установим для них значения;Например, smallRadius = 40; bigRadius = 80;

, затем добавьте размер радиуса к вашему var mapOptions и установите его на smallRadius.

Затем создайте функцию animateRadius(), которая изменяет значение радиуса сsmallRadius до bigRadius, если он установлен на smallRadius, в противном случае установите радиус на smallRadius.

Затем настройте функцию на запуск каждую секунду или около того, окружив функцию в setInterval().

Итак, в основном это: 

var smallRadius = 40;
var bigRadius = 80;

    var mapOptions = {
            zoom: 13,
            center: new google.maps.LatLng(37.774546, -122.433523),
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            radius: smallRadius
        };

//animate radius function

setInterval(function animateRadius()
         {
             if (heatMap.get('radius') === smallRadius)
            {
                heatMap.set('radius', bigRadius);
            }
            else
            {
                heatMap.set('radius', smallRadius);
            }
         }, 1000); // changes radius every 1 second

Очевидно, вы можете изменить smallRadius и bigRadius на любые значения, которые вы хотите.

...