BlackHole.js с привязкой к картам leaflet.js

!function(){
L.BlackHoleLayer = L.Class.extend({
    // выполняется при инициализации слоя
    initialize: function () {
    },

    // когда слой добавляется на карту то вызывается данный метод
    onAdd: function (map) {
        // Если слой уже был инициализирован значит, мы его хотим снова показать
        if (this._el) {
            this._el.style('display', null);
            // проверяем не приостановлена ли была визуализация
            if (this._bh.IsPaused())
                this._bh.resume();
            return;
        }

        this._map = map;

        //выбираем текущий контейнер для слоев и создаем в нем наш div,
        //в котором будет визуализация 
        this._el = d3.select(map.getPanes().overlayPane).append('div');
      
        // создаем объект blackHole
        this._bh = d3.blackHole(this._el);

        //задаем класс для div
        var animated = map.options.zoomAnimation && L.Browser.any3d;
        this._el.classed('leaflet-zoom-' + (animated ? 'animated' : 'hide'), true);
        this._el.classed('leaflet-blackhole-layer', true);

        // определяем обработчики для событии
        map.on('viewreset', this._reset, this)
            .on('resize', this._resize, this)
            .on('move', this._reset, this)
            .on('moveend', this._reset, this)
        ;

        this._reset();
    },

    // соответственно при удалении слоя leaflet вызывает данный метод
    onRemove: function (map) {
        // если слой удаляется то мы на самом деле его просто скрываем.
        this._el.style('display', 'none');
        // если визуализация запущена, то ее надо остановить
        if (this._bh.IsRun())
            this._bh.pause();
    },

    // вызывается для того чтоб добывать данный слой на выбранную карту.
    addTo: function (map) {
        map.addLayer(this);
        return this;
    },

    // внутренний метод используется для события resize
    _resize : function() {
        // выполняем масштабирование визуализации согласно новых размеров.
        this._bh.size([this._map._size.x, this._map._size.y]);
        this._reset();
    },

    // внутренний метод используется для позиционирования слоя с визуализацией корректно на экране
    _reset: function () {
        var topLeft = this._map.containerPointToLayerPoint([0, 0]);

        var arr = [-topLeft.x, -topLeft.y];

        var t3d = 'translate3d(' + topLeft.x + 'px, ' + topLeft.y + 'px, 0px)';

        this._bh.style({
            "-webkit-transform" : t3d,
            "-moz-transform" : t3d,
            "-ms-transform" : t3d,
            "-o-transform" : t3d,
            "transform" : t3d
        });
        this._bh.translate(arr);
    }
});


L.blackHoleLayer = function() {
    return new L.BlackHoleLayer();
};
}();

// создаем объект карты в div#map
var map = new L.Map('map', {
  maxZoom : 19, // Указываем максимальный масштаб
  minZoom : 2 // и минимальный
}).setView([0,0], 2); // и говорим сфокусироваться в нужной точке

// создаем слой с картой google c типом ROADMAP и параметрами стиля.
var ggl = new L.Google('ROADMAP', {
	mapOptions: {
    backgroundColor: "#19263E",
    styles : [
    {
        "featureType": "water",
        "stylers": [
            {
                "color": "#19263E"
            }
        ]
    },
    {
        "featureType": "landscape",
        "stylers": [
            {
                "color": "#0E141D"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#0E141D"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#21193E"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#21193E"
            },
            {
                "weight": 0.5
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#21193E"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#21193E"
            },
            {
                "weight": 0.5
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#21193E"
            }
        ]
    },
    {
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#365387"
            }
        ]
    },
    {
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "color": "#fff"
            },
            {
                "lightness": 13
            }
        ]
    },
    {
        "featureType": "transit",
        "stylers": [
            {
                "color": "#365387"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#19263E"
            },
            {
                "lightness": 0
            },
            {
                "weight": 1.5
            }
        ]
    }
]
	}
});
// добавляем слой на карту.
map.addLayer(ggl);

function restart() {
  bh.stop();
  
  if ( !locations || !locations.length)
    return;
  
  // очищаем старую информацию о позициях на heatmap
  heat.setLatLngs([]);
  
  // запускаем визуализацию с пересчетом всех объектов
  bh.start(locations, map._size.x, map._size.y, true);
  visLayer._resize();
}

var parentHash;
// функция вызывается для когда выбран файл для загрузки.
function stageTwo ( file ) {
  bh.stop(); // останавливаем визуализацию если она была запущена
  
  // Значение для конвертации координат из LocationHistory в привычные для leaflet.js
  var SCALAR_E7 = 0.0000001; 

  // Запускаем чтение файла
  processFile( file );

  function processFile ( file ) {
    //Создаем FileReader
    var reader = new FileReader();
    
    reader.onprogress = function ( e ) {
      // здесь отображаем ход чтения файла
    };

    reader.onload = function ( e ) {
      try {
        locations = JSON.parse( e.target.result ).locations;
        if ( !locations || !locations.length ) {
          throw new ReferenceError( 'No location data found.' );
        }
      } catch ( ex ) {
        // вывод ошибки
        console.log(ex);
        return;
      }
      
      parentHash = {};
      
      // для вычисления оптимальных границ фокусирования карты
      var sw = [-Infinity, -Infinity]
          , se = [Infinity, Infinity];      

      locations.forEach(function(d, i) {
        d.timestampMs = +d.timestampMs; // конвертируем в число
        
        // преобразуем координаты
        d.lat = d.latitudeE7 * SCALAR_E7;
        d.lon = d.longitudeE7 * SCALAR_E7;
        // формируем уникальный ключ для parent
        d.pkey = d.latitudeE7 + "_" + d.longitudeE7;
        
        // определяем границы
        sw[0] = Math.max(d.lat, sw[0]);
        sw[1] = Math.max(d.lon, sw[1]);
        se[0] = Math.min(d.lat, se[0]);
        se[1] = Math.min(d.lon, se[1]);        
        
        // создаем родительский элемент, куда будет лететь святящаяся точка.
        d.parent = parentHash[d.pkey] || makeParent(d);
      });
      
      // сортируем согласно параметра даты
      locations.sort(function(a, b) {
        return a.timestampMs - b.timestampMs;
      });
      
      // и формируем id для записей
      locations.forEach(function(d, i) {
        d._id = i;
      });
      
      // устанавливаем отображение карты в оптимальных границах
      map.fitBounds([sw, se]);
      
      // запускаем визуализацию
      restart();
    };

    reader.onerror = function () {
      console.log(reader.error);
    };
    
    // читаем файл как текстовый
    reader.readAsText(file);
  }
}

function makeParent(d) {
  var that = {_id : d.pkey};
  // создаем объект координат для leaflet
  that.latlng = new L.LatLng(d.lat, d.lon);
  
  // получаем всегда актуальную информацию о позиции объекта на карте
  // в зависимости от масштаба
  that.x = {
    valueOf : function() {
      var pos = map.latLngToLayerPoint(that.latlng);
      return pos.x;
    }
  };
    
  that.y = {
    valueOf : function() {
      var pos = map.latLngToLayerPoint(that.latlng);
      return pos.y;
    }
  };

  return parentHash[that.id] = that;
}

// настройка некоторых параметров подробно по каждому в документации
bh.setting.increaseChild = false;
bh.setting.createNearParent = false;
bh.setting.speed = 100; // чем меньше тем быстрее
bh.setting.zoomAndDrag = false;
bh.setting.drawParent = false; // не показывать parent
bh.setting.drawParentLabel = false; // не показывать подпись родителя
bh.setting.padding = 0; // отступ от родительского элемента
bh.setting.parentLife = 0; // родительский элемент бессмертен
bh.setting.blendingLighter = true; // принцип наложения слове в Canvas
bh.setting.drawAsPlasma = true; // частицы рисуются как шарики при использовании градиента
bh.setting.drawTrack = true; // рисовать треки частицы

var stepDate = 1; // шаг визуализации

// во все, практически, функции передается исходные обработанные выше элементы (d)
bh.on('getGroupBy', function (d) {
    // параметр по которому осуществляется выборка данных для шага визуализации
    return d._id //d.timestampMs; 
  })
  .on('getParentKey', function (d) {
    return d._id; // ключи идентификации родительского элемента
  })
  .on('getChildKey', function (d) {
    return 'me'; // ключ для дочернего элемента, то есть он будет только один
  })
  .on('getCategoryKey', function (d) {
    return 'me; // ключ для категории дочернего элемента, по сути определяет его цвет
  })
  .on('getCategoryName', function (d) {
    return 'location'; // наименование категории объекта
  })
  .on('getParentLabel', function (d) {
    return ''; // подпись родительского элемента нам не требуется
  })
  .on('getChildLabel', function (d) {
    return 'me'; // подпись дочернего элемента
  })
  .on('calcRightBound', function (l) {
    // пересчет правой границы для выборки дочерних элементов из набора для шага визуализации.
    return l + stepDate; 
  })
  .on('getVisibleByStep', function (d) {
    return true; // всегда отображать объект 
  })
  .on('getParentRadius', function (d) {
    return 1; // радиус родительского элемента
  })
  .on('getChildRadius', function (d) {
    return 10; // радиус летающей точки
  })
  .on('getParentPosition', function (d) {
    return [d.x, d.y]; // возвращает позицию родительского элемента на карте
  })
  .on('getParentFixed', function (d) {
    return true; // говорит что родительский объект неподвижен
  })
  .on('processing', function(items, l, r) {
    // запускаем таймер чтобы пересчитать heatmap
    setTimeout(setMarkers(items), 10);
  })
  .sort(null)
;

// возвращает функцию для пересчета heatmap
function setMarkers(arr) {
  return function() {
    arr.forEach(function (d) {
      var tp = d.parentNode.nodeValue;
      // добавляем координаты родительского объекта в heatmap
      heat.addLatLng(tp.latlng);
    });
  }
}