宣传单& Heatmap.js - 无法在'CanvasRenderingContext2D'上执行'getImageData'

时间:2015-03-05 15:45:06

标签: jquery rendering leaflet heatmap

我目前有一个工作传单地图,并希望在此基础上使用传单插件Heatmap.js。 http://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html

我使用的代码与上面链接中的示例非常相似。

 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);

当我运行地图时,我看不到热图的任何迹象。然后,当我在地图上平移时,我在控制台中收到以下错误:

  

无法在'CanvasRenderingContext2D'上执行'getImageData':源高度为0.

知道如何解决这个问题吗? heatmap.js网站上的演示使用几乎完全相同的代码。

谢谢!

修改

我找到了错误可能来自的地方。 heatmap.js中的第316行是:

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

高度返回为零。但是正确设置了宽度。

2 个答案:

答案 0 :(得分:8)

找到解决方案。当我向其添加heatMapLayer时,原来没有完全初始化地图。作为现在的修复,我已将map.addLayer(heatmapLayer)放在超时函数中以确保地图已完全加载。

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

答案 1 :(得分:0)

如果还有其他人仍在寻找解决方案,我会通过实施来解决

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

在我的地图实例上。在我的情况下发生错误是因为屏幕分辨率动态变化。