Анимированная тепловая карта с новыми наборами данных

Я создал простую тепловую карту (используя google maps api v3), в которую я хотел бы добавить элемент базовой анимации.

У меня есть несколько коллекций точек данных, каждая коллекция представляет период времени (скажем, 30 минут).

Я хочу «воспроизвести» тепловые карты, соответствующие одной коллекции данных, за которой следует следующая коллекция, следующая и так далее. Почти как воспроизведение кадров видео.

Я попытался сделать это с помощью MVCArray, который я очищаю и обновляю новыми точками данных. Что-то вроде этого

data = new google.maps.MVCArray(datapoints);

затем через несколько секунд:

for (i=0;i<data.getLength();i++){
        data.removeAt(i);
    }

Это не работает, потому что новые данные тепловой карты будут просто добавлены поверх старой тепловой карты в браузере, даже если массив данных был успешно очищен.

Эта проблема и базовое решение описаны здесь: Удалить слой HeatmapLayer с карт Google

Решение состоит в том, чтобы очистить тепловую карту, используя:

heatmap.setMap(null)

Однако у меня это не работает, так как это полностью очистит тепловую карту и оставит карту пустой на секунду или две. То есть эффект анимации теряется.

Любые предложения о том, что я мог бы сделать?


javascript google-maps-api-3 heatmap
person plithner    schedule 29.09.2013    source источник
comment
Не могли бы вы создать jsFiddle?.   -  person Jean-Paul    schedule 29.09.2013
comment
Конечно! Я немного упростил, но это отражает мою проблему. Что делает скрипт, так это сначала создает тепловую карту, затем ждет 5 секунд и создает еще одну. jsfiddle.net/NNwx7   -  person plithner    schedule 29.09.2013

Ответы (1)


arrow_upward
0
arrow_downward

Ну, я не знаю, возможно ли на самом деле анимировать одну тепловую карту в другую, но определенно возможно сделать что-то вроде это.

По сути, это то же самое, что и вы, но с большей скоростью.

Вы можете добиться чего-то подобного с помощью базового JavaScript.

Например:

<script type="text/javascript">
    // initialise variables
    var speed=5;
    x=0;
    var interval = setInterval(function(){},10000000);
    var heatmap;

    // function to change map
    function changeSpeed(change) {
        speed = speed+change;
        if (speed<=0) speed=1;
        if (speed>=10) speed=10;

        // speed --> delay
        if (speed>5) {
            delay=1000/(speed-5);
        } else {
            delay=1000*(6-speed);
        }

        document.getElementById('speed').firstChild.nodeValue=speed;

        // restarting the function
        clearInterval(interval)
        interval=setInterval(function(){
                    x++;
                    if (x>=heatmapFiles.length) x=0;
                    // document.getElementById('filename').firstChild.nodeValue=heatmapFiles[x];

                    var re = /[0-9]{8}/;
                    var datestr = re.exec(heatmapFiles[x])[0];
                    document.getElementById('date').firstChild.nodeValue=datestr.substring(6,8)+"."+datestr.substring(4,6)+"."+datestr.substring(0,4);

                    var req = new XMLHttpRequest();
                    req.open("GET", "./"+heatmapFiles[x], true);
                    req.onreadystatechange = function heatmapLoaded() {
                        if (req.readyState == 4) {
                            eval("map="+req.responseText);
                            heatmap.setData(map);
                        }
                    }
                    req.send(null); 

                    // redraw
                    document.getElementById('boxed').style.display = 'none';
                    document.getElementById('boxed').style.display = 'inline-block';

         },delay);

    }
  // this is important for you
  function initialize() {
      map = new google.maps.Map(document.getElementById('map_canvas'), {
                                center: new google.maps.LatLng(0,0),
                                zoom: 2,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                                });

      // creating a new heatmap
      heatmap = new google.maps.visualization.HeatmapLayer({ radius: 50 });
      heatmap.setMap(map);

      // calling the 'change map' function
      changeSpeed(0);
  }

    </script>

Как это работает?

Данные тепловой карты хранятся в формате JSON в отдельных файлах Javascript. Таймер используется для загрузки следующего набора данных. Он будет проанализирован и назначен свойству data объекта HeatMapLayer Google Maps. После изменения свойства тепловая карта автоматически перерисовывается с новым набором данных. источник

В качестве альтернативы

Вы можете создать разные тепловые карты в разных divs, а затем использовать jQuery для fadeIn «новой» тепловой карты и fadeOut «старой» тепловой карты одновременно. Это создаст своего рода «анимацию».

Я надеюсь, что это помогает вам. Удачи!

person Jean-Paul    schedule 29.09.2013
comment
Спасибо! Это сработает! (Я просто надеюсь, что смогу сделать это правильно... :-) - person plithner; 29.09.2013