Leaflet.js heatmap.js - window 调整大小事件

Question

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

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

Answer 1

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

Fired when the map is resized.

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

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

Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically,

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

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

Answer 2

在我看来，这是 leaflet 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();
}

Leaflet.js heatmap.js - window 调整大小事件

Leaflet.js heatmap.js - window resize event

javascript

heatmap

leaflet

mapbox