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

【问题标题】：Leaflet.js heatmap.js - window resize eventLeaflet.js heatmap.js - 窗口调整大小事件
【发布时间】：2015-10-12 10:02:03
【问题描述】：

我使用heatmap.js 在leaflet.js 上绘制热图。我能够精美地渲染它。但是，假设初始窗口/div 大小为 400x400。然后我调整窗口大小，div 变为 600x600，热图图层的大小仍为 400x400 并被截断。移动地图时，您可以看到热图的 400x400 切割区域。

是否要调整大小或重置大小？

【问题讨论】：

标签： javascript leaflet mapbox heatmap

【解决方案1】：

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

调整地图大小时触发。

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

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

检查地图容器大小是否发生变化，如果发生变化，则更新地图 - 在您动态更改地图大小后调用它，

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

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

【讨论】：

感谢您指出这一点。这是一个好的开始。但是我必须添加删除热图图层并重新绘制它才能工作。我接受了你的回答并发布了我的回答。
@ih8 我的热图在一个隐藏的 div 中。当我打开隐藏的 div 时，会显示地图，但几乎所有的 div 都是灰色的，没有显示地图。我必须拖动地图才能看到它或更改我的屏幕大小然后显示地图。你能告诉我当隐藏的 div 变得可见时我将如何正确查看地图
只有在我调整浏览器大小或打开浏览器控制台时才能正确加载地图
@Gardezi，你读过我的回答吗？您可以通过在您的地图实例上调用 invalidateSize 来做到这一点，就像我在代码示例中所做的那样。如果您遇到问题，请发布您自己的问题，因为这绝对不是 cmets 的用途。

【解决方案2】：

在我看来，这是传单 0.7.x 中的一个错误，它发生在包含地图的 div 的某些 CSS 设置下。我通过修改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();
}

【讨论】：