Leaflet.js heatmap.js - 窗口调整大小事件

Question

我正在使用heatmap.js在leaflet.js上绘制热图。我能够很漂亮地呈现它。但是，假设初始窗口/ div大小为400x400。然后我调整窗口大小，div变为600x600，热图图层的大小仍然是400x400并且截止。移动地图时，您可以看到热图的400x400切碎区域。

无论如何要调整大小或重置大小？

Answer 1

您可以收听resize个实例的L.Map事件：

  

调整地图大小时触发。

http://leafletjs.com/reference.html#map-resize

然后使用invalideSize实例的L.Map方法：

  

检查地图容器大小是否已更改并更新地图（如果是这样） - 在您动态更改地图大小后调用它，

http://leafletjs.com/reference.html#map-invalidatesize

map.on('resize', function () {
    map.invalidateSize();
});

Answer 2

我认为这是传单0.7.x中的错误，该错误在某些CSS设置下针对包含地图的div发生。我通过修改leaflet-heatmap.js中的以下函数来解决此问题：

_resetOrigin: function () {
  this._origin = this._map.layerPointToLatLng(new L.Point(0, 0));

  var size = this._map.getSize();
  if (this._width !== size.x || this._height !== size.y) {
    this._width  = size.x;
    this._height = size.y;

    this._el.style.width = this._width + 'px';
    this._el.style.height = this._height + 'px';
    this._heatmap._renderer.setDimensions(this._width, this._height);   // <- added this line
  }
  this._draw();
}