Javascript 传单.js heatmap.js-窗口大小调整事件

我正在使用它在传单.js上绘制热图。我能把它渲染得很美。但是，假设初始窗口/分区大小为400x400。然后我调整窗口的大小，div变为600x600，热图层的大小仍然是400x400并被切断。移动地图时，可以看到切碎的400x400热图区域

---

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

您可以收听

L.Map

实例的

resize

事件：

调整贴图大小时激发

然后使用

L.Map

实例的

invalideSize

方法：

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

---

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

\u重置原点：函数（）{
此._原点=此._地图图层点图集（新的L点（0，0））；
var size=this.\u map.getSize（）；
if（this._width！==size.x | | this._height！==size.y）{
这是。_width=size.x；
这个。_高度=尺寸.y；
这个。_el.style.width=这个。_width+'px'；
此._el.style.height=此._height+'px'；
此.\u热图.\u渲染器.setDimensions（此.\u宽度，此.\u高度）；//谢谢你指出这一点。这是一个很好的开始。但是我必须添加、删除热图层并重新绘制它才能工作。我接受你的答案，并发布我的答案。@ih8我的热图在一个隐藏分区中。当我打开隐藏分区时，地图会显示出来，但大多数分区都是灰色的，没有显示地图。我必须拖动如果要查看地图或更改屏幕大小，则显示地图。您能告诉我，当隐藏的div变为可见时，如何正确查看地图？只有在调整浏览器大小或打开浏览器时，才能正确加载地图console@Gardezi，你读过我的答案吗？你可以在地图实例上调用
invalidateSize
，只要如果你有问题，请发表你自己的问题，因为这绝对不是评论的目的。
_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();
}