Leaflet & Heatmap.js - Fehler beim Ausführen von 'getImageData' auf 'CanvasRenderingContext2D'

Question

Ich habe derzeit eine funktionierende Broschüre und möchte zusätzlich das Broschüren-Plugin Heatmap.js verwenden. http://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html

Der Code, den ich verwende, ist dem Beispiel im obigen Link sehr ähnlich.

var testData = { 
       max: 8, 
       data: [{lat: 24.6408, lng:46.7728, radius:500, count: 3}] 
      }; 


var cfg = { 
       "radius": 2, 
       "maxOpacity": 8, 
       "scaleRadius": true,      
       "useLocalExtrema": true, 
       latField: 'lat',     
       lngField: 'lng', 
       valueField: 'count' 
      }; 

var heatmapLayer = new HeatmapOverlay(cfg); 

map.addLayer(heatmapLayer); 

heatmapLayer.setData(testData); 

Wenn ich die Karte laufen sehe ich kein Zeichen der Heatmap. Dann, wenn ich die Karte schwenken um ich folgende Fehlermeldung in der Konsole:

konnte nicht ausgeführt werden ‚getImageData‘ auf ‚CanvasRenderingContext2D‘: Die Quellhöhe ist 0.

Jede Idee, wie zu lösen Dies? Die Demo auf der heatmap.js-Website funktioniert hervorragend mit fast identischem Code.

Danke!

EDIT:

ich gefunden habe, wo der Fehler aus sein kann eine Verspätung. Linie 316 in heatmap.js ist:

this._height = canvas.height = shadowCanvas.height = +(computed.height.replace(/px/,'')); 

Höhe wird als Null zurückgegeben. Die Breite wird jedoch richtig eingestellt.

Answer 1

Eine Lösung gefunden. Es stellte sich heraus, dass die Karte nicht vollständig initialisiert wurde, als ich die heatMapLayer dazu hinzufügte. Als Fix für den Moment habe ich map.addLayer (heatmapLayer) innerhalb einer Timeout-Funktion platziert, um sicherzustellen, dass die Map vollständig geladen ist.

setTimeout(function(){ 
    map.addLayer(heatmapLayer); 
},500)